本文實(shí)例講述了JavaScript原型鏈與繼承操作。分享給大家供大家參考，具體如下：

1. JavaScript繼承

JavaScript繼承可以說(shuō)是發(fā)生在對(duì)象與對(duì)象之間，而原型鏈則是實(shí)現(xiàn)繼承的主要方法；

1.1 原型鏈

利用原型讓一引用類(lèi)型繼承另一個(gè)引用類(lèi)型的屬性和方法。

構(gòu)造函數(shù)中有個(gè)prototype（每個(gè)函數(shù)中都有），指向他的原型對(duì)象，每個(gè)原型對(duì)象中也有一個(gè)constructor屬性，指向原構(gòu)造函數(shù)。通過(guò)構(gòu)造函數(shù)創(chuàng)建的新對(duì)象中都有一個(gè)無(wú)法直接訪問(wèn)的[[proto]]屬性，使得對(duì)象也指向構(gòu)造函數(shù)的原型。這使得對(duì)象也獲得了原型中的方法和屬性。

當(dāng)訪問(wèn)對(duì)象中的屬性或方法時(shí)，如果對(duì)象中沒(méi)有該屬性或方法，則會(huì)向上一級(jí)原型對(duì)象中尋找該屬性或方法，如果找了，就返回該屬性，若沒(méi)有則繼續(xù)向上面的原型中去查找該屬性。

1.2 構(gòu)造函數(shù)的原型鏈繼承

function Father(name,age){
    this.name=name;
    this.age=age;
}
Father.prototype.eat=function(){ //給原型添加eat方法
    console.log(this.name+"吃飯了");
}
var f1=new Father("李四",20); //創(chuàng)建新對(duì)象f1, [[proto]]指向父原型
function Son(){
}
Son.prototype=f1; //將子構(gòu)造函數(shù)的prototype指向了父類(lèi)型的對(duì)象，這里實(shí)現(xiàn)了——繼承
var s1=new Son(); // 創(chuàng)建子對(duì)象
s1.eat(); //李四吃飯了

運(yùn)行結(jié)果：

注意：

①：當(dāng) Son.prototype指向Father的時(shí)候，他就已經(jīng)是父類(lèi)型的Son了。

②：s1.eat();s1中沒(méi)有此方法，該方法在父類(lèi)型原型中，當(dāng)s1訪問(wèn)時(shí)，現(xiàn)在s1中查找，若沒(méi)有則向他指向的原型中去查找該方法，若還是沒(méi)有，則繼續(xù)往上面的原型中查找。這樣就形成了一條原型鏈。

③：通過(guò)原型鏈實(shí)現(xiàn)了繼承。

簡(jiǎn)寫(xiě)：

var f1=new Father;
var Son.prototype=f1
//可以直接簡(jiǎn)寫(xiě)成:
var Son.prototypr=new Father(); //這個(gè)時(shí)候可以傳值進(jìn)去 ，其余地方無(wú)法傳值

1.3 默認(rèn)頂端原型

默認(rèn)的頂端原型：

是當(dāng)所有類(lèi)型都沒(méi)有指明繼承某個(gè)類(lèi)型時(shí)，則默認(rèn)繼承Object類(lèi)型。

objec中也有prototype指向他的object原型，object中也有[[proto]]，只不過(guò)他指向的是null；可忽略。

object的很多方法，都是存在object的原型中；

在原型鏈中查找，從當(dāng)前位置一直往上訪問(wèn)，直到原型鏈頂端位置。

1.4 測(cè)試數(shù)據(jù)

typeof 測(cè)數(shù)據(jù)的類(lèi)型，最好只來(lái)測(cè)試基本類(lèi)型數(shù)據(jù)，應(yīng)為除了基本類(lèi)型外全是返回object。

console.log(typeof 123) //number
console.log(typeof "ccsa ") //string

instnaceof 測(cè)試一個(gè)對(duì)象屬不屬于其父類(lèi)對(duì)象的類(lèi)型

function Father(name){
}
var f1=new Father();
console.log(f1 instanceof Father); //true

運(yùn)行結(jié)果：

isPrototypeOf(要測(cè)的對(duì)象) 專(zhuān)屬于原型對(duì)象的方法，判斷該對(duì)象在不在該原型鏈上,使用:父類(lèi)構(gòu)造函數(shù).prototype.isPrototypeOf(對(duì)象)

function Father(){
}
function Son(){
}
Son.prototype=new Father;
var s1=new son();
console.log(Father.prototype.isPrototypeOf(s1));  //true
console.log(Object.prototype.isPrototypeOf(s1));  //true

1.5 借調(diào)

借調(diào)：借用構(gòu)造函數(shù)調(diào)用冒充繼承，借調(diào)實(shí)現(xiàn)的繼承，不是真正的繼承，只是借用構(gòu)造函數(shù)中的屬性或方法。

apply,call。

function Fn(name,age){
   this.name=name;
   this.age=20;
}
function Son(name,age,sex){
   Fn.call(this,name,age)        //借調(diào)繼承Fn；
   this.sex=sex;
};
var s1=new Son("李四",20,"男");
console.log(s1);

注意：借調(diào)缺點(diǎn)：call是冒充繼承，不是真正的繼承，所以不能訪問(wèn)原構(gòu)造函數(shù)的原型中的屬性或方法。

1.6 組合繼承

組合構(gòu)造函數(shù)的借調(diào)繼承和原型的繼承優(yōu)點(diǎn)：

function Fn(name,age){
   this.name=name; //構(gòu)造函數(shù)的屬性多樣
   this.age=age;
   if((typeof Fn.prototype.eat)!="funciton"){ //判斷語(yǔ)句中是否有該方法，沒(méi)有則創(chuàng)建
    Fn.prototype.eat=function(){ //原型的方法共享
      console.log(this.name+"吃了飯");
    }
   }
}
function Son(name,age,sex){ //創(chuàng)建子類(lèi)構(gòu)造函數(shù)
   Fn.call(this,name,age) //借調(diào)Fn()的屬性
   this.sex=sex;
};
Son.prototype=new Fn(); //Son.prototype指向父類(lèi)對(duì)象，實(shí)現(xiàn)了繼承，所以能夠調(diào)用eat方法，
var s1=new Son("李四",20,"男"); //若沒(méi)有繼承，單單的使用call借調(diào)Fn繼承，子類(lèi)實(shí)例s1無(wú)法調(diào)用eat方法
callconsole.log(s1); //因?yàn)閏all不是真正的繼承
s1.eat();

注意：Son.prototype=new Fn(); 這條語(yǔ)句 實(shí)現(xiàn)了Son繼承父類(lèi)型Fn;Son指向的是父類(lèi)型創(chuàng)建的對(duì)象，而父類(lèi)型的對(duì)象有自己的屬性，并且又成為了子類(lèi)型的原型，那么其中的屬性不就成了共享的了嗎。 但是前面還有用到Fn.call( )，這條語(yǔ)句已經(jīng)借調(diào)了父類(lèi)構(gòu)造函數(shù)屬性，相當(dāng)于覆蓋了子類(lèi)型原型的屬性。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論