javascript - 访问对象内部的“this”

Question

我在编写的大量代码中遇到了一些麻烦，我将其归结为：

var Thing = function(argument){
    this.property = argument;
    this.obj = {
        func: function(){
            return this;
        }
    };
    this.func = function(){
        return this;
    };
};

我需要访问this.property里面obj.func()。然而， 的价值this并不是我所期望的：

> var thing = new Thing("value")
> thing.func()
Thing {property: "value", obj: Object, func: function}
> thing.obj.func()
Object {func: function}

当我实例化一个名为“thing”的实例并调用时thing.func()，它应该this保存 的当前实例。Thing但是当我调用时thing.obj.func()，它的值是thing.obj。这是怎么回事？我如何访问该值？

Answer 1

在构造函数中声明一个局部变量，并为其赋值this：

var Thing = function(argument){
    var theThing = this;

然后，您可以使用“theThing”来引用这些函数中构造的对象。

在您现有的代码中，当您调用 时thing.obj.func()，函数中的值this确实是this.obj。这是因为 的值this是根据函数调用的情况确定的。在这种情况下，对函数（“func”）的引用是通过在“obj”对象上遍历其属性名称来获得的。因此，“obj”对象就是this引用的对象。

Answer 2

var thing = new Thing('value')
thing.obj.func() // this inside func will be the object before .func, which is thing.obj

一种解决方案是将函数绑定到您的对象：

var Thing = function(argument){
    this.property = argument;
    this.obj = {
        func: function(){
            return this;
        }.bind(this);    // bind it to the current object
    };
    this.func = function(){
        return this;
    };
};

或者，您可以使用带有私有副本的闭包this：

var Thing = function(argument){
    var that = this;
    this.property = argument;
    this.obj = {
        func: function(){
            return that;
        }
    };
    this.func = function(){
        return this;
    };
};

Answer 3

这就是thisJavascript 中上下文的工作方式。您需要存储对 Thing 的中间引用：

var Thing = function(argument){
    var self = this;
    this.property = argument;
    this.obj = {
        func: function(){
            return self;
        }
    };
    this.func = function(){
        return self;
    };
};

Answer 4

this指的是默认拥有该函数的对象，在这种情况下是obj. 这是一种解决方法：

thing.obj.func.call(thing);