希望你能区分清楚作用域链和 this 是两套不同的系统，它们之间基本没太多联系。在前期明确这点，可以避免你在学习 this 的过程中，和作用域产生一些不必要的关联。
在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。
this默认指向全局变量window
用call改变this指向
let bar = { myName : "极客邦", test1 : 1}
function foo(){ this.myName = "极客时间"}
foo.call(bar)
console.log(bar)
console.log(myName)
执行这段代码，然后观察输出结果，你就能发现 foo 函数内部的 this 已经指向了 bar 对象，因为通过打印 bar 对象，可以看出 bar 的 myName 属性已经由“极客邦”变为“极客时间”了，同时在全局执行上下文中打印 myName，JavaScript 引擎提示该变量未定义。
其实除了 call 方法，你还可以使用 bind 和 apply 方法来设置函数执行上下文中的 this
用函数调用改变this指向
使用对象来调用其内部的一个方法，该方法的 this 是指向对象本身的。
var myObj = {
name : "极客时间",
showThis: function(){
console.log(this)
}
}
myObj.showThis()
执行这段代码，你可以看到，最终输出的 this 值是指向 myObj 的。
可以理解为
myObj.showThis.call(myObj)
下面的this指向哪里？
var myObj = {
name : "极客时间",
showThis: function(){
console.log(this)
}
}
var foo = myObj.showThis
foo()
答：此时this指向全局 window 对象。
- 通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。
- 在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window。
进阶
var myObj = {
name : "极客时间",
showThis: function(){
console.log(this) //这个this指向myObj 对象
function bar(){console.log(this)} //这个this指向全局window对象
bar()
}
}
myObj.showThis()
为了解决this这样的迷惑行为（在默认情况下调用一个函数，其执行上下文中的 this 是默认指向全局对象 window 的。），有两种解决方案：
第一种是把 this 保存为一个 self 变量，再利用变量的作用域机制传递给嵌套函数。第二种是继续使用 this，但是要把嵌套函数改为箭头函数，因为箭头函数没有自己的执行上下文，所以它会继承调用函数中的 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箭头函数
var myObj = {
name : "极客时间",
showThis: function(){
console.log(this)
var bar = ()=>{
this.name = "极客邦"
console.log(this)//因为箭头函数没有自己的执行上下文，所以箭头函数的 this 就是它外层函数的 this。
}
bar()
}
}
myObj.showThis()
console.log(myObj.name)
console.log(window.name)
总结
当函数作为对象的方法调用时，函数中的 this 就是该对象；当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window；嵌套函数中的 this 不会继承外层函数的 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 里面的数据信息，但是这段代码存在一些问题，你能修复这段代码吗？
// 修改方法一：箭头函数最方便
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修改函数被调用时的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返回一个新函数，新函数被调用时的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，因为这段代码在编译的时候，执行上下文中的 this 会被设置为全局 window，如果是严格模式，会被设置为 undefined。
改进方法：
//箭头函数
setTimeout(() => {
MyObj.showName()
}, 1000);
//或者function函数
setTimeout(function() {
MyObj.showName();
}, 1000)
网友评论