淺談js中的三種繼承方式及其優缺點

第一種，prototype的方式：

 //父類function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子類function man(){ this.feature = ['beard','strong']; } man.prototype = new person(); var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

這種方式最為簡單，只需要讓子類的prototype屬性值賦值為被繼承的一個實例就行了，之後就可以直接使用被繼承類的方法了。

prototype 屬性是啥意思呢？ prototype 即為原型，每一個對象( 由function 定義出來) 都有一個默認的原型屬性，該屬性是個對像類型。

並且該默認屬性用來實現鏈的向上攀查。意思就是說，如果某個對象的屬性不存在，那麼將通過prototype屬性所屬對象來查找這個屬性。如果prototype 查找不到呢？

js會自動地找prototype的prototype屬性所屬對象來查找，這樣就通過prototype一直往上索引攀查，直到查找到了該屬性或者prototype最後為空(“undefined”);

例如上例中的one.view()方法，js會先在one實例中查找是否有view()方法，因為沒有，所以查找man.prototype屬性，而prototype的值為person的一個實例，

該實例有view()方法，於是調用成功。

第二種，apply的方式：

 //父類function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子類function man(){ // person.apply(this,new Array()); person.apply(this,[]); this.feature = ['beard','strong']; } var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

注意：如果apply參數為空，即沒有參數傳遞，則通過new Array() 、[] 來傳遞，null 無效。

第三種，call+prototype的方式：

 //父類function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子類function man(){ // person.apply(this,new Array()); person.call(this,[]); this.feature = ['beard','strong']; } man.prototype = new person(); var one = new man(); console.log(one.feature); //['beard','strong'] console.log(one.hair); //black console.log(one.eye); //black console.log(one.skin); //yellow console.log(one.view()); //black,black,yellow

call方式的實現機制卻要多一條man.prototype = new person(); 為啥呢？

那是因為call方法只實現了方法的替換而沒有作對象屬性的複制操作。

google Map API 的繼承就是使用這種方式。

上面總結了三種繼承方式的實現。但是每種方法都有其優缺點。

假如父類是這樣的：

 //父類function person(hair,eye,skin){ this.hair = hair; this.eye = eye; this.skin = skin; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } }

子類應該如何設計，使子類man在創建對象的同時傳遞參數到父類person，prototype的繼承方式就不適用了，

必須採用apply或者call的方式了：

 //apply方式//子類function man(hair,eye,skin){ person.apply(this,[hair,eye,skin]); this.feature = ['beard','strong']; } //call方式//子類function man(hair,eye,skin){ person.call(this,hair,eye,skin); this.feature = ['beard','strong']; }

但是用apply方法也還是有缺點的，為什麼？在js中，我們有個非常重要的運算符就是”instanceof”，該運算符用來比較某個對向是否為某種類型。

對於這個例子，one實例除了是man類型，也應該是person類型，但是apply方式繼承之後，one卻不屬於person類型，即(one instanceof person)的值為false。

經此種種，最好的繼承方式就是call+prototype方式了，之後你可以試一下(one instanceof BaseClass)的值是否為true。

第三種繼承方式也有缺陷：子類new對象時要傳一遍父類所需的參數，而且會重現父類中的屬性和方法，下面這種繼承方式才是完善的：

 function Person(name){ this.name = name; } Person.prototype.getName = function() { return this.name; } function Chinese(name, nation) { Person.call(this, name); this.nation = nation; } //繼承方法function inherit(subClass, superClass) { function F() {} F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass.constructor; } inherit(Chinese, Person); Chinese.prototype.getNation = function() { return this.nation; }; var p = new Person('shijun'); var c = new Chinese("liyatang", "China"); console.log(p); // Person {name: "shijun", getName: function} console.log(c); // Chinese {name: "liyatang", nation: "China", constructor: function, getNation: function, getName: function} console.log(p.constructor); // function Person(name){} console.log(c.constructor); // function Chinese(){} console.log(c instanceof Chinese); // true console.log(c instanceof Person); // true

以上這篇淺談js中的三種繼承方式及其優缺點就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。