今天来总结一下this在不同情况下的this的指向问题:
var name = 'window';
var bar = { name: 'bar' };
var foo = {
name: 'foo',
say: function () {
console.log(this.name);
},
say2: () => {
console.log(this.name);
},
say3: function () {
return function () {
console.log(this.name);
};
},
say4: function () {
return () => {
console.log(this.name);
};
}
};
普通函数
测试1:
foo.say();
foo.say.call(bar);
foo
bar
- "."号使用函数的时候this指向调用函数的对象,即点号之前的内容,故输出foo。
- 普通调用可以用call来改变函数this,故bar。
箭头函数
测试2:
foo.say2();
foo.say2.call(bar);
window(js执行环境)/undefined(node执行环境) //以下未说明的皆是两种输出
window
- 箭头函数的this取决于其创建时所在的执行环境的this,该箭头函数在全局创建,所以指向全局,输出window。
- 箭头函数的this不会改变,所以call无法改变其this指向,所以还输出window。
回调函数
测试3:
foo.say3()();
foo.say3().call(bar);
foo.say3.call(bar)();
window
bar
window
- 回调函数是全局创建的,不是say3创建的,因此它的this指向全局,而与产生它的say3方法无关。
- call可以改变回调函数的this。
- 改变的是say3的this,回调函数的this没有受到影响。
箭头函数作为回调函数
测试4:
foo.say4()();
foo.say4().call(foo);
foo.say4.call(bar)();
foo
foo
bar
- foo.say4()的this是foo,foo.say()()是箭头函数,所以与执行环境foo.say4()的this一样,也是foo。
- call的使用对象是箭头函数foo.say()(),所以无效,还是foo。
- call的使用对象是箭头函数foo.say4(),有效,所以输出bar。
其中箭头函数的this详见,https://blog.csdn.net/qq_43198793/article/details/109355661
以上就是this指向的详细总结,欢迎指正。