js中的this是在运行时基于执行环境动态绑定的。
js中的this指向一般分为以下几种情况:
1,对象调用
2,普通函数调用
3,new
4,call,apply,bind
5,箭头函数
当函数作为对象的方法时,this指向该对象,也就是.之前的对象。
let obj = {
a:1,
b: function () {console.log(this) } // 当前的this为 obj
}
当不作为对象的属性而只是一个普通函数被调用时,this指向window,也就是全局对象。
let obj = {
a:1,
b: function (){console.log(this)}
}
let getThis = obj.b;
getThis() // window
当使用new调用构造函数时,总是会返回一个对象,this一般指向返回的这个对象。
let P = function (){
this.a = 1;
}
let p = new P()
console.log(p.a) // 1
如果构造函数显式的返回一个对象,那么this就指向显式返回的这个对象。
let P = function(){
this.a = 1;
return {
a: 2
}
}
let p = new P()
p.a // 2
当使用call apply bind的时候,会改变当前的this指向
let obj = {
a:1,
b: function (){console.log(this.a)}
}
let obj1 = {
a:2
}
obj.b.call(obj1) // 2
obj.b.apply(obj1) // 2
obj.b.bind(obj1)() // 2
箭头函数的this
随着es6越来越普及,上面的现象慢慢的变得不那么需要了,我们只需要搞懂箭头函数中this的问题,就能处理大部分目前开发中遇到的问题。
箭头函数的this指的就是定义时所在的对象。并不是上面几种运行时才确定的。这就说明在箭头函数中this是固定的。
这是因为本质上箭头函数是没有this的,导致他里面使用到this时,就只能用外层环境的this
这里可以总结一句话: 箭头函数中的this和外层function的this一致,如果外层不是function,则this指向window