普通函数中的this指向的是调用它的对象,如果没有直接调用对象,会指向undefined或者window,一般都会指向window,在严格模式下才会指向undefined。
箭头函数没有自己的this值,箭头函数中所使用的this都是来自函数作用域链,它的取值遵循普通普通变量一样的规则,在函数作用域链中一层一层往上找。
-
var x=1; var a={ x:2, say:function(){ console.log(this.x) } } a.say(); console.log为2 a为调用函数,所以指向a用的x
-
var aa=11; function test1(){ this.aa=22; let b=function(){ console.log(this.aa); }; b(); } var text1=new test1(); 输出的是11;因为没有实际的指向对象,所以指向window
-
var y=1; var b={ y:2, say:()=>{ console.log(this.y) } } b.say(); console.log为1 箭头函数内部是没有this的,也就是说,箭头函数里面的this会继承自外部的this,箭头函数指向第一个父级,如果第一个没有回逐步向上查找
var circle = {
radius: 10,
outerDiameter() {
console.log("outerDiameter :")
console.log(this==window)
var ad=function(){
console.log("ad :")
console.log(this==window)
};
var innerDiameter = function() {
console.log("innerDiameter:")
console.log(this==window);
};
innerDiameter();
ad();
}
};
circle.outerDiameter();
outerDiameter:为false 是因为circle调用了他,所以this指向circle,
innerDiameter 和ad指向window是因为他们嵌套在函数里面,没有人调用他们,所以指向window,严格模式下为undefined
-
var circle = { radius: 10, outerDiameter() { var _this=this; var ad=function(){ console.log("ad :") console.log(_this) console.log(_this==window) }; ad(); } }; circle.outerDiameter();
我们通常加上var _this=this;来解决问题,让this向下渗透一级````
使用.bind(this)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter = innerDiameter.bind(this);
innerDiameter();
}
};
circle.outerDiameter();
打印20
也可以使用bind来绑定this`
使用箭头函数
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = () => {
console.log(2 * this.radius);
};
innerDiameter();
}
};
circle.outerDiameter(); // 打印20
使用箭头函数直接问题就解决了
部分参考:
https://blog.csdn.net/u013003052/article/details/87894194
https://www.cnblogs.com/xxcn/p/11056495.html
https://blog.csdn.net/cataclysm2012/article/details/80350403