js實現繼承的幾種方法

pkhope 發布于2019-08-26 11:00 / 1476人閱讀

摘要：實現繼承的方法借用構造函數解決原型中包含引用類型所帶來的問題的過程中，使用借用構造函數偽造對象或經典繼承來實現繼承。

繼承

在ECMAScript中繼承主要是依靠原型鏈來實現的。

實現繼承的方法

利用原型讓一個引用類型繼承另一個引用類型的屬性和方法

什么是原型鏈

先要了解構造函數、原型、和實例的關系：

每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，實例都包含一個指向原型對象的內部指針。

實現原型鏈

假如原型對象等于另一個類型的實例，此時該原型對象將包含指向另一個原型的指針，相應的另一個原型中也包含著一個指針指向另一個構造函數的指針。這樣層層遞進，就構成了實例與原型之間的鏈條。這就是原型鏈的基本概念。

判斷原型和實例的關系
可以通過兩種方式來確定原型和實例之間關系。

使用instanceof操作符，只要用這個操作符來測試實例和原型鏈中出現的構造函數，結果就一定返回true。

alert(instance instanceof Object); //true

使用isprototypeOf()方法，同樣只要是原型鏈中出現過得原型，都可以說是原型鏈所派生的實例的原型。isportotypeOf()也會返回true

alert(Object.prototype.isPrototypeOf(instance)); //true

所有引用類型都默認繼承了Object

原型鏈存在的問題

在通過原型來實現繼承時，原型實際上會變成另一個類型的實例。原先的實例屬性就變成了現在的原型屬性了。

function SuperType(){
    this.color=["red","blue","green"]
}

function SubType(){
}
SubType.prototype = new SuperType();//繼承了SuperType();

var instance1 = new SubType();
instance1.color.push("black");
console.log(instance1.color); //"red,blue,green,black"

var instance2 = new SubType();
console.log(instance2.color); //"red,blue,green,black"

SuperType構造函數定義了一個colors屬性，SuperType的每個實例都會有各自包含自己數組的color屬性。當SubType通過原型鏈繼承了SuperType之后，subType.prototype就變成了SuperType的一個實例，因此它也就擁有了自己的color屬性。那SubType的所有實例都會共享這個color屬性。
2. 在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。

實現繼承的方法 1. 借用構造函數

解決原型中包含引用類型所帶來的問題的過程中，使用借用構造函數(偽造對象或經典繼承)來實現繼承。主要是通過使用apply()和call()方法在新創建的對象上執行構造函數如下：

function SuperType(){
    this.color=["red","blue","green"]
}

