jquery類繼承

Question

var A=function(){ 
}; 

$.extend(A.prototype, { 
    init:function(){ 
     alert('A init'); 
    } 
}); 
var B=function(){ 

}; 

$.extend(B.prototype,A.prototype,{ 
    init:function(){ 
     alert('B init'); 
    } 
}); 
var p=new A(); 
p.init(); 
var x=new B(); 
x.init(); 

以上是在jQuery中創建類和繼承的最好方法嗎？在B的init中，我如何調用父進程的init（類似於OO語言中的super.init（））？

Answer 1

對於面向對象，最好看看jQuery之外。 jQuery基於選擇器返回的集合。

如果您需要課程，一些選擇是Base2,Joose和JS.Class。

Answer 2

John Resig 在這裏創建了一個用於簡單繼承的代碼片段。 http://ejohn.org/blog/simple-javascript-inheritance/

他超類存儲到_Super變量，所以你可以把它像這樣

this._super(); 

你可以參考一下他的代碼片段獲得了什麼，他 另一個有用的後一個更好的主意是： http://alexsexton.com/?p=51

Answer 3

如何調用父的方法：

var B=function(){ 
    A.call(this); 
}; 

$.extend(B.prototype,A.prototype,{ 
     init:function(){ 
       A.prototype.init.call(this); 
       alert('B init'); 
     } 
}); 

Answer 4

如果你不想依賴任何其他的庫，你可以這樣做：

function A() {} 
A.prototype.foo = function() {}; 

function B() { 
    A.call(this); 
    //Or, if there are arguments that need to be passed to A(), 
    //this might be preferable: 
    //A.apply(this, arguments); 
} 

B.prototype = new A(); 

//Or, if the browser supports ECMAScript 5 and/or you have a shim for Object.create, 
//it would be better to do this: 
B.prototype = Object.create(A.prototype); 

$.extend(B.prototype, { 
    //set the constructor property back to B, otherwise it would be set to A 
    constructor: B, 
    bar: function() {} 
}); 

確保在構造函數中，而不是在原型上定義的任何屬性，如：

function A() { 
    this.baz = null; 
} 

這避免了無意間共享的原型屬性。

有一些圖書館，使原型繼承簡單：

• https://github.com/mbrowne/simpleoo.js （我的圖書館;對一些我在這裏提到的概念，它的文檔闡述）
• https://github.com/Gozala/selfish
• https://github.com/Raynos/pd

備註：

• 任何時候原型被替換，包括擴展名， 的最佳做法是將其構造函數屬性設置回正確的構造函數。這就是爲什麼我們設置B.prototype.constructor到B. 如果你更換A.prototype你應該做這樣的：

...

A.prototype = { 
    constructor: A, 
    foo: function() {} 
    //other methods... 
} 

• B.prototype = Object.create(A.prototype)優於B.prototype = new A()因爲如果您忘記從B（）的構造函數中調用A（），它可以幫助您及早發現它;它也允許A（）具有所需的參數。您需要使用舊版瀏覽器的墊片;最簡單的墊片（儘管它不支持完整的Object.create規範）位於此頁面的底部：http://javascript.crockford.com/prototypal.html。

Answer 5

我使用相同的模式，我喜歡它的簡潔。

關於缺少「超級」關鍵字，這不是一個真正的問題。感謝Function.prototype.call（）運算符，您可以在任何對象的上下文中調用任何函數。所以序列來調用B.prototype.init A.prototype.init（）（）是：

A.prototype.init.call(this, some parameters ...);

另外，不要忘記，你可以調用構造函數的B構造是這樣的：

B = function(key, name) { 
    A.call(this, key); 
    this.name = name; 
}; 

一個實驗JS編碼器會知道發生了什麼。

所以得出結論：不完美，但足夠接近。

Answer 6

我正在尋找類似的東西。答案不希罕，真的很吸引我，所以最後它有裂紋，自己...

http://jsfiddle.net/tn9upue0/1/

示例類

• $。動物（）創建一個通用的動物，默認4條腿， 可以通過它的選項中的名稱，並可以描述自己。 $ .Dog（）是Animal的一個子類，它可以「woof」，並可能知道一些技巧。 $ .Cat（）是「喵」的動物的一個子類。 $ .Bird（）是 動物的一個子類，它有2條腿，併發出「鳴叫」。

類實現

• 每個動物子類創建$。動物的一個實例稱爲父， 以後它可以用來調用父類的方法。當調用父親方法 時，上下文可能很重要。當它是，應該通過$ .proxy（）調用方法 作爲上下文傳遞它。

實施例輸出

我的名字是未知的。我是一條有4條腿的動物。

我的名字是羅孚。我是一條有4條腿的動物。我說「woof」。我可以坐下，留下，翻身。

我叫Mittens。我是一條有4條腿的動物。我說「喵」。

我的名字是未知的。我是一隻有兩條腿的動物。我說「鳴叫」。

示例代碼

$.Animal = function (options) { 
    return { 
     options: options || {}, 

     _getName: function() { 
      return this.options.name || 'unknown'; 
     }, 

     _getLegs: function() { 
      return 4; 
     }, 

     describe: function() { 
      return 'My name is ' + this._getName() + '. I am an animal with ' + this._getLegs() + ' legs.'; 
     } 
    } 
}; 

$.Dog = function (options) { 
    var parent = $.Animal(options); 
    return $.extend({}, parent, { 
     describe: function() { 
      var s = $.proxy(parent.describe, this)() + ' I say "woof".'; 
      if (this.options.tricks) { 
       s += ' I can ' + this.options.tricks + '.'; 
      } 
      return s; 
     } 
    }); 
}; 

$.Cat = function (options) { 
    var parent = $.Animal(options); 
    return $.extend({}, parent, { 
     describe: function() { 
      return $.proxy(parent.describe, this)() + ' I say "meow".'; 
     } 
    }); 
}; 

$.Bird = function (options) { 
    var parent = $.Animal(options); 
    return $.extend({}, parent, { 
     _getLegs: function() { 
      return 2; 
     }, 

     describe: function() { 
      return $.proxy(parent.describe, this)() + ' I say "tweet".'; 
     } 
    }); 
}; 

var animal = $.Animal(), 
    rover = $.Dog({name: 'Rover', tricks: 'sit, stay, and roll over'}), 
    mittens = $.Cat({name: 'Mittens'}), 
    bird = $.Bird(); 
$('#out').html(
    animal.describe() + '<br>' + 
     rover.describe() + '<br>' + 
     mittens.describe() + '<br>' + 
     bird.describe() 
);