如何在深度嵌套函数中访问JavaScript对象构造函数参数？

兄弟，你这个问题根本不用放弃构造函数啦！核心问题是嵌套函数fn2里的this指向变了，我给你掰扯清楚原因，再给你几个靠谱的解决办法：

为什么第三个console.log输出false？ #

在JavaScript里，this的指向是由调用方式决定的：

• 构造函数Obj内部，this指向新创建的实例（也就是Obj2），所以第一个console.log输出true；
• 当你调用Obj2.fn()时，fn里的this还是指向Obj2，所以第二个console.log也输出true；
• 但嵌套的fn2是普通函数调用（直接写fn2()），这时候this默认指向全局对象（非严格模式下是window，严格模式下是undefined），不再指向Obj的实例，所以this.a不等于构造函数的参数a，输出false。

解决办法 #

方法1：提前保存外层的this到变量 #

把构造函数/外层函数的this存到一个变量（比如self）里，嵌套函数直接用这个变量访问实例：

function Obj(a, b){
    this.a = a;
    this.b = b;
    console.log(this.a == a); // true
    // 保存当前实例的this
    var self = this;
    this.fn = function() {
        console.log(this.a == a); // true
        function fn2() {
            // 用self代替this，访问实例的a
            console.log(self.a == a); // true
            // ...
        }
        fn2();
    };
}
var Obj2 = new Obj(0, 1);
Obj2.fn();

方法2：使用箭头函数（ES6+） #

箭头函数的this会继承外层作用域的this，所以把fn2改成箭头函数，它的this就和外层fn里的this一样，指向Obj实例：

function Obj(a, b){
    this.a = a;
    this.b = b;
    console.log(this.a == a); // true
    this.fn = function() {
        console.log(this.a == a); // true
        // 箭头函数继承外层的this
        const fn2 = () => {
            console.log(this.a == a); // true
            // ...
        }
        fn2();
    };
}
var Obj2 = new Obj(0, 1);
Obj2.fn();

方法3：用bind绑定this #

调用fn2时，通过bind把外层的this绑定到fn2上：

function Obj(a, b){
    this.a = a;
    this.b = b;
    console.log(this.a == a); // true
    this.fn = function() {
        console.log(this.a == a); // true
        function fn2() {
            console.log(this.a == a); // true
            // ...
        }
        // 绑定当前this到fn2后再调用
        fn2.bind(this)();
    };
}
var Obj2 = new Obj(0, 1);
Obj2.fn();

这几种方法都能完美解决问题，完全不用放弃构造函数，选你觉得顺手的方式就行～

内容的提问来源于stack exchange，提问作者Youdao