面试题：JavaScript 中箭头函数与普通函数在 this 指向的区别

Question

请阐述 JavaScript 箭头函数与普通函数在 this 指向方面有何不同，并通过代码示例说明。

Answer 1

1. this指向不同点

• 普通函数：this的指向在函数被调用时确定，取决于函数的调用方式。如果是作为对象的方法调用，this指向该对象；如果独立调用，在非严格模式下，this指向全局对象（浏览器中是window），在严格模式下，this指向undefined。
• 箭头函数：箭头函数没有自己的this，它的this继承自外层作用域的this。也就是说，箭头函数的this在定义时就已经确定，不会随着调用方式的改变而改变。

2. 代码示例

// 普通函数示例
function normalFunction() {
    console.log(this);
}
// 独立调用，非严格模式下，this指向全局对象（浏览器中是window）
normalFunction(); 

const obj = {
    value: 10,
    method: function() {
        console.log(this.value);
    }
};
// 作为对象的方法调用，this指向obj
obj.method(); 

// 箭头函数示例
const arrowFunction = () => {
    console.log(this);
};
// 这里箭头函数的this继承自外层作用域，在全局作用域下定义，所以指向全局对象（浏览器中是window）
arrowFunction(); 

const arrowObj = {
    value: 20,
    arrowMethod: () => {
        console.log(this.value);
    }
};
// 虽然arrowMethod作为arrowObj的属性，但箭头函数的this不会指向arrowObj，而是继承自外层作用域，所以这里打印的是全局作用域下的value（如果有定义的话，这里没有定义则是undefined）
arrowObj.arrowMethod(); 

// 进一步示例说明箭头函数this继承
function outerFunction() {
    this.value = 30;
    const innerArrowFunction = () => {
        console.log(this.value);
    };
    innerArrowFunction();
}
// 调用outerFunction，此时outerFunction的this指向调用它的对象（这里没有显式指定，在非严格模式下指向全局对象）
outerFunction();