javascript繼承之為什么要繼承
更新時間：2012年11月10日 16:10:10 作者：
本文詳細介紹javascript的繼承等各方面相關(guān)知識
Quiz1
Javascript真的需要類（Class）么？
我們首先先看下其他有類（Class）的面向?qū)ο笳Z言（如：Java）的一些特性。
父類與子類
父類（Superclass）和子類（Subclass），并不是為了解決父親與兒子的問題，而是為了解決類的包含關(guān)系的，我們用Sub表示“子類”，用Sup表示“父類”，則有：
Sub Sup
這是有區(qū)別的，例如通常我們能夠?qū)⒆宇惍敵筛割悂硎褂茫J人的時候我們并不能把兒子當成父親。
或者可以這么說，父類和子類不是為了解決類間存在相同方法或者屬性的。
舉個例子
有人喜歡這樣做：
我們需要一些動物的類，以便在屏幕上創(chuàng)建一些移動的動物，但移動的動物有些在空中飛行，有些在路上行走。
所以創(chuàng)建兩個父類，一個是Fly，一個是Walk：
Class Fly{
Fly(){}
}
Class Walk{
Walk(){}
}
然后獅子們（還可以再建些其他的在路上行走的動物）就屬于Walk類，老鷹們（也還可以再建些其他在天上飛行的動物）就屬于Fly類：
Class Lion extend Walk{
}
Class Eagle extend Fly{
}
最后對Lion和Eagle類創(chuàng)建一些實例，調(diào)用相應的方法，屏幕上就會有一些獅子和老鷹在移動了。
但這可能并不是一個好的設(shè)計，比如明天老板突然一拍大腦，他要有一種叫天馬（Pegasus）的動物，它們即會在天上飛，又會在路上走，時而要飛行，時候要行走。
在這種情況下，這個方案就全然無用了。
為什么這個設(shè)計失敗了？
繼承是有條件的，子類必須能嚴格的向上轉(zhuǎn)型（變成父類）。
在上面這個例子中：
獅子（Lion）被假設(shè)等同于行走動物（Walk），老鷹（Eagle）被假設(shè)等同于飛行動物（Fly）。
這看起來很成功，因為子類能嚴格向上轉(zhuǎn)型，但他有隱患。
當有一種天馬（Pegasus）介入到里面的時候，我們才發(fā)現(xiàn)獅子其實只是“會行走的動物”，老鷹其實只是“會飛行的動物”，這不意味著動物一輩子只能飛行或者行走，所以即會飛行又會行走的天馬就找不到自己的歸屬了。
這個例子很好的證明了，子類和父類不是為了解決類間具有相同的方法的：
一些動物都會行走，需要擁有行走（Walk）這個方法，但這不應該由子類和父類實現(xiàn)。
組合
我們可以這樣解決這個問題：
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();
}
}
組合是簡單的在新類內(nèi)部創(chuàng)建原有類對象。所以組合才是為了解決類間具有相同的方法的。在這個例子里面：
Walk被當成“會行走的動物應該擁有的方法集合”，同理Fly被當成“會行走的動物應該擁有的方法集合”，所以對于天馬（Pegasus），我們只需要對Walk和Fly進行組合就行了。
繼承的目的
繼承并非代碼復用的唯一方法，但繼承有他的優(yōu)勢：
子類可以向上轉(zhuǎn)型變成父類。
這樣我們就可以忽略所有的子類差異，當成相同的類來操作，例如：
我們有方法fn(A)，fn(B)，這兩個方法實際是相似的，我們想復用他們。
則我們可以通過設(shè)立一個父類C，其中A是C的子類，B是C的子類，那么fn(C)就可以復用在A和B身上了。
回到Javascript
但回到Javascript，我們發(fā)現(xiàn)上面的例子是不成立的。
因為Javascript本身是弱類型語言，它并不會在操作前（因為他不用編譯）關(guān)注自己操作的對象類型是什么。他只會執(zhí)行成功，或者發(fā)生錯誤。
這時候，繼承顯得并不必要了。那么類也就同樣不是必要的了。
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è)計模式是非常重要的，但這在以原型和函數(shù)為基調(diào)的模式中并不必要。我現(xiàn)在覺得，早期我試圖讓Javascript支持經(jīng)典模式是一個錯誤的決定。
安全環(huán)境
當然，你可以手動去判斷類型，控制參數(shù)的類型，進而提供一個較為安全的環(huán)境。
例如同樣作為弱類型腳本語言的PHP，為了模擬強類型面向?qū)ο笳Z言設(shè)置安全環(huán)境，不得不這么做：
class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct instanceof BookProduct ) ){
die( "輸入錯誤的類型" );
}
//如果類型正確就執(zhí)行一些代碼
}
}
——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
但這只是一個非常丑陋的方案而已。
經(jīng)典繼承語法糖實現(xiàn)
不過經(jīng)典繼承依然是許多人喜歡的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的實現(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
最重要的實現(xiàn)是對this._super的實現(xiàn)，其實extend函數(shù)只是將傳進來的對象重新組裝了一下，變成一個原型對象，新構(gòu)造函數(shù)的prototype里。
具體實現(xiàn)請查看參考文獻1。
ECMAScript 6的經(jīng)典繼承語法糖
對于類庫各自實現(xiàn)，導致經(jīng)典繼承語法眾多，ECMA組織貌似不太滿意，他們試圖在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é)
實際上，Javascript中經(jīng)典繼承并不是必要的。
然而基于許多人喜歡經(jīng)典繼承模型，所以在新版的ECMAScript 6中提供了相關(guān)語法糖。
不過在中國，前端想廣泛使用該語法糖應該是一個遙遠的故事……
Quiz2
那Javascript特有的繼承呢？
原型繼承
原型繼承不是解決經(jīng)典繼承中的集合包含關(guān)系的，實際上原型繼承是解決從屬關(guān)系的，用數(shù)學表達就是：
Sub.prototype ∈ Sup
子級構(gòu)造函數(shù)（子類型）原型是一個父級構(gòu)造函數(shù)（父類型）構(gòu)建的實例對象。原型實際上是子類型實例中需要共享的東西：
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高級程序設(shè)計》相關(guān)內(nèi)容。
思考題
1.文章開頭關(guān)于天馬（Pegasus）的題目，如果在Javascript上，應該如何設(shè)計呢？例如我們有下列兩個類型：
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ū)⒆宇惍敵筛割悂硎褂茫J人的時候我們并不能把兒子當成父親。
或者可以這么說，父類和子類不是為了解決類間存在相同方法或者屬性的。
舉個例子
有人喜歡這樣做：
我們需要一些動物的類，以便在屏幕上創(chuàng)建一些移動的動物，但移動的動物有些在空中飛行，有些在路上行走。
所以創(chuàng)建兩個父類，一個是Fly，一個是Walk：
復制代碼 代碼如下:
Class Fly{
Fly(){}
}
Class Walk{
Walk(){}
}
然后獅子們（還可以再建些其他的在路上行走的動物）就屬于Walk類，老鷹們（也還可以再建些其他在天上飛行的動物）就屬于Fly類：
復制代碼 代碼如下:
Class Lion extend Walk{
}
Class Eagle extend Fly{
}
最后對Lion和Eagle類創(chuàng)建一些實例，調(diào)用相應的方法，屏幕上就會有一些獅子和老鷹在移動了。
但這可能并不是一個好的設(shè)計，比如明天老板突然一拍大腦，他要有一種叫天馬（Pegasus）的動物，它們即會在天上飛，又會在路上走，時而要飛行，時候要行走。
在這種情況下，這個方案就全然無用了。
為什么這個設(shè)計失敗了？
繼承是有條件的，子類必須能嚴格的向上轉(zhuǎn)型（變成父類）。
在上面這個例子中：
獅子（Lion）被假設(shè)等同于行走動物（Walk），老鷹（Eagle）被假設(shè)等同于飛行動物（Fly）。
這看起來很成功，因為子類能嚴格向上轉(zhuǎn)型，但他有隱患。
當有一種天馬（Pegasus）介入到里面的時候，我們才發(fā)現(xiàn)獅子其實只是“會行走的動物”，老鷹其實只是“會飛行的動物”，這不意味著動物一輩子只能飛行或者行走，所以即會飛行又會行走的天馬就找不到自己的歸屬了。
這個例子很好的證明了，子類和父類不是為了解決類間具有相同的方法的：
一些動物都會行走，需要擁有行走（Walk）這個方法，但這不應該由子類和父類實現(xiàn)。
組合
我們可以這樣解決這個問題：
復制代碼 代碼如下:
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();
}
}
組合是簡單的在新類內(nèi)部創(chuàng)建原有類對象。所以組合才是為了解決類間具有相同的方法的。在這個例子里面：
Walk被當成“會行走的動物應該擁有的方法集合”，同理Fly被當成“會行走的動物應該擁有的方法集合”，所以對于天馬（Pegasus），我們只需要對Walk和Fly進行組合就行了。
繼承的目的
繼承并非代碼復用的唯一方法，但繼承有他的優(yōu)勢：
子類可以向上轉(zhuǎn)型變成父類。
這樣我們就可以忽略所有的子類差異，當成相同的類來操作，例如：
我們有方法fn(A)，fn(B)，這兩個方法實際是相似的，我們想復用他們。
則我們可以通過設(shè)立一個父類C，其中A是C的子類，B是C的子類，那么fn(C)就可以復用在A和B身上了。
回到Javascript
但回到Javascript，我們發(fā)現(xiàn)上面的例子是不成立的。
因為Javascript本身是弱類型語言，它并不會在操作前（因為他不用編譯）關(guān)注自己操作的對象類型是什么。他只會執(zhí)行成功，或者發(fā)生錯誤。
這時候，繼承顯得并不必要了。那么類也就同樣不是必要的了。
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è)計模式是非常重要的，但這在以原型和函數(shù)為基調(diào)的模式中并不必要。我現(xiàn)在覺得，早期我試圖讓Javascript支持經(jīng)典模式是一個錯誤的決定。
安全環(huán)境
當然，你可以手動去判斷類型，控制參數(shù)的類型，進而提供一個較為安全的環(huán)境。
例如同樣作為弱類型腳本語言的PHP，為了模擬強類型面向?qū)ο笳Z言設(shè)置安全環(huán)境，不得不這么做：
復制代碼 代碼如下:
class ShopProductWriter{
public function write( $shopProduct ){
if( ! ( $shopProduct instanceof CdProduct ) && ! ( $shopProduct instanceof BookProduct ) ){
die( "輸入錯誤的類型" );
}
//如果類型正確就執(zhí)行一些代碼
}
}
——PHP Objects, Patterns, and Practtice Third Edition . Matt Zandstra
但這只是一個非常丑陋的方案而已。
經(jīng)典繼承語法糖實現(xiàn)
不過經(jīng)典繼承依然是許多人喜歡的方式。所以YUI、Prototype、Dojo、MooTools都提供了自己的實現(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
最重要的實現(xiàn)是對this._super的實現(xiàn)，其實extend函數(shù)只是將傳進來的對象重新組裝了一下，變成一個原型對象，新構(gòu)造函數(shù)的prototype里。
具體實現(xiàn)請查看參考文獻1。
ECMAScript 6的經(jīng)典繼承語法糖
對于類庫各自實現(xiàn)，導致經(jīng)典繼承語法眾多，ECMA組織貌似不太滿意，他們試圖在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é)
實際上，Javascript中經(jīng)典繼承并不是必要的。
然而基于許多人喜歡經(jīng)典繼承模型，所以在新版的ECMAScript 6中提供了相關(guān)語法糖。
不過在中國，前端想廣泛使用該語法糖應該是一個遙遠的故事……
Quiz2
那Javascript特有的繼承呢？
原型繼承
原型繼承不是解決經(jīng)典繼承中的集合包含關(guān)系的，實際上原型繼承是解決從屬關(guān)系的，用數(shù)學表達就是：
Sub.prototype ∈ Sup
子級構(gòu)造函數(shù)（子類型）原型是一個父級構(gòu)造函數(shù)（父類型）構(gòu)建的實例對象。原型實際上是子類型實例中需要共享的東西：
復制代碼 代碼如下:
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高級程序設(shè)計》相關(guān)內(nèi)容。
思考題
1.文章開頭關(guān)于天馬（Pegasus）的題目，如果在Javascript上，應該如何設(shè)計呢？例如我們有下列兩個類型：
復制代碼 代碼如下:
function Walk(){
this.walk = function(){
//walk
};
}
function Fly(){
this.fly = function(){
//fly
};
}
您可能感興趣的文章:
- 基于JavaScript實現(xiàn)繼承機制之構(gòu)造函數(shù)方法對象冒充的使用詳解
- 基于JavaScript實現(xiàn)繼承機制之調(diào)用call()與apply()的方法詳解
- 基于JavaScript實現(xiàn)繼承機制之原型鏈(prototype chaining)的詳解
- Javascript中 關(guān)于prototype屬性實現(xiàn)繼承的原理圖
- JavaScript對象創(chuàng)建及繼承原理實例解剖
- 關(guān)于JavaScript的面向?qū)ο蠛屠^承有利新手學習
- Javascript繼承(上)——對象構(gòu)建介紹
- 淺談javascript的原型繼承
- 關(guān)于JavaScript中原型繼承中的一點思考
- JavaScript面向?qū)ο笾甈rototypes和繼承
- javascript類式繼承新的嘗試
- javascript是怎么繼承的介紹
- javascrip關(guān)于繼承的小例子
相關(guān)文章
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)知識點歸納(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-09-09
簡言之，this是JavaScript語言中定義的眾多關(guān)鍵字之一，它的特殊在于它自動定義于每一個函數(shù)域內(nèi)，但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。希望看完這篇文章了你能回答出來this到底指引個甚。2016-01-01
本篇文章主要講述了，在JavaScript 中把一個對象的屬性或者方法 mixin 到另一個2013-04-04
在閃吧看見了一篇js教程，感覺不錯 適合閱讀范圍：對JavaScript一無所知～離精通只差一步之遙的人2008-05-05
本篇文章，小編為大家介紹，在JavaScript中typeof的用途介紹。不過在閱讀本文的前提是，你現(xiàn)在應該已經(jīng)知道原始值和對象值的區(qū)別了2013-04-04
javascript SpiderMonkey中的函數(shù)序列化如何進行
JavaScript中如何進行函數(shù)序列化，函數(shù)序列化的作用是什么？本文將介紹SpiderMonkey中的函數(shù)序列化，有需要的朋友可以參考下2012-12-12
Javascript入門學習第四篇 js對象和數(shù)組
上篇文章講了js中的變量，表達式，和運算符 還有一些 js 語句. 這章我們來探討js中的對象和數(shù)組。2008-07-07
我們經(jīng)常需要在JavaScript中給Element動態(tài)添加各種屬性，這可以通過使用setAttribute()來實現(xiàn)，這就涉及到了瀏覽器的兼容性問題2013-07-07
js中的setInterval和setTimeout使用實例
這篇文章主要介紹了javascript中的兩個定時執(zhí)行函數(shù)setInterval和setTimeout的用法,需要的朋友可以參考下2014-05-05
js對象內(nèi)部訪問this修飾的成員函數(shù)示例
這篇文章主要介紹了js對象內(nèi)部訪問this修飾的成員函數(shù)示例,需要的朋友可以參考下2014-04-04