細節：js 對象繼承的幾種模式舉例

Backache 發布于2019-08-21 10:49 / 441人閱讀

摘要：原型鏈繼承借用構造函數偽造對象，經典繼承無參數有參數組合繼承偽經典繼承無參數有參數寄生組合式繼承引用類型最理想的范式或者可以把函數寫成下面這樣原型式繼承用于共享引用類型的值，與寄生式類似傳統版先定義函數，再繼承版直接用，再繼承省略了定義函數

原型鏈繼承

function Person(){};

Person.prototype = {
    constructor: Person,
    name: "Oliver"
};
        
function People(){};

People.prototype = new Person();
People.prototype.constructor = People;
People.prototype.sayName = function(){
    return this.name;
};

var ins = new People();

console.log(ins.sayName());

借用構造函數（偽造對象，經典繼承） 無參數

function SuperType(){
    this.color = ["red","yellow","white"];
}
function SubType(){
    SuperType.call(this);
}

var instance1 = new SubType();
var instance2 = new SubType();

instance1.color.pop();
console.log(instance1.color); //["red", "yellow"]
console.log(instance2.color); //["red", "yellow", "white"]

有參數

function SuperType(name){
    this.name = name;
    this.number = [21,32,14,1];
}
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

instance2.number.pop();

console.log(instance1.name + instance1.age + instance1.number); //Oliver1821,32,14,1
console.log(instance2.name + instance2.age + instance2.number); //Troy2421,32,14

組合繼承（偽經典繼承） 無參數

function SuperType(){
    this.color = ["red","yellow","white"];
}
SuperType.prototype.sayColor = function(){
    return this.color;
};

function SubType(){
    SuperType.call(this);
    this.number = 321;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayNumber = function(){
    return this.number;
};

var instance1 = new SubType();
var instance2 = new SubType();

instance2.color.pop();
console.log(instance1.color + instance1.number); //red,yellow,white321
console.log(instance2.color + instance2.number); //red,yellow321

有參數

function SuperType(name){
    this.name = name;
    this.number = [32,1342,11,1];
}
SuperType.prototype.sayName = function(){
    return 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(){
    return this.age;
};

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);

instance2.number.pop();
console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver1832,1342,11,1
console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy2432,1342,11

寄生組合式繼承（引用類型最理想的范式）

function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name){
    this.name = name;
    this.number = [321,321,43];
}
SuperType.prototype.sayName = function(){
    return this.name;
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function(){
    return this.age;
};

var instance1 = new SubType("Oliver",18);
var instance2 = new SubType("Troy",24);
instance2.number.pop();

console.log(instance1.sayName() + instance1.sayAge() + instance1.number); //Oliver18321,321,43
console.log(instance2.sayName() + instance2.sayAge() + instance2.number); //Troy24321,321

或者可以把inheritPrototype 函數寫成下面這樣：

function inheritPrototype(SubType,SuperType){
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
}

原型式繼承（用于共享引用類型的值，與寄生式類似） 傳統版（先定義object() 函數，再繼承）

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = object(SuperType);
var SubType2 = object(SuperType);

SubType1.name = "Troy";
SubType1.number.pop();

SubType2.name = "Alice";
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321

ECMAScript 5 版（直接用Object.create()，再繼承）

var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = Object.create(SuperType); //省略了定義object()函數
var SubType2 = Object.create(SuperType);

SubType1.name = "Troy";
SubType1.number.pop();

SubType2.name = "Alice";
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321

ECMAScript 5 簡寫版（定義Object.create()的第二個參數，再繼承）

var SuperType = {
    name: "Oliver",
    number: [321,321,4532,1]
};

var SubType1 = Object.create(SuperType,{
    name: {
        value : "Troy"
    }
});
var SubType2 = Object.create(SuperType,{
    name: {
        value : "Alice"
    }
});

SubType1.number.pop();
SubType2.number.pop();

console.log(SubType1.name + SubType2.name + SubType1.number + SubType2.number + SuperType.name + SuperType.number); //TroyAlice321,321321,321Oliver321,321

寄生式繼承（用于共享引用類型的值，與原型式類似）

function createAnother(original){
    var clone = Object(original);
    clone.sayHi = function(){
        return "Hi";
    };
    return clone;
}

var person = {
    name: "Oliver",
    number: [13,21,31,1]
};

var anotherPerson = createAnother(person);
anotherPerson.number.pop();

console.log(anotherPerson.sayHi() + anotherPerson.number); //Hi13,21,31
console.log(person.number); //13,21,31

云服務器 GPU云服務器 js繼承的幾種方式 java創建對象的幾種方式 js的幾種數據類型 js緩存的幾種方法

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

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

細節：js 創建對象的幾種模式舉例

摘要：工廠模式不推薦應該把方法放在函數的外面，避免重復創建該方法定義的不是構建函數，因該使用方法創建實例，而不是方法不要忘記在函數的最后構造函數模式不推薦使用指代，函數無需明確應該把方法放在函數的外面，避免重復創建該方法原型模式不推薦函數中不對屬工廠模式（不推薦） var sayName = function(){ return this.name; }; function cr...

laznrbfe 2019-08-19 17:08 評論0 收藏0
復習筆記（新手向） - JS對象聲明的幾種方式

摘要：二用操作符構造對象屬性名屬性值屬性名屬性值屬性名屬性值屬性名屬性值方法名方法名首先用創建一個空對象，然后用多條語句給對象添加屬性方法。他的寫法與三用函數聲明的方式構造對象比較像，但是稍有不同。 -- 新手向知識，就不用ES6寫法了。一、字面量聲明 var obj = { 屬性名1 : 屬性值, 屬性名2 : 屬性值, 屬性名3 : 屬性...

davidac 2019-08-23 11:58 評論0 收藏0
JS學習筆記（第6章）（實現繼承的幾種方式）

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

hiyayiji 2019-08-26 10:18 評論0 收藏0
#yyds干貨盤點# 前端基礎知識面試集錦3

摘要：當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體如何實現繼承構造繼承原型繼承實例繼承拷貝繼承原型機制或和方法去實現較簡單，建議使用構造函數與原型混合方式。它是基于的一個子集。 JavaScript介紹js的基本數據類型。Undefined、Null、Boolean、Number、Stri...

番茄西紅柿 2021-11-22 15:29 評論0 收藏2637
細節：js 函數閉包內存泄露的解決辦法舉例

摘要：這里存在內存泄露問題，油畫后的代碼如下這里這里這里這里這里這里原始代碼： function Cars(){ this.name = Benz; this.color = [white,black]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ ...

Chaz 2019-08-19 17:07 評論0 收藏0