首頁  >  文章  >  web前端  >  Javascript玩繼承(一)_javascript技巧

Javascript玩繼承(一)_javascript技巧

WBOY
WBOY原創
2016-05-16 16:49:021193瀏覽

Javascript究竟是一門物件導向的語言,還是一門支援物件的語言,我想每個人都有自己的看法。那些Javascript忠實的Fans一定講Javascript是一門物件導向的語言,像《Javascript王者歸來》一書中對Javascript的說法是基於原型的物件導向。我談談我個人的看法。物件導向的三個特徵,繼承,多型,封裝,Javascript雖然實作起來不像Java,C#等物件導向的語言來得快,但畢竟也有一定的支援。因此說Javascript是物件導向的語言是有著一定道理的,但是從繼承這個部分來談,一系列的繼承法,但是每個繼承法都無法實現真正物件導向語言的威力,因此,說他物件導向有著一定的牽強。綜上,我對Javascript的理解,更願意把它叫做一種簡化的物件導向,或是說"偽"物件導向(這個偽字絕無貶義)。

今天就從物件導向這個第一個特徵:繼承來談。
什麼是繼承?這個我不想廢話,有一隻動物,有一個人,有一個女孩,這個就是一個最簡單,也是典型的繼承鏈。
在C#等物件導向中,很容易。

複製程式碼 程式碼如下:

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

那麼在Javascript中,沒有類,沒有繼承的提供實現,我們該怎麼做呢? 物件偽裝(建構繼承法)

什麼是物件偽裝呢?我們可能叫做構造繼承比較容易理解一些。顧名思義,就是用建構子來玩繼承。其實是說把父類別的建構子當成是一個普通的方法,放到子類別的建構函式中去執行,這樣的話,當建構物件的時候,子類別的物件當然就可以建構父類別的方法啦!

還是用上面的例子,程式碼如下:

複製程式碼 程式碼如下:
f .Run=function(){alert("I can run");};
}
function People(name)
{
//在這裡就是傳入了父類別的建構方法,然後執行父類別的建構方法,這個時候就//可以使用父類別中的方法了。
        this.father=Animal;
        this.father();
        //記得刪除,否則將使用子類別新增為父類別的方法。否則在修改到子類別中會被修改到子類別中的方法。
delete this.Father;
this.name=name;
        this.Say=function(){alert("My name is " this.name);}
}
}
function (name,age)
{
        this.father=People;
        this.father(name);         this. Introduce=function(){alert("My name is " this.name ".I am " this.age);};
}



這樣的話就實作了一個繼承鏈,測試下:

複製程式碼

程式碼如下:var a=new Animal();
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();

結果如下:

a.

b.

c.

d.

e.

f.

測試成功!

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

複製程式碼 程式碼如下:

function Animal(name)


function Animal(name)
{
this.Run=function(){alert("I can Run");};
}
function People(name)
{
        //使用call方法實作繼承
 . father=Animal;
        this.father.call(this,name);
        this.name=name;
        this.name=name;
 ;};
}
function Girl(name,age)
{
        //使用apply方法來實現繼承
    this,new Array(name));
        this.age=age;
        this.Introduce=function(){alert("Myname is " this.name "this。 ; }


用一樣的測試程式碼,發現測試一樣成功。

如果是新手,可能看後面的這兩段程式碼有些暈暈乎乎,什麼是call,什麼是apply呢?好,在玩繼承這個專題中,我加入一個增刊系列,如果對這個有不了解,可以看我的這個文章:《玩轉法:call和apply 》。 物件偽裝,這只是一種實現繼承的方式,在接下來的文章,我會繼續寫出其他的繼承方式以及幾種繼承方式的優劣,歡迎繼續關注。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn