Javascript:调用该对象中的对象方法

问题描述:

实现以下(不起作用)的最佳设计模式是什么?Javascript:调用该对象中的对象方法

var obj = (function() { 

    // code defining private variables and methods 

    var _obj = { 
    property: value, 
    method1: function() { 
     // do stuff 
    }, 
    method2: function() { 
     // use property 
     var prop = _obj.property; // obviously doesn't work 
     // call method1 
     obj.method1(); // "obj" not finished being defined yet! 
    } 
    }; 

    // obviously now I could do... 
    var prop = _obj.property; 

    return _obj; 

})(); 

// and I could now do... 
obj.method1(); 

,我认为应该工作是

var obj = (function() { 

    var property = value, 
     method1 = function() { 
     // do stuff 
     }, 
     method2 = function() { 
     // use property 
     var prop = property; 
     // call method1 
     method1(); 
     }, 
     _obj = { 
     property: property, 
     method1: method1, 
     method2: method2 
     }; 

    return _obj; 

})(); 

同样的变化,它是如何工作的对象意味着用new运营商创造出来的?在构造函数本身中,你可以编写。但是如果你想保持构造器很小,只定义那些可能在创建时定制的东西,然后在原型中定义其余部分呢? (这似乎是常见的模式。)原型中的属性/方法可以以任何方式进行交互?

var MyObj = function(name) { 
    this.name = name; 
}; 

var obj = new MyObj('Bob'); 

MyObj.prototype = { 
    called_often: function() { 
    // lots more code than just the following 
    return document.getElementById('someID').value; 
    }, 

    global_default: 'value', // can be changed, so need to pull value when run 

    does_stuff: function(value) { 
    var str = global_default + value, // can't access global_default on its own 
     input = MyObj.called_often(), // doesn't work; MyObj.prototype.called_often() DOES 
     name = this.name; // 'this' used in the prototype doesn't work 
          // even within a created object 
    return name + input + str; 
    } 
}; 

我敢肯定有更好的方法来实现我的结果,每当我遇到这个问题。此代码不是特定情况,只是说明了一般问题。所以你将无法为我遇到的特定情况提供替代方案。但也许你可以帮助我全面思考。

嘛,从你的第一个例子:

var _obj = { 
    property: value, 
    method1: function() { 
     // do stuff 
    }, 
    method2: function() { 
     // use property 
     var prop = this.property; 
     // call method1 
     this.method1(); 
    } 
    }; 

这是什么this值是。

现在,您不能做的是从对象字面量语法的其他地方引用“正在建设中”对象的属性。 (很难举一个例子,因为它在语法上不可能。)如果你想这样做,你确实需要一个或多个单独的赋值语句。

+0

我以为'this'只是指向对象,如果它是用new +构造函数创建的,或者如果您使用call/apply。但你是对的,它的工作原理!显然,我一直在困惑。另外,我原以为我试过了。但显然不是。 –

+0

在同一时间,JavaScript非常简单并且非常复杂:-)事实证明,当某个函数被调用时,this被绑定,那就是这个;然而,这条简单的规则导致了各种有趣的细节。 – Pointy

+0

嗨,波蒂。我有同样类型的问题。我正在使用'roundslider.js',并且我正在调用一个函数,在这里你写了一些东西。但对我来说这是错误的。 $(“#slider”)。roundSlider({function(event){ traceEvent() },' }); – locateganesh

猜猜看是什么?你正在做复杂的简单事情。 Pointy的答案很好,但原型方式更好的原因有几个。这就是为什么我正在描述(而不是纠正)最后一种方法。 Check this fiddle

var MyObj = function(name) { 
    this.name = name; 
}; 

MyObj.prototype = { 
    called_often: function() { 
    // lots more code than just the following 
    return 'VALUE'; //document.getElementById('someID').value; 
    }, 

    global_default: 'value', // can be changed, so need to pull value when run 

    does_stuff: function(value) { 
    var str = this.global_default + value, // can't access global_default on its own 
     input = this.called_often(), // doesn't work; MyObj.prototype.called_often() DOES 
     name = this.name; // 'this' used in the prototype doesn't work 
          // even within a created object 
    return name + input + str; 
    } 
}; 

var obj = new MyObj('Bob'); 
+0

谢谢你花时间把它扔进jsfiddle!正如我在上面的帖子中评论的那样,我显然对在这些情况下使用“this”的能力感到困惑。 (很显然,正如我在原型版本中评论的那样,“这不会起作用”)。我确信我以前曾试图在原型中使用它,并且出现错误。现在我将不得不重新访问这些代码,看看我实际上做了什么错误 - 因为它显然不是使用'this'! –

+0

这是一个很好的答案。 – Pointy

+1

@积分,谢谢! ;) –