一、面相對(duì)象繼承機(jī)制 以下用圖來(lái)可視化地表示圖形之間的復(fù)雜對(duì)象繼承關(guān)系,形狀和它的子類之間關(guān)系的UML圖示:
在UML中,每個(gè)方框表示一個(gè)類,由類名說(shuō)明。三角形 、矩形和五邊形頂部的線段匯集在一起,指向形狀,說(shuō)明這些類都由形狀繼承而來(lái)。同樣,從正方形指向矩形的箭頭說(shuō)明了它們之間的繼承關(guān)系。二、ECMAScript繼承機(jī)制的實(shí)現(xiàn) 要用ECMAScript實(shí)現(xiàn)繼承機(jī)制,您可以從要繼承的基類入手。所有開(kāi)發(fā)者定義的類都可作為基類。出于安全原因,本地類和宿主類不能作為基類,這樣可以防止公用訪問(wèn)編譯過(guò)的瀏覽器級(jí)的代碼,因?yàn)檫@些代碼可以被用于惡意攻擊。 選定基類后,就可以創(chuàng)建它的子類了,創(chuàng)建的子類將繼承超類的所有屬性和方法,包括構(gòu)造函數(shù)及方法的實(shí)現(xiàn)。記住,所有屬性和方法都是公用的,因此子類可直接訪問(wèn)這些方法。子類還可添加超類中沒(méi)有的新屬性和方法,也可以覆蓋超類的屬性和方法。由于JS并不是正統(tǒng)的面向?qū)ο笳Z(yǔ)言,一些名詞也需要做出改變。三、ECMAScript繼承的方式 ECMAScript語(yǔ)言中將被繼承的類(基類)稱為超類型,子類(或派生類)稱為子類型。和其他功能一樣,ECMAScript實(shí)現(xiàn)繼承的方式不止一種。這是因?yàn)?a href="http://www.survivalescaperooms.com/article.asp?typeid=160">javaScript中的繼承機(jī)制并不是明確規(guī)定的,而是通過(guò)模仿實(shí)現(xiàn)的。這意味著所有的繼承細(xì)節(jié)并非完全由解釋程序處理。作為開(kāi)發(fā)者,你有權(quán)決定最適用的繼承方式。下面為您介紹幾種具體的繼承方式。(1)原型鏈方式 繼承這種形式在ECMAScript中原本是用于原型鏈的。上一篇博文已經(jīng)介紹了創(chuàng)建對(duì)象的原型方式。原型鏈擴(kuò)展了這種方式,以一種有趣的方式實(shí)現(xiàn)繼承機(jī)制。PRototype 對(duì)象是個(gè)模板,要實(shí)例化的對(duì)象都以這個(gè)模板為基礎(chǔ)。總而言之,prototype 對(duì)象的任何屬性和方法都被傳遞給那個(gè)類的所有實(shí)例。原型鏈利用這種功能來(lái)實(shí)現(xiàn)繼承機(jī)制。我們來(lái)看一個(gè)例子:
function A() {//超類型A中必須沒(méi)有參數(shù) this.color = "red"; this.showColor = function () { return this.color; }; }; function B() {//子類型B this.name = "John"; this.showName = function () { return this.name; }; }; B.prototype = new A();//子類型B繼承了超類型A,通過(guò)原型,形成鏈條 var a = new A(); var b = new B(); document.write(a.showColor());//輸出:blue document.write(b.showColor());//輸出:red document.write(b.showName());//輸出:John在原型鏈中,instanceof運(yùn)算符的運(yùn)行方式也很獨(dú)特。對(duì)B的所有實(shí)例,instanceof為A和B都返回true。ECMAScript的弱類型世界中,這是極其有用的工具,不過(guò)使用對(duì)象冒充時(shí)不能使用它。例如:
var b = new B(); document.write(b instanceof A);//輸出:true document.write(b instanceof B);//輸出:true使用原型鏈方式實(shí)現(xiàn)了繼承,但是這種方式無(wú)法共享和子類型給超類型傳遞參數(shù)。我們可以借用構(gòu)造函數(shù)方式(也就是對(duì)像冒充)的方式來(lái)解決這兩個(gè)問(wèn)題。(2)對(duì)象冒充方式 對(duì)象冒充方式的其原理如下:構(gòu)造函數(shù)使用this關(guān)鍵字給所有屬性和方法賦值(即采用對(duì)象聲明的構(gòu)造函數(shù)方式)。因?yàn)闃?gòu)造函數(shù)只是一個(gè)函數(shù),所以可使A構(gòu)造函數(shù)成為B的方法,然后調(diào)用它。B就會(huì)收到A的構(gòu)造函數(shù)中定義的屬性和方法。例如,用下面的方式改寫(xiě)上面的例子創(chuàng)建對(duì)象A和B:call()方法
function A(Color) {//創(chuàng)建超類型A this.color = Color; this.showColor = function () { return this.color; }; }; function B(Color,Name) {//創(chuàng)建子類型B A.call(this, Color);//對(duì)象冒充,給超類型傳參 this.name = Name;//新添加的屬性 this.showName = }; var a = new A("blue"); var b = new B("red", "John"); document.write(a.showColor());//輸出:blue document.write(b.showColor());//輸出:red document.write(b.showName());//輸出:John ?apply()方法和上面call()方法唯一的區(qū)別就是在子類型B中的代碼:A.call(this,arguments);//對(duì)象冒充,給超類型傳參 當(dāng)然,只有超類型中的參數(shù)順序與子類型中的參數(shù)順序完全一致時(shí)才可以傳遞參數(shù)對(duì)象。如果不是,就必須創(chuàng)建一個(gè)單獨(dú)的數(shù)組,按照正確的順序放置參數(shù)。 使用對(duì)象冒充方式雖然解決了共享和傳參的問(wèn)題,但是沒(méi)有原型,復(fù)用就更不可能了,所以我們組合上述的兩種方式,即原型鏈方式和對(duì)象冒充的方式實(shí)現(xiàn)JS的繼承。(3)混合方式 這種繼承方式使用構(gòu)造函數(shù)定義類,并非使用任何原型。對(duì)象冒充的主要問(wèn)題是必須使用構(gòu)造函數(shù)方式,這不是最好的選擇。不過(guò)如果使用原型鏈,就無(wú)法使用帶參數(shù)的構(gòu)造函數(shù)了。開(kāi)發(fā)者如何選擇呢?答案很簡(jiǎn)單,兩者都用。由于這種混合方式使用了原型鏈,所以instanceof運(yùn)算符仍能正確運(yùn)行。 在上一篇文章,創(chuàng)建對(duì)象的最好方式是用構(gòu)造函數(shù)定義屬性,用原型定義方法。這種方式同樣適用于繼承機(jī)制,用對(duì)象冒充繼承構(gòu)造函數(shù)的屬性,用原型鏈繼承prototype對(duì)象的方法。用這兩種方式重寫(xiě)前面的例子,代碼如下:
function A(Color) { this.color = Color; }; A.prototype.showColor = function () { return this.color; }; function B(Color, Name) { A.call(this, Color);//對(duì)象冒充 this.name = Name; }; B.prototype = new A();//使用原型鏈繼承 B.prototype.showName = function () { return this.name; }; var a = new A("blue"); var b = new B("red", "John"); document.write(a.showColor());//輸出:blue document.write(b.showColor());//輸出:red document.write(b.showName());//輸出:John繼承的方式和創(chuàng)建對(duì)象的方式有一定的聯(lián)系,推薦使用的繼承方式還時(shí)原型鏈和對(duì)象冒充的混合方式。使用這種混合方式可以避免一些不必要的問(wèn)題。
新聞熱點(diǎn)
疑難解答
圖片精選