一、前言
this是JavaScript中的一个关键字，但是想要搞清楚它是怎么使用的，却不是那么的容易。this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。这一次，我们一起来彻底搞懂this到底是如何绑定的吧！
二、理解this
2.1 this的意义
使用this有什么意义呢？下面的代码中，我们通过对象字面量创建出来一个对象，当我们调用对象的方法时，希望将对象的名称一起进行打印。如果没有this，那么我们要像下面一样：
varobj={
name:"carson",
running:function() {
console.log(obj.name+" running");
}
}
那么，如果我要修改obj为obj2呢，这时候我就要在所有用到obj的地方，把它改成obj2。但是，如果使用this，那么写法就如下所示：
varobj={
name:"carson",
running:function() {
console.log(this.name+" running");
}
}
2.2 this指向什么
看过很多博客和书，都是这么说的：谁最终调用了函数，this就指向谁。
所以要搞清楚this指向什么，就要搞清楚谁调用了函数。但是在实际中，你会发现好像并不容易发现谁调用了函数，因为在平常中我们都习惯这样调用函数：
func(p1,p2)
obj.child.method(p1,p2)
所以有时候会很难发现this指向什么。但是函数调用还有另外一种形式：call，上面的代码就等价于下面的调用形式：
func(p1,p2)等价于
func.call(undefined,p1,p2)
obj.child.method(p1,p2)等价于
obj.child.method.call(obj.child,p1,p2)
这时候其实this就是call的第一个参数，所以记住这个转化代码，之后碰到普通函数调用都把它转换成：
func.call(context,p1,p2)
这时候的this就是context了。
下面看一个例子：
varobj={
foo:function(){
console.log(this)
}
}
varbar=obj.foo
obj.foo()// obj
bar()// window
把上面的两行调用转换成以下代码：
obj.foo.call(obj)// this 就是 obj
bar.call()// window
// 由于没有传 context
// 所以 this 就是 undefined
// 最后浏览器给你一个默认的 this —— window 对象
可以看出转化后，就能很快的找到this具体指向的是什么了。
如果你传的 context 是 null 或 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）
this永远是call函数的第一个参数。
三、内置函数的this
btn.addEventListener('click',functionhandler(){
console.log(this)// 请问这里的 this 是什么
})
这时候好像不能用上面的方法判断，因为我不知道是谁call这个函数啊，这种情况就是通过分析源码或者是查看文档，
当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。
所以这是的this就是指当前正在执行事件的元素，那么this就一定是那个元素吗？当然不是，我可以这样调用，
btn.addEventListener('click' ,function handler(){
console.log(this) // 请问这里的 this 是什么
}.bind({name: 'carson'}))
这时候的this就是{name: 'carson'}这个对象了。
所以通过上面知道，this的值只有在传参的时候确定。
四、箭头函数
这里顺便说一下箭头函数，实际上箭头函数里并没有 this，如果你在箭头函数里看到 this，你直接把它当作箭头函数外面的 this 即可。外面的 this 是什么，箭头函数里面的 this 就还是什么，因为箭头函数本身不支持 this。通过下面的面试题就可以看出来。
五、this的面试题
记住fn.call(context, p1, p2)这个函数调用的形式，再来看下面的三道面试题，你会发现this指向也不过如此：
5.1 面试题一
var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
},
}
var person2 = { name: 'person2' }
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
代码解析：
person1.foo1() // person1.foo1.call(person1) person1
person1.foo1.call(person2) // person2
// foo2()是一个箭头函数，this就是外面的this
person1.foo2() // person1.foo2.call(person1) window
// foo2依然是箭头函数，call对它没用，就是外面的this
person1.foo2.call(person2) // window
// 获取到foo3，但是后面的call参数为空，所以是默认绑定window
person1.foo3()() // person1.foo3.call(person1).call() window
// foo3绑定到person2，但是后面的call参数为空，所以是默认绑定window
person1.foo3.call(person2)() // person1.foo3.call(person2).call() window
// 获取到foo3，后面的call参数为person2，所以是绑定person2
person1.foo3().call(person2) // person1.foo3.call(person1).call(person2) person2
// foo4()的函数返回的是一个箭头函数，所以this就是外面的this，person1
person1.foo4()() // person1.foo4.call(person1).call() person1
// foo4()显示绑定到person2中，并且返回一个箭头函数，this是外面的this，所以是person2
person1.foo4.call(person2)() // person1.foo4.call(person2).call() person2
// foo4返回的是箭头函数，箭头函数只看外面的this
person1.foo4().call(person2) // person1.foo4.call(person1).call(person2) person1
当把题目中的普通调用转换成上面的call调用，是不是就没有那么难了，this指向也清楚了，下面的两道也是类似。
5.2 面试题二
var name = 'window'
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function () {
return function () {
console.log(this.name)
}
},
this.foo4 = function () {
return () => {
console.log(this.name)
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
代码解析：
person1.foo1() // person1.foo1.call(person1) person1
person1.foo1.call(person2) // person2
person1.foo2() // person1.foo2.call(person1) person1
person1.foo2.call(person2) // person1
person1.foo3()() // person1.foo3(person1).call() window
person1.foo3.call(person2)() // person1.foo3.call(person2).call() window
person1.foo3().call(person2) // person1.foo3.call(person1).call(person2) person2
person1.foo4()() // person1.foo4.call(person1).call() person1
person1.foo4.call(person2)() // person1.foo4.call(person2).call() person2
person1.foo4().call(person2) // person1.foo4.call(person1).call(person2) person1
5.3 面试题三
var name = 'window'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
foo1: function () {
return function () {
console.log(this.name)
}
},
foo2: function () {
return () => {
console.log(this.name)
}
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)
代码解析：
person1.obj.foo1()() // person1.obj.foo1.call(person1.obj).call() window
person1.obj.foo1.call(person2)() // person1.obj.foo1.call(person2).call() window
person1.obj.foo1().call(person2) // person1.obj.foo1(person1.obj).call(person2) person2
person1.obj.foo2()() // person1.obj.foo2.call(person1.obj).call() obj
person1.obj.foo2.call(person2)() // person1.obj.foo2.call(person2).call() person2
person1.obj.foo2().call(person2) // person1.obj.foo2.call(person1.obj).call(person2) obj
六、总结
this 就是你 call 一个函数时，传入的第一个参数。如果你的函数调用形式不是 call 形式，请按照上面的格式将其转换为 call 形式，那么this的指向就一目了然了。
网友评论