希望你能區(qū)分清楚作用域鏈和 this 是兩套不同的系統(tǒng)撰糠，它們之間基本沒太多聯(lián)系酥馍。在前期明確這點碗旅，可以避免你在學(xué)習(xí) this 的過程中，和作用域產(chǎn)生一些不必要的關(guān)聯(lián)。
在對象內(nèi)部的方法中使用對象內(nèi)部的屬性是一個非常普遍的需求。但是 JavaScript 的作用域機制并不支持這一點，基于這個需求几迄，JavaScript 又搞出來另外一套 this 機制解孙。
this默認(rèn)指向全局變量window
用call改變this指向
let bar = { myName : "極客邦", test1 : 1}
function foo(){ this.myName = "極客時間"}
foo.call(bar)
console.log(bar)
console.log(myName)
執(zhí)行這段代碼，然后觀察輸出結(jié)果，你就能發(fā)現(xiàn) foo 函數(shù)內(nèi)部的 this 已經(jīng)指向了 bar 對象荠商，因為通過打印 bar 對象酷鸦，可以看出 bar 的 myName 屬性已經(jīng)由“極客邦”變?yōu)椤皹O客時間”了眠寿，同時在全局執(zhí)行上下文中打印 myName例嘱，JavaScript 引擎提示該變量未定義奢浑。
其實除了 call 方法，你還可以使用 bind 和 apply 方法來設(shè)置函數(shù)執(zhí)行上下文中的 this
用函數(shù)調(diào)用改變this指向
使用對象來調(diào)用其內(nèi)部的一個方法徊哑，該方法的 this 是指向?qū)ο蟊旧淼摹?/p>
var myObj = {
name : "極客時間",
showThis: function(){
console.log(this)
}
}
myObj.showThis()
執(zhí)行這段代碼墩蔓，你可以看到，最終輸出的 this 值是指向 myObj 的葡粒。
可以理解為
myObj.showThis.call(myObj)
下面的this指向哪里夫壁？
var myObj = {
name : "極客時間",
showThis: function(){
console.log(this)
}
}
var foo = myObj.showThis
foo()
答：此時this指向全局 window 對象。
- 通過一個對象來調(diào)用其內(nèi)部的一個方法姨蝴，該方法的執(zhí)行上下文中的 this 指向?qū)ο蟊旧怼?/li>
- 在全局環(huán)境中調(diào)用一個函數(shù)浮梢，函數(shù)內(nèi)部的 this 指向的是全局變量 window洲尊。
進階
var myObj = {
name : "極客時間",
showThis: function(){
console.log(this) //這個this指向myObj 對象
function bar(){console.log(this)} //這個this指向全局window對象
bar()
}
}
myObj.showThis()
為了解決this這樣的迷惑行為（在默認(rèn)情況下調(diào)用一個函數(shù)，其執(zhí)行上下文中的 this 是默認(rèn)指向全局對象 window 的内狸。），有兩種解決方案：
第一種是把 this 保存為一個 self 變量舞萄，再利用變量的作用域機制傳遞給嵌套函數(shù)。第二種是繼續(xù)使用 this含潘，但是要把嵌套函數(shù)改為箭頭函數(shù)漱逸，因為箭頭函數(shù)沒有自己的執(zhí)行上下文，所以它會繼承調(diào)用函數(shù)中的 this蔗草。
改寫
var myObj = {
name : "極客時間",
showThis: function(){
console.log(this)
var self = this
function bar(){
self.name = "極客邦"
}
bar()
}
}
myObj.showThis()
console.log(myObj.name)
console.log(window.name)
或者使用ES6箭頭函數(shù)
var myObj = {
name : "極客時間",
showThis: function(){
console.log(this)
var bar = ()=>{
this.name = "極客邦"
console.log(this)//因為箭頭函數(shù)沒有自己的執(zhí)行上下文，所以箭頭函數(shù)的 this 就是它外層函數(shù)的 this。
}
bar()
}
}
myObj.showThis()
console.log(myObj.name)
console.log(window.name)
總結(jié)
當(dāng)函數(shù)作為對象的方法調(diào)用時贯溅，函數(shù)中的 this 就是該對象罚缕；當(dāng)函數(shù)被正常調(diào)用時盟劫，在嚴(yán)格模式下，this 值是 undefined，非嚴(yán)格模式下 this 指向的是全局對象 window勺阐；嵌套函數(shù)中的 this 不會繼承外層函數(shù)的 this 值十减。
思考題
let userInfo = {
name:"jack.ma",
age:13,
sex:male,
updateInfo:function(){
//模擬xmlhttprequest請求延時
setTimeout(function(){
this.name = "pony.ma"
this.age = 39
this.sex = female
},100)
}
}
userInfo.updateInfo()
我想通過 updateInfo 來更新 userInfo 里面的數(shù)據(jù)信息，但是這段代碼存在一些問題蒿赢，你能修復(fù)這段代碼嗎嗅钻？
// 修改方法一：箭頭函數(shù)最方便
let userInfo = {
name:"jack.ma",
age:13,
sex:'male',
updateInfo:function(){
// 模擬 xmlhttprequest 請求延時
setTimeout(() => {
this.name = "pony.ma"
this.age = 39
this.sex = 'female'
},100)
}
}
userInfo.updateInfo()
setTimeout(() => {
console.log(userInfo)
},200)
// 修改方法二：緩存外部的this
let userInfo = {
name:"jack.ma",
age:13,
sex:'male',
updateInfo:function(){
let me = this;
// 模擬 xmlhttprequest 請求延時
setTimeout(function() {
me.name = "pony.ma"
me.age = 39
me.sex = 'female'
},100)
}
}
userInfo.updateInfo()
setTimeout(() => {
console.log(userInfo);
},200)
// 修改方法三概说，其實和方法二的思路是相同的
let userInfo = {
name:"jack.ma",
age:13,
sex:'male',
updateInfo:function(){
// 模擬 xmlhttprequest 請求延時
void function(me) {
setTimeout(function() {
me.name = "pony.ma"
me.age = 39
me.sex = 'female'
},100)
}(this);
}
}
userInfo.updateInfo()
setTimeout(() => {
console.log(userInfo)
},200)
let update = function() {
this.name = "pony.ma"
this.age = 39
this.sex = 'female'
}
方法四: 利用call或apply修改函數(shù)被調(diào)用時的this值(不知掉這么描述正不正確)
let userInfo = {
name:"jack.ma",
age:13,
sex:'male',
updateInfo:function(){
// 模擬 xmlhttprequest 請求延時
setTimeout(function() {
update.call(userInfo);
// update.apply(userInfo)
}, 100)
}
}
userInfo.updateInfo()
setTimeout(() => {
console.log(userInfo)
},200)
// 方法五: 利用bind返回一個新函數(shù)刻撒，新函數(shù)被調(diào)用時的this指定為userInfo
let userInfo = {
name:"jack.ma",
age:13,
sex:'male',
update: function() {
this.name = "pony.ma"
this.age = 39
this.sex = 'female'
},
updateInfo:function(){
// 模擬 xmlhttprequest 請求延時
setTimeout(this.update.bind(this), 100)
}
}
擴展箱吕，如果使用setTimeout要注意this指向
var name= 1;
var MyObj = {
name: 2,
showName: function(){
console.log(this.name);
}
}
setTimeout(MyObj.showName,1000)
這里輸出的是 1怎栽，因為這段代碼在編譯的時候由桌，執(zhí)行上下文中的 this 會被設(shè)置為全局 window，如果是嚴(yán)格模式经瓷，會被設(shè)置為 undefined柱嫌。
改進方法：
//箭頭函數(shù)
setTimeout(() => {
MyObj.showName()
}, 1000);
//或者function函數(shù)
setTimeout(function() {
MyObj.showName();
}, 1000)
