先看这个代码:
var obj = {
name: 'ss',
print: function () {
return function () {
console.log(this.name);
}
}
};
obj.print()();//显然没有结果,this作用域的问题,指向Window
这样就可以运行
var obj = {
name: 'ss',
print: function () {
var self = this;
return function () {
console.log(self.name);
}
}
};
obj.print()();// 输出'ss'. 把obj的作用域 this 赋给self, self指向 obj.
如果这样写:
var obj = {
name: 'ss',
print: () => {
return function () {
console.log(this.name);
}
}
};
obj.print()();//这样也是然并卵,this 指向的是Window.
//这里需要主意的是,虽然箭头函数在obj里面声明,但是箭头函数是没有this作用域的,所以最终还是指向Window.
如果这样写
var obj = {
name: 'ss',
print: function() {
return () => {
console.log(this.name);
}
}
};
obj.print()(); // 输出'ss', 这次this 又指向了obj.
总结:=>本身是没有作用域的,其作用域随上层的 function, 而上层的function在obj里面声明,所以function的作用域在obj里面,随之箭头函数的作用域也在obj里面。
所以当你这样写的时候又不行了。
var obj = {
name: 'ss',
print: () => {
return () => {
console.log(this.name);
}
}
};
obj.print()(); //没有输出,显然两个箭头函数的作用域一路指向Window.
根据这些例子你可以看出=>的作用。以前在函数嵌套的时候需要多些一个
var self = this;
self. fn = ...
self. variable = ...
也有人喜欢这么写
var _this = this;
所以你用箭头函数的话就可以避免多些这些语句。