javascript繼承機制實例詳解
本文實例講述了javascript繼承機制。分享給大家供大家參考。具體分析如下：
初學javascript一般很難理解Javascript語言的繼承機制它沒有"子類"和"父類"的概念，也沒有"類"（class）和"實例"（instance）的區(qū)分，全靠一種很奇特的"原型鏈"（prototype chain）模式，來實現(xiàn)繼承。
我花了很多時間，學習這個部分，還做了很多筆記。但是都屬于強行記憶，無法從根本上理解。
一、如何創(chuàng)建一個類
假設有給叫Person的類如下：
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
}
如上：Person代表地球上所有的人，每個人都有這兩個基本屬性：name和age；現(xiàn)在我們要實現(xiàn)一個學生類，然后我們知道了； 學生也是一個人，及學生也有name和age等屬性；現(xiàn)在的問題是怎么能把這個關(guān)系給搭起來？
先來看看純面向?qū)ο蟮恼Z言是如何做到的(如：Actionscrpt3)
二、換成js如何能做到
在講解js的繼承機制實現(xiàn)之前，先了解一下js的原型鏈：
person.getName(); // "Poised-flw"
就上面的getName()方法來說，是如何執(zhí)行的？首先會在Person這個函數(shù)里面找是否有g(shù)etName（）這個方法，發(fā)現(xiàn)沒有；然后就轉(zhuǎn)到 Person.prototype中尋找，發(fā)現(xiàn)有！然后就調(diào)用，若沒有呢？繼續(xù)按照相同的方法一直沿著prototype尋找下去，直到找到方法或者 達到原型鏈的頂端為止！
舉例來說，現(xiàn)在有一個叫做DOG的構(gòu)造函數(shù)，表示狗對象的原型。
this.name = name;
}
對這個構(gòu)造函數(shù)使用new，就會生成一個狗對象的實例。
alert(dogA.name); // 大毛
注意構(gòu)造函數(shù)中的this關(guān)鍵字，它就代表了新創(chuàng)建的實例對象。
三、new運算符的缺點
用構(gòu)造函數(shù)生成實例對象，有一個缺點，那就是無法共享屬性和方法。
比如，在DOG對象的構(gòu)造函數(shù)中，設置一個實例對象的共有屬性species。
this.name = name;
this.species = '犬科';
}
然后，生成兩個實例對象：
var dogB = new DOG('二毛');
這兩個對象的species屬性是獨立的，修改其中一個，不會影響到另一個。
alert(dogB.species); // 顯示"犬科"，不受dogA的影響
每一個實例對象，都有自己的屬性和方法的副本。這不僅無法做到數(shù)據(jù)共享，也是極大的資源浪費。
所以：繼承的思想： 通過js特有的原型鏈來實現(xiàn)繼承機制！
四、基于原型鏈的繼承
1.直接繼承實現(xiàn)
Person.call(this, name, age);
this.sid = sid;
}
Students.prototype = new Person(); //把Person放到Students的原型鏈上實現(xiàn)繼承機制
Students.prototype.constructor = Students;
Students.prototype.getResults = function() {
// 得到學生的成績
}
一定不要少了Students.prototype.constructor = Students這一行！，定義一個構(gòu)造函數(shù)的時候，它默認的prototype是一個Object實例，然后prototype的constructor屬性自動被設置成該函數(shù)本身 ！??！若手工將prototype設置為另一個對象的時候，則新對象自然不會具有原對象的contructor值，故需要重新設置其constructor屬性。如：
this.time = "now";
}
console.log(Test.prototype); // Object {} 一個空對象
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] }
// 然后你會發(fā)現(xiàn)完全指錯了，故手動更改prototype屬性的時候需要更改它的constructor指向;
經(jīng)過上面的測試就知道為什么要修改constructor值了。
2.封裝繼承的函數(shù)extend
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
其實這個函數(shù)的功能只是對上面繼承過程的一個封裝，不同的有：
只繼承了superClass的prototype屬性，并沒有繼承superClass構(gòu)造函數(shù)中的屬性;
這樣做的優(yōu)點在于：減少去new一個構(gòu)造函數(shù)的開銷！
當然隨之的問題是不能單一的通過這個函數(shù)就能讓subClass繼承superClass的所有屬性
改進：
Person.call(this, name, age);
五、小結(jié)
利用js的原型鏈原理，我們可以很容易的實現(xiàn)js的繼承機制，盡管不是非常的嚴格，但是我的目的達到了： 重復的代碼盡量出現(xiàn)一次！
希望本文所述對大家的javascript程序設計有所幫助。
相關(guān)文章
在JavaScript中,可以使用HTML5提供的Canvas元素來進行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級排版特效2024-09-09
這篇文章主要介紹了微信js-sdk分享功能接口常用邏輯封裝,簡單介紹了分享功能接口的功能、邏輯封裝與使用方法,需要的朋友可以參考下2016-10-10
Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
給Javascript數(shù)組插入一條記錄的代碼...2007-08-08
uni-app的nvue說白了就是weex的那一套東西，uni-app集成了weex的 SDK，也就實現(xiàn)了App端的原生渲染能力。本文將介紹uniapp遇到的一些坑，分享給大家。2021-06-06
在這篇文章中，我將分享一組JavaScript的技巧、竅門和最佳實踐，這些都是JavaScript程序員應該知曉的，不管他們是使用在瀏覽器/引擎上，還是服務器端（SSJS——Service Side JavaScript）JavaScript解釋器上2014-03-03
下面小編就為大家?guī)硪黄猨s中 計算兩個日期間的工作日的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
經(jīng)常會看到a如何繼承b的問題；決定寫一下，其實繼承就是繼承父級的屬性和方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要為大家詳細介紹了javascript實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JS多個表單數(shù)據(jù)提交下的serialize()應用實例分析
這篇文章主要介紹了JS多個表單數(shù)據(jù)提交下的serialize()應用,接合實例形式分析了原生javascript實現(xiàn)多個表單提交時serialize操作相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2019-08-08