欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript編程中幾種繼承方式比較分析

 更新時間:2015年11月28日 10:51:03   作者:期待秋天的葉  
這篇文章主要介紹了Javascript編程中幾種繼承方式比較分析,較為詳細的分析了JavaScript繼承的原理并對比分析了幾種繼承方式的實現(xiàn)技巧,需要的朋友可以參考下

本文實例分析了Javascript編程中幾種繼承方式比較。分享給大家供大家參考,具體如下:

開篇

從'嚴格'意義上說,javascript并不是一門真正的面向?qū)ο笳Z言。這種說法原因一般都是覺得javascript作為一門弱類型語言與類似java或c#之類的強型語言的繼承方式有很大的區(qū)別,因而默認它就是非主流的面向?qū)ο蠓绞剑踔辆褂泻芏鄷鴮⑵涿枋鰹?非完全面向?qū)ο?語言。其實個人覺得,什么方式并不重要,重要的是是否具有面向?qū)ο蟮乃枷耄fjavascript不是面向?qū)ο笳Z言的,往往都可能沒有深入研究過javascript的繼承方式,故特撰此文以供交流。

為何需要利用javascript實現(xiàn)繼承

早期pc機器的性能確實不敢恭維,所有的壓力全在服務器端,客戶端瀏覽器純屬擺設(shè)。再加上那時流行的table布局以及電話線的上網(wǎng)方式導致瀏覽一個網(wǎng)頁十分的卡;而今互聯(lián)網(wǎng)時代飛速發(fā)展,個人電腦硬件得到了極大提升,客戶端瀏覽器的性能也十分的酸爽,web開發(fā)的模式也在悄悄改變:服務端不再像以前那樣“辛苦”,取而代之的是盡可能的讓瀏覽器承擔更多的任務,如此一來,壓力分攤到每個客戶端上,企業(yè)不但節(jié)省成本,隨之也讓web前端開發(fā)變的更加有趣--越來越多的前端框架層出不窮,甚至出現(xiàn)了許多前端的MVC框架。在這種背景下,javascript的角色已經(jīng)絕對不是只做一些簡單的驗證,發(fā)送一些請求或者操作一些DOM,更多的需要擔任類似前端路由和業(yè)務層的角色,并且javascript需要做大量的邏輯性任務,這里面就包括前臺數(shù)據(jù)的抽離(即model),而只有運用面向?qū)ο蟮乃季S才能很好的對抽離數(shù)據(jù)進行處理,因此繼承就在這里顯得舉足輕重。

從一個簡單的需求開始

現(xiàn)從前臺抽離一個model名為Person,其有基本屬性name和age,默認每個人都會說話,因此將說話的功能say放在了原型對象上,以供每個實例享用?,F(xiàn)在對于Man來說,它需要繼承Person的基本屬性,并且在此基礎(chǔ)上添加自己特有的屬性。

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

下面介紹幾種主流的繼承方式。

1.原型鏈繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

這種繼承方式很直接,為了獲取Person的所有屬性方法(實例上的和原型上的),直接將父類的實例new Person('pursue')賦給了子類的原型,其實子類的實例man1,man2本身是一個完全空的對象,所有的屬性和方法都得去原型鏈上去找,因而找到的屬性方法都是同一個。
所以直接利用原型鏈繼承是不現(xiàn)實的。

2.利用構(gòu)造函數(shù)繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

這里子類的在構(gòu)造函數(shù)里利用了apply去調(diào)用父類的構(gòu)造函數(shù),從而達到繼承父類屬性的效果,比直接利用原型鏈要好的多,至少每個實例都有自己那一份資源,但是這種辦法只能繼承父類的實例屬性,因而找不到say方法,為了繼承父類所有的屬性和方法,則就要修改原型鏈,從而引入了組合繼承方式。

3.組合繼承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

需要注意的是man1和man2的實例屬性其實是覆蓋了原型屬性,但是并沒要覆蓋掉原型上的say方法(因為它們沒有),所以這里man1.say === man2.say依然返回true,因而需要十分小心沒有覆蓋掉的原型屬性,因為它是所有實例共有的。

