重慶分公司
重慶分公司，新征程啟航
為企業(yè)提供網(wǎng)站建設(shè)、域名注冊(cè)、服務(wù)器等服務(wù)
JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己的作用域鏈的上一層繼承this。
為浙江等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及浙江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、浙江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
由于箭頭函數(shù)沒(méi)有自己的this指針，通過(guò) call() 或 apply() 方法調(diào)用一個(gè)函數(shù)時(shí)，只能傳遞參數(shù)（不能綁定this），他們的第一個(gè)參數(shù)會(huì)被忽略。
前言
閱讀下面的內(nèi)容要先看下《你不知道的javascript（上）》中的第二部分：this和對(duì)象原型（里面對(duì)于this指向的理論部分主要來(lái)源于該書(shū)）。
問(wèn)題
這周在寫(xiě)代碼的時(shí)候，聽(tīng)同事在說(shuō)箭頭函數(shù)無(wú)法更改this的指向，并且使用下面代碼進(jìn)行驗(yàn)證：
// (1) 使用箭頭函數(shù)，this一直指向window
var a = 0
var obj1 = {
a: 1,
fn: () => { console.log(this.a) }
}
obj1.fn() // 結(jié)果：0
var obj2 = {
a: 2
}
obj2.fn = obj1.fn
obj2.fn() // 結(jié)果：0// （2）不使用箭頭函數(shù)，this的指向會(huì)更改
var obj3 = {
a: 3,
fn: function() { console.log(this.a) }
}
obj3.fn() // 結(jié)果：3第一段代碼，無(wú)論fn綁定在哪個(gè)對(duì)象上，this.a始終指向全局的a（在非嚴(yán)格模式下的瀏覽器中我們可認(rèn)為是window）
然而，這種說(shuō)法是有問(wèn)題（我認(rèn)為）。
先理解this
this代表什么取決于：
- 調(diào)用位置
- 四種綁定規(guī)則
var a = 0
test() // 調(diào)用位置在此，通過(guò)【默認(rèn)綁定規(guī)則】，可知test的this綁定到了window上
function test() {
console.log(this) // this是window
var obj1 = {
a: 1,
fn: function() {
console.log(this) // this是obj1
console.log(this.a)
}
}
obj1.fn() // 調(diào)用位置在此,通過(guò)【隱式綁定規(guī)則】，可知fn中的this綁定到了obj1上
var obj2 = {
a: 2
}
obj2.fn = obj1.fn
obj2.fn() // 調(diào)用位置在此，【隱式綁定規(guī)則】，可知fn內(nèi)的this綁定到了obj2
}箭頭函數(shù)中的this
其實(shí)這么起標(biāo)題不太準(zhǔn)確（然而想不出好的名字），因?yàn)榧^函數(shù)是不會(huì)創(chuàng)建自己的this的（MDN），那么下面代碼的this是來(lái)源于哪里的呢？
var obj3 = {
a: 3,
fn: () => {
console.log(this.a)
}
}
obj3.fn() // 調(diào)用位置在此，this指向windowarrowFoo1() // （1）此處是調(diào)用位置，使用【默認(rèn)的綁定規(guī)則】，this = window
function arrowFoo1() {
var obj1 = {
vv: 'svv1',
fn: () => {
console.log(this.vv, 'vv的值是')
}
}
// （2）調(diào)用位置是此處，若fn不是箭頭函數(shù)，那么這里也會(huì)有自己的this（即【隱式調(diào)用規(guī)則】，this綁定為obj1），而fn是箭頭函數(shù)，則它沒(méi)有this，那么fn內(nèi)部調(diào)用的this是誰(shuí)？
// 這時(shí)候需要根據(jù)作用域的規(guī)則，往外層查找，找到哪里？找到調(diào)用obj1.fn的調(diào)用棧，即arrowFoo1函數(shù)的this，那么從（1）中可知，那個(gè)this指向的是window
obj1.fn()
var obj2 = {
vv: 'svv2',
}
obj2.fn = obj1.fn
obj2.fn()
}
function arrowFoo2() {
var vv = '哦哦哦哦哦'
console.log(this.vv, 'vv的值是')
}因此，箭頭函數(shù)里面要是用到了this，那么其實(shí)它是通過(guò)作用域鏈，往外進(jìn)行查找的，找到了就直接返回咯。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
網(wǎng)站題目：JavaScript基礎(chǔ)之this和箭頭函數(shù)詳析
分享網(wǎng)址：http://www.xueling.net.cn/article/pehphg.html