关键词：箭头函数，作用域
问题
在全局作用域下，箭头函数作为对象方法时，this会指向window：
var name = "Bob";
obj = {
name: "John",
sayHello: () => {
console.log( this.name);
},
};
obj.sayHello(); // Bob，而不是John
前提
要解决这个问题，要先知晓两个前提。
- 箭头函数的this指向箭头函数本身所在的作用域的this
var fruits= ["watermelon", "mango"];
obj = {
likes: {
fruits: ["apple", "banana"],
getLikes() {
console.log(this); // this在这里指likes
let getFruits = () => {
// 箭头函数在getLikes函数体内，
// 因此this在这里也是likes
console.log(this.fruits);
};
getFruits();
},
},
};
obj.likes.getLikes(); // ["apple", "banana"]
- 函数作用域链在声明函数时就已经确定了，如下所示：
var a = 10;
function foo() {
console.log(a);
}
function bar() {
var a = 20;
foo();
}
bar(); // 10， 而不是20
解释
上面的前提一就可以解释文章开头的问题了(见代码注释)。因此箭头函数一般不作为方法使用。
var name = "Bob";
obj = {
name: "John",
sayHello: () => {
// 箭头函数声明时在全局作用域，
// 因此this代表window(严格模式下为undefined)【见前提1】
console.log(this.name);
},
};
obj.sayHello(); // Bob，而不是John
// 在obj外调用sayHello
function foo() {
obj.sayHello();
}
foo(); // 也是Bob，而不是John【前提2】
