Javascript使用props擴展類？

Question

我的課程定義為：

function MyClass() {

}

MyClass.prototype = {
       init: function() {
                 alert('My parent class!');
       },
       method1: function() {},
       method2: function() {}
};

和屬性對象：

{
     init: function() {
               MySubClass.superclass.init.apply(this, arguments);
               alert('test!');
     },

     test: function() {
               alert();
     }
}

我需要的函數將擴展基類（MyClass）與props（對象）並返回新的擴展子類（到MySubClass）：

MySubclass = extend(MyClass, {
     init: function() {
               MySubClass.superclass.init.apply(this, arguments);
               alert('test!');
     },

     test: function() {
               alert();
     }
});

必須用新的構造函數（來自init）替換構造函數。

我需要一個正確的方法。

為什么它不能正常工作？

extend: function(bc, o) {
        // result class (apply only first constructor)
        var cls = function() {};
        cls.prototype = bc.prototype;

        for (var k in o)
            cls.prototype[k] = o[k];

        cls.superclass = bc.prototype;

        return cls;
    }

Answer 1

你的extend函數必須看起來像這樣 - 現在這比你應該如何實現它簡單得多但它應該工作：

var extend = function(Super, props) {
   var sinstance = new Super()
   var sclass = props.constructor || sinstance.constructor;
   sclass.prototype.super = sinstance;
   sclass.prototype.constructor = Super;

   //use underscore extend prototypes cause im too lazy to type it out
   _.extend(sclass.prototype, sinstance, props);
   return sclass;
}

調用subclass.super.call(this, props...)允許您訪問重寫的超級方法。

剛剛測試過，如果頁面上有下划線js，則此方法有效：

function MyClass() {

}
MyClass.prototype = {
       init: function() {
                 alert('My parent class!');
       },
       method1: function() {},
       method2: function() {}
};

MySubclass = extend(MyClass, {
     init: function() {
               this.super.init.apply(this, arguments);
               alert('test!');
     },

     test: function() {
               alert();
     }
});

var test = new MySubclass();
test.init("yo"); //alerts My parent class

對於您的更新，您還可以執行以下操作：

MySubclass2 = extend(MyClass, {
     constructor: function() {
        this.init();
     },

     init: function() {
               this.super.init.apply(this, arguments);
               alert('test!');
     },

     test: function() {
               alert();
     }
});

var test2 = new MySubclass2();//alerts My parent class

Answer 2

如果你是開放的使用庫，從使用_.extend underscore.js 。 否則，將此代碼添加到您的代碼庫：

extend = function(obj) {
    each(slice.call(arguments, 1), function(source) {
      if (source) {
        for (var prop in source) {
          obj[prop] = source[prop];
        }
      }
    });
    return obj;
  };

Answer 3

我看到你用jQuery標記 - 如果你確實使用jQuery，你可能會對使用$ .extend感興趣 。

Answer 4

看看這個： https ： //github.com/haroldiedema/joii

var BaseClass = function() 
{
    this.some_var = "foobar";

    /**
     * @return string
     */
    this.someMethod = function() {
        return this.some_var;
    }
};

var MyClass = new Class({ extends: BaseClass }, function()
{
    /**
     * @param string value
     */
    this.__construct = function(value)
    {
        this.some_var = value;
    }

})

用法：

var obj = new MyClass("Hello World!");
console.log( obj.someMethod() ); // Hello World!