function SubType(){
    //繼承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.color.push("black");
console.log(instance1.color) //"red, blue,green,black"

var instance2 = new SubType();
console.log(instance2.color) //"red,blue,green"

通過call()或apply()方法在新創建的SubType實例的環境下調用了SuperType構造函數

相對原型鏈，借用構造函數可以子類型構造函數中向超類型構造函數傳遞參數如下：

function SuperType(name){
    this.name=name;
}
function SubType(){
    //繼承了SuperType 同時還傳遞了參數
    SuperType.call(this,"aa");
    //實例屬性
    this.age=29;
}

var instance = new SubType();
alert(instance.name) // aa
alert(instance.age) //29

### 2. 組合繼承
組合繼承也叫做偽經典繼承將原型鏈和借用構造函數的技術組合到一塊，從而發揮二組之所長的一種繼承模式。思路是使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。

function SuperType(name){
    this.name=name;
   this.color = ["red","blue","green"]
};

SuperType.prototype.sayName = function(){
    alert(this.name)
};

function SubType(name,age){
   //繼承屬性
    SuperType.call(this,name);
   this.age=age;
}

//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("aaa",29);
instance1.color.push("black");
alert(instance1.color); //"red，blue，green，black"
instance1.sayName(); //"aaa"
instance1.sayAge(); // 29

 var instance2 = new SubType("ccc",30);
alert(instance2.color); //"red，blue，green"
instance2.sayName(); //"ccc"
instance2.sayAge(); // 30

組合繼承避免了原型鏈和借用構造函數的缺陷，融合了他們的優點，成為JavaScript中最常用的繼承模式。而且instanceOf和isPrototype()也能夠識別基于組合繼承創建的對象。
### 3. 原型式繼承
借用原型可以基于已有的對象創建新對象，同時還不必因此創建自定義類型。

var person = {
    name:"Nicholas",
    friends:["Shelby","court","Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends) //"Shelby,Count,Van,Rob,Barbie"

Object.create()傳遞第二個參數

var person = {
    name: "Nicholas",
    friends: ["Shelby","Court","Van"]
}

var anotherPerson = Object.create(person,{
    name: {
        value: "Greg"
    }
});

var anotherPerson2 = Object.create(person,{
    name: {
        value: "blue"
    }
});
alert(anotherPerson.name) //"Greg"
alert(anotherPerson2.name) //"blue"

Obeject.create()方法IE9開始兼容
### 4. 寄生式繼承
寄生式繼承的思路與寄生構造函數和工廠模式類似，即創建一個僅用于封裝繼承過程的函數，該函數在內部以某種方式來增強對象，最后再像·真地是它做了所有工作一樣返回對象。

function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function(){
        alert("hi");
    };
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["Shelby","Court","Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

本文主要是個人摘自《javascript高級程序設計》用來做個人筆記的,請大佬們手下留情。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106981.html

js實現繼承的幾種方式

摘要：原型鏈實現繼承例子繼承了借用構造函數基本思想在子類型構造函數的內部調用超類構造函數，通過使用和方法可以在新創建的對象上執行構造函數。前言：大多OO語言都支持兩種繼承方式：接口繼承和實現繼承，而ECMAScript中無法實現接口繼承，ECMAScript只支持實現繼承，而且其實現繼承主要是依靠原型鏈來實現。 1.原型鏈基本思想：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。...

Alliot 2019-08-19 17:59 評論0 收藏0
JS繼承實現的幾種方式及其優缺點

摘要：原型繼承缺點子類實例共享屬性，造成實例間的屬性會相互影響可以看到子類的實例屬性皆來自于父類的一個實例，即子類共享了同一個實例共享了父類的方法構造函數繼承缺點父類的方法沒有被共享，造成內存浪費子實例的屬性都是相互獨立的實例方法也是獨立的，沒有原型繼承缺點: 子類實例共享屬性，造成實例間的屬性會相互影響 function Parent1() { this.name = [super...

ymyang 2019-08-22 11:06 評論0 收藏0
面試--js實現繼承的幾種方式

摘要：基于原型的繼承原型上的屬性被共享了不是我們所需要的這種繼承會有如下的缺點如果父類包含有引用類型的屬性所有的子類就會共享這個屬性。基于原型的繼承 function father() { this.faName = father; this.names=[11,22] } father.prototype.getfaName = fun...

baiy 2019-08-21 16:56 評論0 收藏0
JS學習筆記（第6章）（實現繼承的幾種方式）

摘要：使用最多的繼承模式是組合繼承，這種模式使用原型鏈繼承共享的屬性和方法，而借用構造函數繼承實例屬性。原型式繼承，可以在不必預先定義構造函數的情況下實現繼承，其本質是執行給定對象的淺復制。 1、原型鏈實現繼承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = func...

hiyayiji 2019-08-26 10:18 評論0 收藏0
js中的幾種繼承實現

摘要：使用關鍵字熟悉的同學應該非常熟悉這個關鍵字，中的繼承都是靠它實現的。新加入的關鍵字是語法糖，本質還是函數使用修改之前的例子，將會更簡單在下面的例子，定義了一個名為的類，然后定義了一個繼承于的類。使用Object.create實現類式繼承下面是官網的一個例子 //Shape - superclass function Shape() { this.x = 0; this.y ...

時飛 2019-08-19 17:31 評論0 收藏0