面试题：JavaScript 闭包与this的复杂场景

假设有如下代码： ```javascript var obj = { name: 'example', func: function() { var self = this; return function() { console.log(self.name); }; } }; var newFunc = obj.func(); newFunc(); ``` 这里使用 `self` 变量保存 `this` 的引用，是为了确保在内部函数中正确访问 `obj` 的 `name` 属性。请解释为什么需要这么做，有没有其他方式可以达到同样的效果，比如使用箭头函数，若使用箭头函数，代码应如何修改，并且说明箭头函数的 `this` 绑定规则与普通函数有何不同。

21.1万热度

难度

编程语言JavaScript

为什么需要使用self变量保存this引用：
- 在JavaScript中，函数的this指向取决于函数的调用方式。在内部函数中，this的值在非严格模式下默认指向全局对象（浏览器中是window），在严格模式下是undefined。这里内部函数的调用环境和外部函数func的调用环境不同，直接在内部函数中使用this无法访问到obj的name属性，所以需要用self保存外部函数func中this（即obj）的引用，以确保在内部函数中能正确访问obj的name属性。
使用箭头函数达到同样效果的代码修改：

var obj = {
    name: 'example',
    func: function() {
        return () => {
            console.log(this.name);
        };
    }
};
var newFunc = obj.func();
newFunc();

箭头函数的this绑定规则与普通函数的不同：
- 普通函数：this的指向在函数被调用时确定，取决于函数的调用方式。常见情况有：
  - 作为对象的方法调用时，this指向该对象，如obj.func()，func函数中的this指向obj。
  - 独立调用时，在非严格模式下this指向全局对象（浏览器中是window），在严格模式下this是undefined。
  - 使用call、apply、bind方法调用时，this指向传入的第一个参数。
- 箭头函数：箭头函数没有自己的this，它的this继承自外层作用域（词法作用域）。箭头函数中的this在定义时就确定了，不会因为调用方式的改变而改变。比如上述代码中，箭头函数定义在func函数内部，它的this就继承自func函数的this，所以能正确访问obj的name属性。

星途面试题库

面试题：JavaScript 闭包与this的复杂场景

知识考点

面试题答案