function(){} 和 () =>{} 中this指向的问题
总览
普通函数中this
this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj
在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window (约定俗成)
在严格模式下,没有直接调用者的函数中的this是 undefined
使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象
注意:普通函数中,内层函数不能从外层函数中继承this的值,在内层函数中,this会是window或者undefined,临时变量self用来将外部的this值导入到内部函数中(另外的方式是在内部函数执行.bind(this))
es6箭头函数
箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。
当在函数中使用一个变量的时候,首先在本函数内部查找该变量,如果找不到则找其父级函数,最后直到window,全局变量默认挂载在window对象下
举例
1、普通函数中内层函数
function fun(){
var self = this;
setTimeout(function(){
console.log(this);// window
console.log(self);// {id: 001}
console.log('id: ', self.id);// id:001
},500);
}
fun.call({id:001});
2、普通函数中内层函数.bind(this)
function fun(){
var self = this;
setTimeout(function(){
console.log(this); //{id: 1}
console.log(self); //{id: 1}
console.log('id: ', self.id); //id: 1
}.bind(this),500);
}
fun.call({id:001});
3、
function Fun(){
console.log("args:fun:",arguments); //args:[2,2,3,4]
setTimeout(() =>{
console.log("args:()=>{}:",arguments); //args:[2,2,3,4]
},500);
setTimeout(function(){
console.log("args:function(){}",arguments); //
},500);
}
new Fun(2,2,3,4)
4、
var obj = {
say: function () {
setTimeout(() => {
console.log(this)
});
}
}
obj.say(); // obj
5、
var obj = {
say: function () {
var f1 = () => {
console.log(this); // obj
setTimeout(() => {
console.log(this); // obj
})
}
f1();
}
}
obj.say()
6、
var obj = {
say: function () {
var f1 = function () {
console.log(this); // window, f1调用时,没有直接调用者,也就是没有宿主对象,默认是window
setTimeout(() => {
console.log(this); // window
})
};
var f2 = ()=>{
console.log(this); //say f2调用时,this默认指向所处的对象(宿主对象),不是执行对象
};
f1();
f2();
}
}
obj.say()
7、严格模式
var obj = {
say: function () {
'use strict';
var f1 = function () {
console.log(this); // undefined
setTimeout(() => {
console.log(this); // undefined
})
};
f1();
}
}
obj.say()
8、总结
var a = 'window';
var id = '1';
var obj2 = {
id: '2',
a: 'obj2'
}
var obj = {
a: 'obj',
id: '3',
say1: () => {
console.log(this.a);
console.log(this.id);
},
say2: function() {
var f1 = () => {
console.log(this.a);
console.log(this.id);
}
f1();
},
say3: () => {
var f1 = () => {
console.log(this.a);
console.log(this.id);
}
f1();
}
}
console.log('================================');
obj.say1.call(obj2) //window 1(箭头函数this指向不可被改变)
console.log('================================');
obj.say2.call(obj2)//obj2 2
console.log('================================');
obj.say3.call(obj2)//window 1
console.log('================================');
obj.say1()//window 1
console.log('================================');
obj.say2()//obj 3
console.log('================================');
obj.say3()//window 1
console.log('================================');
参考文档:CSDN文章:function(){} 和 () =>{} 中this指向的问题;
扩展阅读:CSDN文章:使用(function() {}).call(this);包裹代码有什么好处,什么时候应该这样做?