JavaScript 繼承方式詳解

js 中實現繼承有兩種常用方式：

原型鏈繼承（物件間的繼承）

類式繼承（建構函式間的繼承）

在物件導向的語言中，可以使用類來建立乙個自定義物件，當然es6中也引入了class來建立類。在這之前，我們需要使用js的原型來建立自定義物件。

類繼承是在子型別建構函式的內部呼叫父型別的建構函式

function super ()
function sub ()

原型式繼承是借助已有的物件建立新的物件，將子類的原型指向父類。

function super (id) 
super.prototype.tostring = function () 
function sub (id) 
sub.prototype = new super();  // 這句即原型式繼承的核心**

為了讓子類繼承父類的屬性和方法，首先需要定義乙個建構函式，然後將父類的例項賦值給建構函式的原型。

function parent () 
function child () 
chid.prototype = new parent();  // chid繼承parent,形成原型鏈
var test = new child();
console.log(test.name) // parent
console.log(test.age)  // 10    得到被繼承的屬性
// 繼續原型鏈繼承
function brother () 
brother.prototype = new child();
var peter = new brother();
console.log(peter.name)  //繼承了child和parent,輸出parent
console.log(peter.age)  // 輸出10

所有的建構函式都繼承自object,它是自動完成繼承的並不需要我們手動繼承，那麼接著看它們的從屬關係

可以通過兩種方式確定原型和例項的關係，通過操作符instanceof和isprototypeof()方法

console.log(peter instanceof object); //true
console.log(test instanceof brother)  //false,test是brother的父類
console.log(peter instanceof child) //true
console.log(peter instanceof parent)  //true

只要是原型鏈**現過的原型，都可以說是改原型鏈派生的例項的原型。因此，isprotptypeof()方法也會返回true

在js中，被繼承的函式成為父類（或者基類、超類），繼承的函式成為子類（派生類）。使用原型繼承主要有兩個問題，一是字面量重寫原型會中斷關係，使用引用型別的原型，並且子型別無法給父型別傳遞引數。

偽類解決引用共享和超型別無法傳參的問題，我們可以採用'類式繼承'的方式

function parent (age) 
function child (age) 
var peter = new child(20);
console.log(peter.age) //20
console.log(peter.colors) //blue,red,green
peter.colors.push("white");
console.log(peter.colors) //blue,red,green,white

借用建構函式雖然解決了上面兩張問題，但沒有原型，所以我們需要原型鏈+借用建構函式的模式，這種模式成為組合繼承

function parent (age) 
parent.prototype.run = function () 
function child (age) 
child.prototype = new parent();  //原型鏈繼承
var peter = new child(20);
console.log(peter.run()); //blue,red,green is 20

組合繼承是一種比較常用的方法，思路是使用原型鏈實現對原型屬性和方法的繼承，借用建構函式來實現對例項屬性的繼承。這樣，既實現了原型上定義方法的函式復用，又保證每個例項都有自己的屬性。

call(thisobj,object);  // call接收乙個物件

這種繼承借助原型並基於已有的物件建立新的物件，同時還不用建立自定義型別的方式成為原型式繼承

function obj(o) 
f.prototype = o;
return new f();
}var box = ;
var b1 = obj(box);
console.log(b1.name) // peter
b1.name = 'jack';
console.log(b1.name) //jack
console.log(b1.arr) //blue,red,green
b1.arr.push('white') //blue,red,green,white
var b2 = obj(box);
console.log(b2.name) // peter
console.log(b1.arr) //blue,red,green

原型式繼承首先在obj()函式內部建立乙個臨時性的建構函式，然後將傳入的物件作為這個建構函式的原型，最後返回這個臨時型別的新例項。

這種繼承方式是把原型式+工廠模式結合起來，目的是為了封裝建立的過程。

function create(o);
return f;
}

組合式繼承是js最常用的繼承模式，但組合繼承的父型別會在使用過程中被呼叫兩次，一次是建立子型別的時候，另一次是在子型別建構函式的內部

function parent(name)
parent.prototype.run = function () ;
function child(name,age)
child.prototype = new parent();//第一次呼叫

以上**是組合繼承，那麼寄生組合繼承解決了兩次呼叫的問題

function obj() 
f.prototype = o;
return new f();
}function create(parent,test) 
function parent(name)
parent.prototype.run = function () ;
function child(name,age)
inheritprototype(parent,child);  //通過這裡實現繼承
var test = new child('peter',20);
test.arr.push('new');
console.log(test.arr);  //brother,sister,parents,new
console.log(test.run());  //只共享了方法
var test2 = new child('jack',22);
console.log(test2.arr);  //引用問題解決

// 定義乙個全域性函式
function f () 
// 定義乙個全域性變數
var name = 'peter';
var obj = ;

JavaScript繼承方式詳解

js裡常用的如下兩種繼承方式原型鏈繼承物件間的繼承類式繼承建構函式間的繼承在物件導向的語言中，我們使用類來建立乙個自定義物件。然而js中所有事物都是物件，那麼用什麼辦法來建立自定義物件呢？這就需要用到js的原型我們可以簡單的把prototype看做是乙個模版，新建立的自定義物件都是這個模...

JavaScript實現繼承方式

student.prototype new person 得到乙個 person 例項，並且這個例項指向構造器的 prototype 屬性和呼叫了建構函式，因為呼叫的建構函式，而 student 只是乙個類，並沒有例項化，只為了繼承，呼叫建構函式建立乙個例項，引數的問題就不容易解決。例如當 per...

JavaScript繼承的多種方式

1.原型鏈繼承 function a firstname a.prototype.getfirstname function function b lastname b.prototype newa 遠 b.prototype.getlastname function var person newb...

JavaScript 繼承方式詳解

JavaScript繼承方式詳解

JavaScript實現繼承方式

JavaScript繼承的多種方式

相關推薦