每日一题（十五）this指向 const num = { a:10, add(){ return this.a + 2； }

题目描述：写出执行结果并解释原因

const num = {
    a:10,
    add(){
        return this.a + 2;
    },
    reduce:()=>this.a - 2
};

console.log(num.add());
console.log(num.reduce());

答案：

12
NaN

知识点:

箭头函数有几个使用注意点。

• （1）函数体内的 this 对象，就是 定义 时所在的对象，而不是使用时所在的对象。
• （2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
• （3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• （4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this 对象的指向是可变的，但是在箭头函数中，它是固定的。

解析：

• 注意，add 时普通函数，而 reduce 是箭头函数。对于箭头函数，'this' 关键字指向是他的所在上下文（定义时的位置）的环境，于普通函数不同
• 这意味着当我们调用 reduce 时，它不是指向 num 对象，而是指其定义时的环境（window）。没有值 a 属性，所以返回 undefined。undefined - 2 返回 NaN

延申：

let m = num.add;
console.log(m());


//NaN

num.add 赋值给 m 调用的时候直接再全局作用域下 m() this 指向window 

对于箭头函数，我们再延申：

var foo = {
    bar:function(){
        return this.baz;
    },
    baz:1
}
console.log(foo.bar());

//答案： 1

//对比：
var foo = {
    bar:()=>{
        return this.baz;
    },
    baz:1
}
console.log(foo.bar());

//答案： undefined

注意 this 的四种指向方式：

• 通过对象调用，指向调用对象
• 在全局作用于下直接函数执行，指向全局对象（浏览器为window）
• 通过 new 关键字调用，指向新创建的实例对象
• 通过 call , apply , bind 方式强绑定，指向绑定的对象

以及上面箭头函数中的 this 指向定义时当前箭头函数最近的非箭头函数执行上下文

理解 定义时 ：词法作用域中，在执行函数时，循着作用域链找相应的变量时，都是在定义函数的地方找（作用域链也是从定义的时候连起来的）