javascript繼承之為什么要繼承
更新時(shí)間：2012年11月10日 16:10:10 作者：
本文詳細(xì)介紹javascript的繼承等各方面相關(guān)知識(shí)
Quiz1
Javascript真的需要類（Class）么？
我們首先先看下其他有類（Class）的面向?qū)ο笳Z言（如：Java）的一些特性。
父類與子類
父類（Superclass）和子類（Subclass），并不是為了解決父親與兒子的問題，而是為了解決類的包含關(guān)系的，我們用Sub表示“子類”，用Sup表示“父類”，則有：
Sub Sup
這是有區(qū)別的，例如通常我們能夠?qū)⒆宇惍?dāng)成父類來使用，但認(rèn)人的時(shí)候我們并不能把兒子當(dāng)成父親。
或者可以這么說，父類和子類不是為了解決類間存在相同方法或者屬性的。
舉個(gè)例子
有人喜歡這樣做：
我們需要一些動(dòng)物的類，以便在屏幕上創(chuàng)建一些移動(dòng)的動(dòng)物，但移動(dòng)的動(dòng)物有些在空中飛行，有些在路上行走。
所以創(chuàng)建兩個(gè)父類，一個(gè)是Fly，一個(gè)是Walk：
Class Fly{
Fly(){}
}
Class Walk{
Walk(){}
}
然后獅子們（還可以再建些其他的在路上行走的動(dòng)物）就屬于Walk類，老鷹們（也還可以再建些其他在天上飛行的動(dòng)物）就屬于Fly類：
Class Lion extend Walk{
}
Class Eagle extend Fly{
}
最后對(duì)Lion和Eagle類創(chuàng)建一些實(shí)例，調(diào)用相應(yīng)的方法，屏幕上就會(huì)有一些獅子和老鷹在移動(dòng)了。
但這可能并不是一個(gè)好的設(shè)計(jì)，比如明天老板突然一拍大腦，他要有一種叫天馬（Pegasus）的動(dòng)物，它們即會(huì)在天上飛，又會(huì)在路上走，時(shí)而要飛行，時(shí)候要行走。
在這種情況下，這個(gè)方案就全然無用了。
為什么這個(gè)設(shè)計(jì)失敗了？
繼承是有條件的，子類必須能嚴(yán)格的向上轉(zhuǎn)型（變成父類）。
在上面這個(gè)例子中：
獅子（Lion）被假設(shè)等同于行走動(dòng)物（Walk），老鷹（Eagle）被假設(shè)等同于飛行動(dòng)物（Fly）。
這看起來很成功，因?yàn)樽宇惸車?yán)格向上轉(zhuǎn)型，但他有隱患。
當(dāng)有一種天馬（Pegasus）介入到里面的時(shí)候，我們才發(fā)現(xiàn)獅子其實(shí)只是“會(huì)行走的動(dòng)物”，老鷹其實(shí)只是“會(huì)飛行的動(dòng)物”，這不意味著動(dòng)物一輩子只能飛行或者行走，所以即會(huì)飛行又會(huì)行走的天馬就找不到自己的歸屬了。
這個(gè)例子很好的證明了，子類和父類不是為了解決類間具有相同的方法的：
一些動(dòng)物都會(huì)行走，需要擁有行走（Walk）這個(gè)方法，但這不應(yīng)該由子類和父類實(shí)現(xiàn)。
組合
我們可以這樣解決這個(gè)問題：
Class Lion{
walker = new Walk();
walk(){
return walker.walk();
}
}
Class Eagle{
flyer = new Fly();
fly(){
return flyer.fly();
}
}
Class Pegasus{
walker = new Walk();
flyer = new Fly();
walk(){
return walker.walk();
}
fly(){
return flyer.fly();
}
}
組合是簡(jiǎn)單的在新類內(nèi)部創(chuàng)建原有類對(duì)象。所以組合才是為了解決類間具有相同的方法的。在這個(gè)例子里面：
Walk被當(dāng)成“會(huì)行走的動(dòng)物應(yīng)該擁有的方法集合”，同理Fly被當(dāng)成“會(huì)行走的動(dòng)物應(yīng)該擁有的方法集合”，所以對(duì)于天馬（Pegasus），我們只需要對(duì)Walk和Fly進(jìn)行組合就行了。
繼承的目的
繼承并非代碼復(fù)用的唯一方法，但繼承有他的優(yōu)勢(shì)：
子類可以向上轉(zhuǎn)型變成父類。
這樣我們就可以忽略所有的子類差異，當(dāng)成相同的類來操作，例如：
我們有方法fn(A)，fn(B)，這兩個(gè)方法實(shí)際是相似的，我們想復(fù)用他們。
則我們可以通過設(shè)立一個(gè)父類C，其中A是C的子類，B是C的子類，那么fn(C)就可以復(fù)用在A和B身上了。
回到Javascript
但回到Javascript，我們發(fā)現(xiàn)上面的例子是不成立的。
因?yàn)镴avascript本身是弱類型語言，它并不會(huì)在操作前（因?yàn)樗挥镁幾g）關(guān)注自己操作的對(duì)象類型是什么。他只會(huì)執(zhí)行成功，或者發(fā)生錯(cuò)誤。
這時(shí)候，繼承顯得并不必要了。那么類也就同樣不是必要的了。
I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.
——Douglas Crockford
我寫Javascript代碼已經(jīng)8年了，但我從來沒有發(fā)現(xiàn)需要使用超類函數(shù)。超類的想法在古典設(shè)計(jì)模式是非常重要的，但這在以原型和函數(shù)為基調(diào)的模式中并不必要。我現(xiàn)在覺得，早期我試圖讓Javascript支持經(jīng)典模式是一個(gè)錯(cuò)誤的決定。
安全環(huán)境
當(dāng)然，你可以手動(dòng)去判斷類型，控制參數(shù)的類型，進(jìn)而提供一個(gè)較為安全的環(huán)境。
例如同樣作為弱類型腳本語言的PHP，為了模擬強(qiáng)類型面向?qū)ο笳Z言設(shè)置安全環(huán)境，不得不這么做：
class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct instanceof BookProduct ) ){
die( "輸入錯(cuò)誤的類型" );
}
//如果類型正確就執(zhí)行一些代碼
}
}
——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
但這只是一個(gè)非常丑陋的方案而已。
經(jīng)典繼承語法糖實(shí)現(xiàn)
不過經(jīng)典繼承依然是許多人喜歡的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的實(shí)現(xiàn)方案。
其中較為常見的方案中，語法大概是這樣的：
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
}
});
var Dancer = Person.extend({
init: function(){
this._super( true );
}
});
var n = new Dancer();
alert(n.dancing); //true
最重要的實(shí)現(xiàn)是對(duì)this._super的實(shí)現(xiàn)，其實(shí)extend函數(shù)只是將傳進(jìn)來的對(duì)象重新組裝了一下，變成一個(gè)原型對(duì)象，新構(gòu)造函數(shù)的prototype里。
具體實(shí)現(xiàn)請(qǐng)查看參考文獻(xiàn)1。
ECMAScript 6的經(jīng)典繼承語法糖
對(duì)于類庫各自實(shí)現(xiàn)，導(dǎo)致經(jīng)典繼承語法眾多，ECMA組織貌似不太滿意，他們?cè)噲D在ECMAScript 6中加入更加直觀的經(jīng)典繼承語法糖：
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log("Woof!");
}
}
總結(jié)
實(shí)際上，Javascript中經(jīng)典繼承并不是必要的。
然而基于許多人喜歡經(jīng)典繼承模型，所以在新版的ECMAScript 6中提供了相關(guān)語法糖。
不過在中國，前端想廣泛使用該語法糖應(yīng)該是一個(gè)遙遠(yuǎn)的故事……
Quiz2
那Javascript特有的繼承呢？
原型繼承
原型繼承不是解決經(jīng)典繼承中的集合包含關(guān)系的，實(shí)際上原型繼承是解決從屬關(guān)系的，用數(shù)學(xué)表達(dá)就是：
Sub.prototype ∈ Sup
子級(jí)構(gòu)造函數(shù)（子類型）原型是一個(gè)父級(jí)構(gòu)造函數(shù)（父類型）構(gòu)建的實(shí)例對(duì)象。原型實(shí)際上是子類型實(shí)例中需要共享的東西：
function Being(){
this.living = true;
}
Being.prototype.walk = function(){
alert("I' m walking");
};
function Dancer(){
this.dancing = true;
}
Dancer.prototype = new Being();
Dancer.prototype.dance = function(){
alert("I'm dancing");
};
var one = new Dancer();
one.walk();
one.dance();
利用借用、寄生等技術(shù)可以產(chǎn)生很多不同的繼承效果，但這些技術(shù)都只是為了解決原型繼承中屬性和方法一些公用與非公用的問題罷了。由于篇幅問題就不展開討論了，有興趣可以參考《Javascript高級(jí)程序設(shè)計(jì)》相關(guān)內(nèi)容。
思考題
1.文章開頭關(guān)于天馬（Pegasus）的題目，如果在Javascript上，應(yīng)該如何設(shè)計(jì)呢？例如我們有下列兩個(gè)類型：
function Walk(){
this.walk = function(){
//walk
};
}
function Fly(){
this.fly = function(){
//fly
};
}
Javascript真的需要類（Class）么？
我們首先先看下其他有類（Class）的面向?qū)ο笳Z言（如：Java）的一些特性。
父類與子類
父類（Superclass）和子類（Subclass），并不是為了解決父親與兒子的問題，而是為了解決類的包含關(guān)系的，我們用Sub表示“子類”，用Sup表示“父類”，則有：
Sub Sup
這是有區(qū)別的，例如通常我們能夠?qū)⒆宇惍?dāng)成父類來使用，但認(rèn)人的時(shí)候我們并不能把兒子當(dāng)成父親。
或者可以這么說，父類和子類不是為了解決類間存在相同方法或者屬性的。
舉個(gè)例子
有人喜歡這樣做：
我們需要一些動(dòng)物的類，以便在屏幕上創(chuàng)建一些移動(dòng)的動(dòng)物，但移動(dòng)的動(dòng)物有些在空中飛行，有些在路上行走。
所以創(chuàng)建兩個(gè)父類，一個(gè)是Fly，一個(gè)是Walk：
復(fù)制代碼 代碼如下:
Class Fly{
Fly(){}
}
Class Walk{
Walk(){}
}
然后獅子們（還可以再建些其他的在路上行走的動(dòng)物）就屬于Walk類，老鷹們（也還可以再建些其他在天上飛行的動(dòng)物）就屬于Fly類：
復(fù)制代碼 代碼如下:
Class Lion extend Walk{
}
Class Eagle extend Fly{
}
最后對(duì)Lion和Eagle類創(chuàng)建一些實(shí)例，調(diào)用相應(yīng)的方法，屏幕上就會(huì)有一些獅子和老鷹在移動(dòng)了。
但這可能并不是一個(gè)好的設(shè)計(jì)，比如明天老板突然一拍大腦，他要有一種叫天馬（Pegasus）的動(dòng)物，它們即會(huì)在天上飛，又會(huì)在路上走，時(shí)而要飛行，時(shí)候要行走。
在這種情況下，這個(gè)方案就全然無用了。
為什么這個(gè)設(shè)計(jì)失敗了？
繼承是有條件的，子類必須能嚴(yán)格的向上轉(zhuǎn)型（變成父類）。
在上面這個(gè)例子中：
獅子（Lion）被假設(shè)等同于行走動(dòng)物（Walk），老鷹（Eagle）被假設(shè)等同于飛行動(dòng)物（Fly）。
這看起來很成功，因?yàn)樽宇惸車?yán)格向上轉(zhuǎn)型，但他有隱患。
當(dāng)有一種天馬（Pegasus）介入到里面的時(shí)候，我們才發(fā)現(xiàn)獅子其實(shí)只是“會(huì)行走的動(dòng)物”，老鷹其實(shí)只是“會(huì)飛行的動(dòng)物”，這不意味著動(dòng)物一輩子只能飛行或者行走，所以即會(huì)飛行又會(huì)行走的天馬就找不到自己的歸屬了。
這個(gè)例子很好的證明了，子類和父類不是為了解決類間具有相同的方法的：
一些動(dòng)物都會(huì)行走，需要擁有行走（Walk）這個(gè)方法，但這不應(yīng)該由子類和父類實(shí)現(xiàn)。
組合
我們可以這樣解決這個(gè)問題：
復(fù)制代碼 代碼如下:
Class Lion{
walker = new Walk();
walk(){
return walker.walk();
}
}
Class Eagle{
flyer = new Fly();
fly(){
return flyer.fly();
}
}
Class Pegasus{
walker = new Walk();
flyer = new Fly();
walk(){
return walker.walk();
}
fly(){
return flyer.fly();
}
}
組合是簡(jiǎn)單的在新類內(nèi)部創(chuàng)建原有類對(duì)象。所以組合才是為了解決類間具有相同的方法的。在這個(gè)例子里面：
Walk被當(dāng)成“會(huì)行走的動(dòng)物應(yīng)該擁有的方法集合”，同理Fly被當(dāng)成“會(huì)行走的動(dòng)物應(yīng)該擁有的方法集合”，所以對(duì)于天馬（Pegasus），我們只需要對(duì)Walk和Fly進(jìn)行組合就行了。
繼承的目的
繼承并非代碼復(fù)用的唯一方法，但繼承有他的優(yōu)勢(shì)：
子類可以向上轉(zhuǎn)型變成父類。
這樣我們就可以忽略所有的子類差異，當(dāng)成相同的類來操作，例如：
我們有方法fn(A)，fn(B)，這兩個(gè)方法實(shí)際是相似的，我們想復(fù)用他們。
則我們可以通過設(shè)立一個(gè)父類C，其中A是C的子類，B是C的子類，那么fn(C)就可以復(fù)用在A和B身上了。
回到Javascript
但回到Javascript，我們發(fā)現(xiàn)上面的例子是不成立的。
因?yàn)镴avascript本身是弱類型語言，它并不會(huì)在操作前（因?yàn)樗挥镁幾g）關(guān)注自己操作的對(duì)象類型是什么。他只會(huì)執(zhí)行成功，或者發(fā)生錯(cuò)誤。
這時(shí)候，繼承顯得并不必要了。那么類也就同樣不是必要的了。
I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.
——Douglas Crockford
我寫Javascript代碼已經(jīng)8年了，但我從來沒有發(fā)現(xiàn)需要使用超類函數(shù)。超類的想法在古典設(shè)計(jì)模式是非常重要的，但這在以原型和函數(shù)為基調(diào)的模式中并不必要。我現(xiàn)在覺得，早期我試圖讓Javascript支持經(jīng)典模式是一個(gè)錯(cuò)誤的決定。
安全環(huán)境
當(dāng)然，你可以手動(dòng)去判斷類型，控制參數(shù)的類型，進(jìn)而提供一個(gè)較為安全的環(huán)境。
例如同樣作為弱類型腳本語言的PHP，為了模擬強(qiáng)類型面向?qū)ο笳Z言設(shè)置安全環(huán)境，不得不這么做：
復(fù)制代碼 代碼如下:
class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct instanceof BookProduct ) ){
die( "輸入錯(cuò)誤的類型" );
}
//如果類型正確就執(zhí)行一些代碼
}
}
——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
但這只是一個(gè)非常丑陋的方案而已。
經(jīng)典繼承語法糖實(shí)現(xiàn)
不過經(jīng)典繼承依然是許多人喜歡的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的實(shí)現(xiàn)方案。
其中較為常見的方案中，語法大概是這樣的：
復(fù)制代碼 代碼如下:
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
}
});
var Dancer = Person.extend({
init: function(){
this._super( true );
}
});
var n = new Dancer();
alert(n.dancing); //true
最重要的實(shí)現(xiàn)是對(duì)this._super的實(shí)現(xiàn)，其實(shí)extend函數(shù)只是將傳進(jìn)來的對(duì)象重新組裝了一下，變成一個(gè)原型對(duì)象，新構(gòu)造函數(shù)的prototype里。
具體實(shí)現(xiàn)請(qǐng)查看參考文獻(xiàn)1。
ECMAScript 6的經(jīng)典繼承語法糖
對(duì)于類庫各自實(shí)現(xiàn)，導(dǎo)致經(jīng)典繼承語法眾多，ECMA組織貌似不太滿意，他們?cè)噲D在ECMAScript 6中加入更加直觀的經(jīng)典繼承語法糖：
復(fù)制代碼 代碼如下:
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log("Woof!");
}
}
總結(jié)
實(shí)際上，Javascript中經(jīng)典繼承并不是必要的。
然而基于許多人喜歡經(jīng)典繼承模型，所以在新版的ECMAScript 6中提供了相關(guān)語法糖。
不過在中國，前端想廣泛使用該語法糖應(yīng)該是一個(gè)遙遠(yuǎn)的故事……
Quiz2
那Javascript特有的繼承呢？
原型繼承
原型繼承不是解決經(jīng)典繼承中的集合包含關(guān)系的，實(shí)際上原型繼承是解決從屬關(guān)系的，用數(shù)學(xué)表達(dá)就是：
Sub.prototype ∈ Sup
子級(jí)構(gòu)造函數(shù)（子類型）原型是一個(gè)父級(jí)構(gòu)造函數(shù)（父類型）構(gòu)建的實(shí)例對(duì)象。原型實(shí)際上是子類型實(shí)例中需要共享的東西：
復(fù)制代碼 代碼如下:
function Being(){
this.living = true;
}
Being.prototype.walk = function(){
alert("I' m walking");
};
function Dancer(){
this.dancing = true;
}
Dancer.prototype = new Being();
Dancer.prototype.dance = function(){
alert("I'm dancing");
};
var one = new Dancer();
one.walk();
one.dance();
利用借用、寄生等技術(shù)可以產(chǎn)生很多不同的繼承效果，但這些技術(shù)都只是為了解決原型繼承中屬性和方法一些公用與非公用的問題罷了。由于篇幅問題就不展開討論了，有興趣可以參考《Javascript高級(jí)程序設(shè)計(jì)》相關(guān)內(nèi)容。
思考題
1.文章開頭關(guān)于天馬（Pegasus）的題目，如果在Javascript上，應(yīng)該如何設(shè)計(jì)呢？例如我們有下列兩個(gè)類型：
復(fù)制代碼 代碼如下:
function Walk(){
this.walk = function(){
//walk
};
}
function Fly(){
this.fly = function(){
//fly
};
}
您可能感興趣的文章:
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)方法對(duì)象冒充的使用詳解
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之原型鏈(prototype chaining)的詳解
- Javascript中 關(guān)于prototype屬性實(shí)現(xiàn)繼承的原理圖
- JavaScript對(duì)象創(chuàng)建及繼承原理實(shí)例解剖
- 關(guān)于JavaScript的面向?qū)ο蠛屠^承有利新手學(xué)習(xí)
- Javascript繼承(上)——對(duì)象構(gòu)建介紹
- 淺談javascript的原型繼承
- 關(guān)于JavaScript中原型繼承中的一點(diǎn)思考
- JavaScript面向?qū)ο笾甈rototypes和繼承
- javascript類式繼承新的嘗試
- javascript是怎么繼承的介紹
- javascrip關(guān)于繼承的小例子
相關(guān)文章
javascript 數(shù)組學(xué)習(xí)資料收集
由于javascript 數(shù)組應(yīng)用比較廣泛，使用的朋友越來越多，腳本之家特為大家整理了一些js 數(shù)據(jù)方面的學(xué)習(xí)資料，大家看完了，基本上應(yīng)該對(duì)數(shù)組有個(gè)理解了。2010-04-04
javascript數(shù)組里的27個(gè)方法總合詳解
這篇文章主要為大家詳細(xì)介紹了javascript數(shù)組里的方法27個(gè)總合，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
本文詳細(xì)講解了JavaScript圖表插件highcharts的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了淺談JavaScript中的字符編碼轉(zhuǎn)換問題,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
Javascript實(shí)例教程(19) 使用HoTMetal(5)
Javascript實(shí)例教程(19) 使用HoTMetal(5)...2006-12-12
判斷瀏覽器的js代碼...2007-01-01
javascript 基礎(chǔ)篇4 window對(duì)象，DOM
window這個(gè)對(duì)象我們之前也稍微接觸過了，其實(shí)就是對(duì)窗體進(jìn)行操作，利用這個(gè)對(duì)象我們可以實(shí)現(xiàn)很多的操作，比如窗口移動(dòng)啊，設(shè)置窗口大小啊等等2012-03-03
深入理解javascript中的立即執(zhí)行函數(shù)(function(){…})()
這篇文章主要介紹了深入理解javascript中的立即執(zhí)行函數(shù),立即執(zhí)行函數(shù)也叫立即調(diào)用函數(shù),通常它的寫法是用(function(){…})()包住業(yè)務(wù)代碼,使用jquery時(shí)比較常見,需要的朋友可以參考下2014-06-06
Javascript入門學(xué)習(xí)資料收集整理篇
為大家更好的接觸和學(xué)習(xí)js資料，所以我轉(zhuǎn)了這篇文章，我大約的看了下，文章寫的非常不錯(cuò)，希望大家不要急，慢慢看，第一次看不懂不要緊，多練習(xí)就可以了2008-07-07
寫給想學(xué)習(xí)Javascript的朋友一點(diǎn)學(xué)習(xí)經(jīng)驗(yàn)小結(jié)
今天逛論壇時(shí)看到有朋友問，是否有專門教Javascript的學(xué)校，這里想想把自己的一點(diǎn)建議和自己3年來的前端Javascript開發(fā)的經(jīng)驗(yàn)跟大家分享下，也給出幾本個(gè)人認(rèn)為不錯(cuò)的書來做為大家學(xué)習(xí)的參考資料。2010-11-11