javascript - Javascript 变量范围。如何从内部对象函数访问对象变量？

Question

我想知道如何使用 javascript 对象中的函数访问“name”e 变量，如下所示：

function myObj() {
    this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function() {
            alert(this.vars.name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName();

我在这里想念什么？

如果我传递对自身的引用，我可以获得名称 var，例如：

function myObj() {
    this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function(name) {
            alert(name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName(obj.vars.name);

但这似乎有点多余......想法？

Answer 1

问题是在您的函数this.functions.sayName中，this关键字是指this.functions而不是当前对象¹。

这是该问题的修复：

function myObj() {
    var vars = this.vars = {
        name: 'bob',
        age: '42'
    }
    this.functions = {
        sayName: function() {
            alert(vars.name);
        }
    }
}

var obj = new myObj();
obj.functions.sayName();

这会在其中创建一个局部变量myObj，您可以从任何内部范围访问该变量。它还将该变量作为任何实例化类的属性向外界公开myObj，这意味着您仍然可以执行类似的操作

obj.vars.name = 'test';

它仍然会改变对象的内部状态。这可能是您当前设置的最佳解决方案。

¹this JavaScript 中关键字的行为很有趣。我推荐Mozilla Developer Network 上的优秀文章。

Answer 2

你可以这样做：

var thisObj = this;
this.functions = {
    sayName: function() {
        alert(thisObj.vars.name);
    }
}

不确定这是否是最好的解决方案，但它确实有效。如果您在函数内部，Javascript this总是指内部范围。

Answer 3

只需删除this：

function myObj() {
    var vars = {
        name: 'bob',
        age: '42'
    };
    this.functions = {
        sayName: function() {
            alert(vars.name);
        }
    };
};

var obj = new myObj();
obj.functions.sayName();​

现场演示