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

Javascript玩轉(zhuǎn)繼承(一)

 更新時間:2014年05月08日 17:50:55   作者:  
最近一直在學Javascript,打算寫一些文章,算做自己的學習心得吧,也可以算是學習筆記。沒有系統(tǒng)的知識點,太基礎(chǔ)的不想寫,主要是寫一些自己覺得有價值的地方

Javascript究竟是一門面向?qū)ο蟮恼Z言,還是一門支持對象的語言,我想每個人都有著自己的看法。那些Javascript忠實的Fans一定講Javascript是一門面向?qū)ο蟮恼Z言,像《Javascript王者歸來》一書中對Javascript的說法是基于原型的面向?qū)ο?。我談?wù)勎覀€人的看法。面向?qū)ο蟮娜齻€特征,繼承,多態(tài),封裝,Javascript雖然實現(xiàn)起來不像Java,C#等面向?qū)ο蟮恼Z言來得快,但是畢竟也有著一定的支持。因此說Javascript是面向?qū)ο蟮恼Z言是有著一定道理的,但是從繼承這個部分來談,一系列的繼承法,但是每個繼承法都無法實現(xiàn)真正面向?qū)ο笳Z言的威力,因此,說他面向?qū)ο笥兄欢ǖ臓繌姟>C上,我對Javascript的理解,更愿意把它叫做一種簡化的面向?qū)ο?,或者說"偽"面向?qū)ο螅ㄟ@個偽字絕無貶義)。

今天就從面向?qū)ο筮@個第一個特征:繼承來談。
什么是繼承?這個我不想廢話,有一只動物,有一個人,有一個女孩,這個就是一個最簡單,也是典型的繼承鏈。
在C#等面向?qū)ο笾校苋菀住?

復制代碼 代碼如下:

class Animal
{    }
class People:Animal
{    }
class Girl:People
{    }
 

那么在Javascript中,沒有類,沒有繼承的提供實現(xiàn),我們該怎么做呢?
對象偽裝(構(gòu)造繼承法)
什么是對象偽裝呢?我們可能叫做構(gòu)造繼承更容易理解一些。顧名思義,就是用構(gòu)造函數(shù)來玩繼承。其實就是說把父類的構(gòu)造函數(shù)當成是一個普通的方法,放到子類的構(gòu)造函數(shù)中去執(zhí)行,這樣的話,當構(gòu)造對象的時候,子類的對象當然就可以構(gòu)造父類的方法啦!

還是用上面的那個例子,代碼如下:

復制代碼 代碼如下:

function Animal()
{
        this.Run=function(){alert("I can run");};
}
function People(name)
{
//在這里就是傳入了父類的構(gòu)造方法,然后執(zhí)行父類的構(gòu)造方法,這個時候就//可以使用父類中的方法了。
        this.father=Animal;
        this.father();
        //記得要刪除,否則在子類添加于父類相同名稱的方法時,會修改到父類。
delete this.Father;
this.name=name;
        this.Say=function(){alert("My name is "+this.name);}
}
function Girl(name,age)
{
        this.father=People;
        this.father(name);
        delete this.father;
        this.age=age;
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);};
}

這樣的話就實現(xiàn)了一個繼承鏈,測試下:

復制代碼 代碼如下:

var a=new Animal();
a.Run();
var p=new People("Windking");
p.Run();
p.Say();
var g=new Girl("Xuan",22);
g.Run();
g.Say();
g.Introduce();

結(jié)果如下:

a.

b.

c.

d.

e.

f.

測試成功!

我們來總結(jié)一下這段代碼的關(guān)鍵,指定父類,聲明父類對象,然后刪除臨時變量,您是否覺得有些麻煩呢?至少我是這么覺得的,一旦忘記了delete,還要承擔父類被修改的風險,針對這個,我們對這個用call和apply來改進!
接著看代碼,還是上面的例子(為了更加容易大家理解,需求改變一下,Animal有了名字):

復制代碼 代碼如下:

function Animal(name)
{
        this.Run=function(){alert("I can Run");};
}
function People(name)
{
        //使用call方法實現(xiàn)繼承
this.father=Animal;
        this.father.call(this,name);
        this.name=name;
        this.SayName=function(){alert("My name is "+this.name;);};
}
function Girl(name,age)
{
        //使用apply方法來實現(xiàn)繼承
        this.father=People;
        this.father.apply(this,new Array(name));
        this.age=age;
        this.Introduce=function(){alert("My name is "+this.name+".I am "+this.age);};
}

用一樣的測試代碼,發(fā)現(xiàn)測試一樣成功。

如果是新手,可能看后面的這兩段代碼有些暈暈乎乎,什么是call,什么是apply呢?好,在玩轉(zhuǎn)繼承這個專題中,我加入一個增刊系列,如果對這個有不了解,可以看我的這個文章:《玩轉(zhuǎn)方法:call和apply 》。
對象偽裝,這只是一種實現(xiàn)繼承的方式,在接下來的文章,我會繼續(xù)寫出其他的繼承方式以及幾種繼承方式的優(yōu)劣,歡迎繼續(xù)關(guān)注。

相關(guān)文章

  • JS 事件延遲執(zhí)行說明分析

    JS 事件延遲執(zhí)行說明分析

    為了避免用戶鼠標無意識劃過,而觸發(fā)事件。浪費客戶端資源。
    2010-05-05
  • JavaScript模板引擎原理與用法詳解

    JavaScript模板引擎原理與用法詳解

    這篇文章主要介紹了JavaScript模板引擎原理與用法,結(jié)合實例形式詳細分析了javascript模版引擎相關(guān)概念、原理、定義及使用方法,需要的朋友可以參考下
    2018-12-12
  • Div上下居中

    Div上下居中

    Div上下居中...
    2007-02-02
  • JavaScript作用域深度剖析之動態(tài)作用域

    JavaScript作用域深度剖析之動態(tài)作用域

    這篇文章主要為大家介紹了?JavaScript作用域?qū)W習之動態(tài)作用域深度剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-05-05
  • JavaScript截斷字符串的方法

    JavaScript截斷字符串的方法

    這篇文章主要介紹了JavaScript截斷字符串的方法,涉及javascript字符串截取的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • JS發(fā)起HTTP請求的多種方式總結(jié)

    JS發(fā)起HTTP請求的多種方式總結(jié)

    這篇文章主要為大家詳細介紹了JavaScript發(fā)起HTTP請求的多種方式,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起學習一下
    2023-11-11
  • js如何獲取網(wǎng)頁所有圖片

    js如何獲取網(wǎng)頁所有圖片

    這篇文章主要為大家詳細介紹了js如何獲取網(wǎng)頁所有圖片,js獲取網(wǎng)頁所有圖片的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 微信小程序批量上傳圖片到七牛(推薦)

    微信小程序批量上傳圖片到七牛(推薦)

    這篇文章主要介紹了微信小程序批量上傳圖片到七牛,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • 原生js和jQuery隨意改變div屬性style的名稱和值

    原生js和jQuery隨意改變div屬性style的名稱和值

    用原生js和jQuery實現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果,這個實例比較實用,新手朋友們可以看看
    2014-10-10
  • js為什么不能正確處理小數(shù)運算?

    js為什么不能正確處理小數(shù)運算?

    這篇文章主要介紹了js不能正確處理小數(shù)運算的原因,為大家解除js為什么不能正確處理小數(shù)運算的疑慮,感興趣的小伙伴們可以參考一下
    2015-12-12

最新評論