JavaScript中的繼承方式詳解
js繼承的概念
js里常用的如下兩種繼承方式：
原型鏈繼承（對象間的繼承）
類式繼承（構(gòu)造函數(shù)間的繼承）
由于js不像java那樣是真正面向?qū)ο蟮恼Z言，js是基于對象的，它沒有類的概念。所以，要想實(shí)現(xiàn)繼承，可以用js的原型prototype機(jī)制或者用apply和call方法去實(shí)現(xiàn)
在面向?qū)ο蟮恼Z言中，我們使用類來創(chuàng)建一個(gè)自定義對象。然而js中所有事物都是對象，那么用什么辦法來創(chuàng)建自定義對象呢？這就需要用到j(luò)s的原型：
我們可以簡單的把prototype看做是一個(gè)模版，新創(chuàng)建的自定義對象都是這個(gè)模版（prototype）的一個(gè)拷貝 （實(shí)際上不是拷貝而是鏈接，只不過這種鏈接是不可見，新實(shí)例化的對象內(nèi)部有一個(gè)看不見的__Proto__指針，指向原型對象）。
js可以通過構(gòu)造函數(shù)和原型的方式模擬實(shí)現(xiàn)類的功能。 另外，js類式繼承的實(shí)現(xiàn)也是依靠原型鏈來實(shí)現(xiàn)的。
原型式繼承與類式繼承
類式繼承是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型的構(gòu)造函數(shù)。
嚴(yán)格的類式繼承并不是很常見，一般都是組合著用：
function Super(){
this.colors=["red","blue"];
}
function Sub(){
Super.call(this);
}
原型式繼承是借助已有的對象創(chuàng)建新的對象，將子類的原型指向父類，就相當(dāng)于加入了父類這條原型鏈
原型鏈繼承
為了讓子類繼承父類的屬性（也包括方法），首先需要定義一個(gè)構(gòu)造函數(shù)。然后，將父類的新實(shí)例賦值給構(gòu)造函數(shù)的原型。代碼如下：
<script>
function Parent(){
this.name = 'mike';
}
function Child(){
this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent，通過原型，形成鏈條
var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續(xù)原型鏈繼承
function Brother(){ //brother構(gòu)造
this.weight = 60;
}
Brother.prototype = new Child();//繼續(xù)原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12
</script>
以上原型鏈繼承還缺少一環(huán)，那就是Object，所有的構(gòu)造函數(shù)都繼承自O(shè)bject。而繼承Object是自動(dòng)完成的，并不需要我們自己手動(dòng)繼承，那么他們的從屬關(guān)系是怎樣的呢？
確定原型和實(shí)例的關(guān)系
可以通過兩種方式來確定原型和實(shí)例之間的關(guān)系。操作符instanceof和isPrototypeof()方法：
alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超類
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true
只要是原型鏈中出現(xiàn)過的原型，都可以說是該原型鏈派生的實(shí)例的原型，因此，isPrototypeof()方法也會(huì)返回true
在js中，被繼承的函數(shù)稱為超類型（父類，基類也行），繼承的函數(shù)稱為子類型（子類，派生類）。使用原型繼承主要由兩個(gè)問題：
一是字面量重寫原型會(huì)中斷關(guān)系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
偽類解決引用共享和超類型無法傳參的問題，我們可以采用“借用構(gòu)造函數(shù)”技術(shù)
借用構(gòu)造函數(shù)（類式繼承）
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
function Child(age){
Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill
</script>
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，則復(fù)用無從談起，所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式稱為組合繼承
組合繼承
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
Parent.prototype.run = function () {
return this.name + ' are both' + this.age;
};
function Child(age){
Parent.call(this,age);//對象冒充，給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var test = new Child(21);//寫new Parent(21)也行
alert(test.run());//mike,jack,smith are both21
</script>
組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實(shí)現(xiàn)對原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。
call()的用法：調(diào)用一個(gè)對象的一個(gè)方法，以另一個(gè)對象替換當(dāng)前對象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
原型式繼承
這種繼承借助原型并基于已有的對象創(chuàng)建新對象，同時(shí)還不用創(chuàng)建自定義類型的方式稱為原型式繼承
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
var box = {
name : 'trigkit4',
arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4
b1.name = 'mike';
alert(b1.name);//mike
alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents
var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents
</script>
原型式繼承首先在obj()函數(shù)內(nèi)部創(chuàng)建一個(gè)臨時(shí)性的構(gòu)造函數(shù) ，然后將傳入的對象作為這個(gè)構(gòu)造函數(shù)的原型，最后返回這個(gè)臨時(shí)類型的一個(gè)新實(shí)例。
寄生式繼承
這種繼承方式是把原型式+工廠模式結(jié)合起來，目的是為了封裝創(chuàng)建的過程。
<script>
function create(o){
var f= obj(o);
f.run = function () {
return this.arr;//同樣，會(huì)共享引用
};
return f;
}
</script>
組合式繼承的小問題
組合式繼承是js最常用的繼承模式，但組合繼承的超類型在使用過程中會(huì)被調(diào)用兩次；一次是創(chuàng)建子類型的時(shí)候，另一次是在子類型構(gòu)造函數(shù)的內(nèi)部
<script>
function Parent(name){
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,age);//第二次調(diào)用
this.age = age;
}
Child.prototype = new Parent();//第一次調(diào)用
</script>
以上代碼是之前的組合繼承，那么寄生組合繼承，解決了兩次調(diào)用的問題。
寄生組合式繼承
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
function create(parent,test){
var f = obj(parent.prototype);//創(chuàng)建對象
f.constructor = test;//增強(qiáng)對象
}
function Parent(name){
this.name = name;
this.arr = ['brother','sister','parents'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,name);
this.age =age;
}
inheritPrototype(Parent,Child);//通過這里實(shí)現(xiàn)繼承
var test = new Child('trigkit4',21);
test.arr.push('nephew');
alert(test.arr);//
alert(test.run());//只共享了方法
var test2 = new Child('jack',22);
alert(test2.arr);//引用問題解決
</script>
call和apply
全局函數(shù)apply和call可以用來改變函數(shù)中this的指向，如下：
// 定義一個(gè)全局函數(shù)
function foo() {
console.log(this.fruit);
}
// 定義一個(gè)全局變量
var fruit = "apple";
// 自定義一個(gè)對象
var pack = {
fruit: "orange"
};
// 等價(jià)于window.foo();
foo.apply(window); // "apple",此時(shí)this等于window
// 此時(shí)foo中的this === pack
foo.apply(pack); // "orange"
相關(guān)文章
微信小程序?qū)崿F(xiàn)商品分類頁過程結(jié)束
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品分類頁列表方法，商品分類頁主要是需要實(shí)現(xiàn)商品類目和對應(yīng)商品標(biāo)題的聯(lián)動(dòng)跳轉(zhuǎn)，文中過程詳細(xì)，感興趣的小伙伴們可以參考一下2023-05-05
我從js代碼中通過地址欄傳值給了action的相應(yīng)變量，但是，如果變量值為中文的時(shí)候，在action中測試輸出則為問號2013-05-05
javascript設(shè)計(jì)模式 – 原型模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 原型模式,結(jié)合實(shí)例形式分析了javascript原型模式相關(guān)概念、原理、應(yīng)用場景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS異步宏隊(duì)列微隊(duì)列原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了Typescript中函數(shù)類型,主要包括常見寫法、可選參數(shù)，默認(rèn)參數(shù)及剩余參數(shù)，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了redux處理異步action解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了socket在egg中的使用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
window.event.keyCode兼容IE和Firefox實(shí)現(xiàn)js代碼