4.寄生組合繼承

說實話我真不知道下面的這種形式叫這名字,但是它確實是最流行,最經(jīng)典的javascript的繼承方式。其實,只需要明白原型對象的結(jié)構(gòu)即可:

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

其實寄生組合繼承和上面的組合繼承區(qū)別僅在于構(gòu)造子類原型對象的方式上(a.和b.),這里用到了Object.creat(obj)方法,該方法會對傳入的obj對象進行淺拷貝,類似于:

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

因此,a.會將子類的原型對象與父類的原型對象進行很好的連接,而并不像一般的組合繼承那樣直接對子類的原型進行復制(如Man.prototype = new Person();),這樣只是很暴力的在對屬性進行覆蓋。而寄生組合繼承方式則對實例屬性和原型屬性分別進行了繼承,在實現(xiàn)上更加合理。

注意:代碼b.并不會改變instanceof的結(jié)果,但是對于需要用到construcor的場景,這么做更加嚴謹。

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

相關(guān)文章

  • javascript實現(xiàn)拖動層效果代碼(符合標準且兼容IE,chrome,firefox)

    javascript實現(xiàn)拖動層效果代碼(符合標準且兼容IE,chrome,firefox)

    javascript實現(xiàn)拖動層,原理很簡單,就是根據(jù)鼠標的位置實時設(shè)置層的left和top
    2013-06-06
  • eval的兩組性能測試數(shù)據(jù)

    eval的兩組性能測試數(shù)據(jù)

    最近對eval火爆的討論,教主 @Franky 和 灰大 @otakustay 也給了精彩的數(shù)據(jù)分析,剛好之前也做過類似的測試,我也跟風湊個熱鬧,提供兩組數(shù)據(jù)供大家參考
    2012-08-08
  • javascript使用canvas實現(xiàn)餅狀圖效果

    javascript使用canvas實現(xiàn)餅狀圖效果

    這篇文章主要為大家詳細介紹了javascript使用canvas實現(xiàn)餅狀圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法

    JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法

    這篇文章主要介紹了JS簡單實現(xiàn)城市二級聯(lián)動選擇插件的方法,涉及javascript實現(xiàn)select遍歷與設(shè)置技巧,非常簡單實用,需要的朋友可以參考下
    2015-08-08
  • bootstrap 設(shè)置checkbox部分選中效果

    bootstrap 設(shè)置checkbox部分選中效果

    本篇文章主要介紹了bootstrap 設(shè)置checkbox部分選中效果,主要涉及到js各個方面的內(nèi)容,對于bootstrap設(shè)置checkbox選中效果感興趣的朋友可以參考一下吧
    2017-04-04
  • JavaScript選擇排序算法原理與實現(xiàn)方法示例

    JavaScript選擇排序算法原理與實現(xiàn)方法示例

    這篇文章主要介紹了JavaScript選擇排序算法原理與實現(xiàn)方法,簡單分析了選擇排序算法的概念、原理并結(jié)合實例形式分析了JavaScript選擇排序算法的相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
    2018-08-08
  • js動態(tài)添加帶圓圈序號列表的實例代碼

    js動態(tài)添加帶圓圈序號列表的實例代碼

    這篇文章主要介紹了js動態(tài)添加帶圓圈序號列表的實例代碼,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-02-02
  • JS實現(xiàn)判斷圖片是否加載完成的方法分析

    JS實現(xiàn)判斷圖片是否加載完成的方法分析

    這篇文章主要介紹了JS實現(xiàn)判斷圖片是否加載完成的方法,結(jié)合實例形式分析了javascript常見的圖片加載完成判斷方法與相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07
  • JavaScript仿微博發(fā)布信息案例

    JavaScript仿微博發(fā)布信息案例

    這篇文章主要為大家詳細介紹了JavaScript仿微博發(fā)布信息案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Javascript讀寫cookie的實例源碼

    Javascript讀寫cookie的實例源碼

    今天小編就為大家分享一篇關(guān)于Javascript讀寫cookie的實例源碼,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-03-03

最新評論