JavaScript 中的 this 简单规则
几条规则确定函数里的this是什么。
想确定this是什么其实非常简单。总体的规则是，通过检查它的调用位置，在函数被调用的的时候确定this。它遵循下面这些规则，接下来以优先级顺序说明。
规则
1、如果在调用函数时使用new关键字，那么函数里的this就是一个全新的对象。
functionConstructorExample(){
console.log(this);
this.value=10;
console.log(this);
}
newConstructorExample();
//->{}
//->{value:10}
2、如果使用apply、call或者bind调用函数，那么函数里的this就是作为参数传进去的对象。
functionfn(){
console.log(this);
}
varobj={
value:5
};
varboundFn=fn.bind(obj);
boundFn();//->{value:5}
fn.call(obj);//->{value:5}
fn.apply(obj);//->{value:5}
3、如果函数作为一个方法调用，就是说如果使用点符号调用函数，那么this就是拥有这个函数作为属性的对象。换句话说，当一个点在函数调用的左侧时，this就是这个点左侧的那个对象。
varobj={
value:5,
printThis:function(){
console.log(this);
}
};
obj.printThis();//->{value:5,printThis:ƒ}
4、如果函数作为一个纯粹的函数调用，也就是说，它在没有上述任何条件的情况下被调用，那么this就是全局对象。在浏览器里，就是window对象。
functionfn(){
console.log(this);
}
//如果在浏览器里调用：
fn();//->Window{stop:ƒ,open:ƒ,alert:ƒ,...}
注意这个规则其实和第三个规则是一样的，区别在于没有声明为方法的函数会自动成为全局对象window的属性。因此，这其实是一个隐式的方法调用。当我们调用fn()，其实就会被浏览器理解为window.fn()，所以this就是window。
console.log(fn===window.fn);//->true
5、如果上述规则有多个适用，那么优先级更高的就会设置this值。
6、如果是ES2015里的箭头函数，那么它将忽略上述所有规则，并在创建的时候接收包含它的作用域作为this的值。想确定this具体是什么的话，只需从创建箭头函数那里往上一行，看看那儿的this是什么，箭头函数里的this值和它一样。
constobj={
value:'abc',
createArrowFn:function(){
return()=>console.log(this);
}
};
constarrowFn=obj.createArrowFn();
arrowFn();//->{value:'abc',createArrowFn:ƒ}
看回第三个规则，当我们调用obj.createArrowFn()的时候，createArrowFn里的this是obj，因为这是方法调用。因此，obj会在arrowFn里绑定到this上。如果我们在全局作用域创建一个箭头函数，那么this值就会是window。
应用规则
让我们来看一个代码示例，并应用这些规则。尝试一下看能否弄清楚不同的函数调用下，this是什么。
确定应用了哪条规则
varobj={
value:'hi',
printThis:function(){
console.log(this);
}
};
varprint=obj.printThis;
obj.printThis();//->{value:"hi",printThis:ƒ}
print();//->Window{stop:ƒ,open:ƒ,alert:ƒ,...}
obj.printThis()属于第三条规则，方法调用。另一方面，print()属于第四条规则，纯粹的函数调用。对于print()来说，我们在调用的时候没有使用new、bind/call/apply或者点符号，所以它对应了规则四，this就是全局对象window。
当适用多个规则的时候
当适用多个规则的时候，使用列表里更高优先级的规则。
varobj1={
value:'hi',
print:function(){
console.log(this);
},
};
varobj2={value:17};
如果规则二和规则三同时适用，那么规则二占优。
obj1.print.call(obj2);//->{value:17}
如果规则一和规则三同时适用，那么规则一占优。
newobj1.print();//->{}
库
有些库有时候会故意将this值绑定到某些函数里。而通常会在函数里将最有用的值绑定到this上使用。举个例子，jQuery把this绑定到DOM元素上，在回调中触发一个事件。如果某个库出现一个不太符合上述规则的this值，那么请仔细阅读这个库的文档，它很有可能使用bind绑定了。
总结
以上所述是小编给大家介绍的JavaScript中的this简单规则，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！