【问题标题】:Javascript: Calling object methods within that objectJavascript:在该对象中调用对象方法
【发布时间】:2012-06-10 16:56:11
【问题描述】:

实现以下目标的最佳设计模式是什么(不起作用)?

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 运算符创建的对象?在构造函数本身中,您可以编写this.method()。但是如果你想保持构造函数很小,只定义那些可能在创建时定制的东西,然后在原型中定义其余的东西呢? (这似乎是常见的模式。)原型中的属性/方法可以以任何方式交互吗?

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;
  }
};

我确信每当我遇到这个问题时,都会有更好的方法来实现我的结果。此代码不是特定情况,只是说明一般问题。因此,对于我遇到的那些特定情况,您将无法为我提供替代方案。但也许你可以帮助我的整体思路。

【问题讨论】:

    标签: javascript oop methods


    【解决方案1】:

    好吧,从你的第一个例子开始:

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

    这就是 this 值的用途。

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

    【讨论】:

    • 我曾认为'this' 仅指向使用 new + 构造函数创建的对象,或者如果您使用调用/应用。但你是对的,它有效!显然我一直很困惑。另外,我以为我已经尝试过了。但显然不是。
    • JavaScript 既简单又复杂 :-) 事实证明,this 是在调用函数时绑定的,仅此而已;然而,这个简单的规则会导致各种有趣的细节。
    • 嗨,尖尖的。我有同样类型的问题。我正在使用roundslider.js,并且我正在调用您编写的函数。但这对我来说是错误的。 $("#slider").roundSlider({ change: function(event) { traceEvent() },});
    • @locateganesh 您可能应该发布您的代码并准确描述您自己的新问题中出了什么问题。
    【解决方案2】:

    你猜怎么着?你让简单的东西变得复杂。 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');
    

    【讨论】:

    • 感谢您花时间将其投入 jsfiddle!正如我在上面的帖子中评论的那样,我显然对在这些情况下使用“this”的能力感到困惑。 (显然,正如我在原型版本中评论的那样“这不起作用”。)我确定我之前尝试在原型中使用它并得到了一个错误。现在我将不得不重新审视这段代码,看看我到底做错了什么——因为它显然不是使用“this”!
    • 请注意,匿名函数内部的“this”指的是全局上下文。这与我们在本例中的“原型”对象中使用“this”这一事实没有太大关系。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-10-24
    • 2016-02-11
    • 1970-01-01
    • 2011-10-22
    • 1970-01-01
    • 1970-01-01
    • 2014-11-13
    相关资源
    最近更新 更多