本文實(shí)例講述了javascript繼承機(jī)制。分享給大家供大家參考。具體分析如下：
初學(xué)javascript一般很難理解Javascript語(yǔ)言的繼承機(jī)制它沒(méi)有"子類"和"父類"的概念，也沒(méi)有"類"（class）和"實(shí)例"（instance）的區(qū)分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來(lái)實(shí)現(xiàn)繼承。
我花了很多時(shí)間，學(xué)習(xí)這個(gè)部分，還做了很多筆記。但是都屬于強(qiáng)行記憶，無(wú)法從根本上理解。
一、如何創(chuàng)建一個(gè)類
假設(shè)有給叫Person的類如下：
var Person = function(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
如上：Person代表地球上所有的人，每個(gè)人都有這兩個(gè)基本屬性：name和age；現(xiàn)在我們要實(shí)現(xiàn)一個(gè)學(xué)生類，然后我們知道了； 學(xué)生也是一個(gè)人，及學(xué)生也有name和age等屬性；現(xiàn)在的問(wèn)題是怎么能把這個(gè)關(guān)系給搭起來(lái)？
先來(lái)看看純面向?qū)ο蟮恼Z(yǔ)言是如何做到的(如：Actionscrpt3)
class Students extend Person {}; //很簡(jiǎn)單，一行代碼；更確切的說(shuō)是一個(gè)單詞--extend
二、換成js如何能做到
在講解js的繼承機(jī)制實(shí)現(xiàn)之前，先了解一下js的原型鏈：
var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"
就上面的getName()方法來(lái)說(shuō)，是如何執(zhí)行的？首先會(huì)在Person這個(gè)函數(shù)里面找是否有g(shù)etName（）這個(gè)方法，發(fā)現(xiàn)沒(méi)有；然后就轉(zhuǎn)到 Person.prototype中尋找，發(fā)現(xiàn)有！然后就調(diào)用，若沒(méi)有呢？繼續(xù)按照相同的方法一直沿著prototype尋找下去，直到找到方法或者 達(dá)到原型鏈的頂端為止！
舉例來(lái)說(shuō)，現(xiàn)在有一個(gè)叫做DOG的構(gòu)造函數(shù)，表示狗對(duì)象的原型。
function DOG(name){
this.name = name;
}
對(duì)這個(gè)構(gòu)造函數(shù)使用new，就會(huì)生成一個(gè)狗對(duì)象的實(shí)例。
var dogA = new DOG('大毛');
alert(dogA.name); // 大毛
注意構(gòu)造函數(shù)中的this關(guān)鍵字，它就代表了新創(chuàng)建的實(shí)例對(duì)象。三、new運(yùn)算符的缺點(diǎn)
用構(gòu)造函數(shù)生成實(shí)例對(duì)象，有一個(gè)缺點(diǎn)，那就是無(wú)法共享屬性和方法。
比如，在DOG對(duì)象的構(gòu)造函數(shù)中，設(shè)置一個(gè)實(shí)例對(duì)象的共有屬性species。
function DOG(name){
this.name = name;
this.species = '犬科';
}
然后，生成兩個(gè)實(shí)例對(duì)象：
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
這兩個(gè)對(duì)象的species屬性是獨(dú)立的，修改其中一個(gè)，不會(huì)影響到另一個(gè)。
dogA.species = '貓科';
alert(dogB.species); // 顯示"犬科"，不受dogA的影響
每一個(gè)實(shí)例對(duì)象，都有自己的屬性和方法的副本。這不僅無(wú)法做到數(shù)據(jù)共享，也是極大的資源浪費(fèi)。所以：繼承的思想： 通過(guò)js特有的原型鏈來(lái)實(shí)現(xiàn)繼承機(jī)制！
四、基于原型鏈的繼承
1.直接繼承實(shí)現(xiàn)
var Students = function(name, age, sid) {
Person.call(this, name, age);
this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型鏈上實(shí)現(xiàn)繼承機(jī)制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
// 得到學(xué)生的成績(jī)
}
一定不要少了Students.prototype.constructor = Students這一行！，定義一個(gè)構(gòu)造函數(shù)的時(shí)候，它默認(rèn)的prototype是一個(gè)Object實(shí)例，然后prototype的constructor屬性自動(dòng)被設(shè)置成該函數(shù)本身 ?。?！若手工將prototype設(shè)置為另一個(gè)對(duì)象的時(shí)候，則新對(duì)象自然不會(huì)具有原對(duì)象的contructor值，故需要重新設(shè)置其constructor屬性。如：
var Test = function() {
this.time = "now";
}
console.log(Test.prototype); // Object {} 一個(gè)空對(duì)象
console.log(Test.prototype.constructor); // function() {this.time = "now";},及函數(shù)本身
// 若手工改變Test的prototype屬性
Test.prototype = {
someFunc: function() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [native code] }
// 然后你會(huì)發(fā)現(xiàn)完全指錯(cuò)了，故手動(dòng)更改prototype屬性的時(shí)候需要更改它的constructor指向;
經(jīng)過(guò)上面的測(cè)試就知道為什么要修改constructor值了。2.封裝繼承的函數(shù)extend
function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
其實(shí)這個(gè)函數(shù)的功能只是對(duì)上面繼承過(guò)程的一個(gè)封裝，不同的有：
只繼承了superClass的prototype屬性，并沒(méi)有繼承superClass構(gòu)造函數(shù)中的屬性;
這樣做的優(yōu)點(diǎn)在于：減少去new一個(gè)構(gòu)造函數(shù)的開銷！
當(dāng)然隨之的問(wèn)題是不能單一的通過(guò)這個(gè)函數(shù)就能讓subClass繼承superClass的所有屬性
改進(jìn)：
// 在Students構(gòu)造函數(shù)中繼續(xù)添加一行代碼：
Person.call(this, name, age);
五、小結(jié)
利用js的原型鏈原理，我們可以很容易的實(shí)現(xiàn)js的繼承機(jī)制，盡管不是非常的嚴(yán)格，但是我的目的達(dá)到了： 重復(fù)的代碼盡量出現(xiàn)一次！
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
