【问题标题】:Javascript add method to objectJavascript向对象添加方法
【发布时间】:2012-11-23 00:40:37
【问题描述】:

假设我有一个Foo 对象

如何通过添加bar() 方法来扩展此对象,并确保Foo 的未来实例具有此方法?

【问题讨论】:

    标签: javascript


    【解决方案1】:

    你需要将它添加到 Foo 的原型中:

    function Foo(){}
    Foo.prototype.bar = function(){}
    var x = new Foo()
    x.bar()
    

    【讨论】:

      【解决方案2】:

      这一切都取决于您如何创建Foo,以及您打算如何使用.bar()

      首先,您是否为您的对象使用了构造函数?

      var myFoo = new Foo();
      

      如果是这样,那么您可以使用.bar 扩展Foo 函数的prototype 属性,如下所示:

      function Foo () { /*...*/ }
      Foo.prototype.bar = function () { /*...*/ };
      
      var myFoo = new Foo();
      myFoo.bar();
      

      以这种方式,Foo 的每个实例现在都可以访问.barSAME 实例。
      也就是说:.bar 将拥有对 this 的完全访问权限,但在构造函数中对 variables绝对没有访问权限

      function Foo () { var secret = 38; this.name = "Bob"; }
      Foo.prototype.bar = function () { console.log(secret); };
      Foo.prototype.otherFunc = function () { console.log(this.name); };
      
      var myFoo = new Foo();
      myFoo.otherFunc(); // "Bob";
      myFoo.bar(); // error -- `secret` is undefined...
                   // ...or a value of `secret` in a higher/global scope
      

      另外,您可以定义一个函数来返回任何对象(不是this),并将.bar 创建为该对象的属性:

      function giveMeObj () {
          var private = 42,
              privateBar = function () { console.log(private); },
              public_interface = {
                  bar : privateBar
              };
      
          return public_interface;
      }
      
      var myObj = giveMeObj();
      myObj.bar(); // 42
      

      以这种方式,您有一个创建新对象的函数。
      每个对象都有一个为它们创建的.bar 函数。
      每个.bar 函数都可以通过所谓的闭包访问函数中返回其特定对象的“私有”变量。
      每个.bar 仍然可以访问this,因为this,当您调用myObj.bar(); 之类的函数时,将始终引用myObjpublic_interface,在我的示例中为Foo)。

      这种格式的缺点是,如果您要创建数百万个这样的对象,那也是数百万个 .bar 的副本,这会占用内存。

      您也可以在构造函数内部执行此操作,在构造函数内部设置 this.bar = function () {}; ——同样,优点是对构造函数中的私有变量的闭包访问,缺点是增加内存需求。

      所以第一个问题是:
      您是否希望您的方法能够读取/修改无法通过对象本身(通过thismyObj.X)访问的“私有”数据?

      第二个问题是: 你是否制作了足够多的这些物品,以至于记忆将成为一个大问题,如果你给它们每个人自己的个人功能,而不是给他们一个分享?

      例如,如果您在高端 3D 游戏中为每个三角形和每个纹理赋予其自己的 .draw 函数,那可能有点矫枉过正,而且在如此精细的系统中可能会影响帧率...

      但是,如果您希望每页创建 5 个滚动条,并且您希望每个滚动条都能够设置其位置并跟踪它是否被拖动,而无需让其他所有应用程序都有权读取/设置同样的事情,那么假设它可能已经有 10,000 行(或更多),那么真的没有理由害怕 5 个额外的函数会杀死你的应用程序。

      【讨论】:

        【解决方案3】:

        有很多方法可以在 JavaScript 中创建像这样的可重用对象。 Mozilla 在这里有一个很好的介绍:

        以下内容适用于您的示例:

        function Foo(){
            this.bar = function (){
                alert("Hello World!");
            }
        }
        
        myFoo = new Foo();
        myFoo.bar(); // Hello World​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
        

        【讨论】:

          【解决方案4】:

          你可以把 bar 变成一个函数,让它变成一个方法。

          Foo.bar = function(passvariable){  };
          

          作为一个属性,它只会被分配一个字符串、数据类型或布尔值

          Foo.bar = "a place";
          

          【讨论】:

            猜你喜欢
            • 2023-03-10
            • 1970-01-01
            • 2013-09-23
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2010-12-25
            • 1970-01-01
            相关资源
            最近更新 更多