javascript每日必學之繼承_javascript技巧

朋友們大家好，我們今天這一講就接著前面的封裝繼續講解，今天就是在前面內容上面的升級，OOP思想中的繼承，我們就先來解釋一下繼承到底是什麼意思，我們在什麼地方會用到繼續。

　　繼承就是，後代繼續祖先的一系列屬性，行為。後代仍算是與祖先同族，下面我們再用一些具體描述，來理解一下什麼是繼承

中國人，跟美國人都是繼承自人類祖先，所以我們具有相同的屬性行為，但是還有一定的差異，後面我們們將繼續講到的多態性，所以透過上面的範例圖，我們可以清晰的知道，人與人之前其實大同小異，所以我們再看看下面的範例程式碼，我們就知道，用程式碼來模擬繼承，我們就又可以知道一種方法來寫盡量少的程式碼達到做盡量多的事。

//遗传继承函数
function Extend(Children,Parent){
  //这里仅仅只是继承的原型链接定义的行为
  for(var p in Parent.prototype){
    Children[p] = Parent.prototype[p];
  }
}
//人类祖先
function Human(){
  this.weight = "50kg";
  this.height = "180cm";
  this.hair = "棕色";
}
//吃饭
Human.prototype.Eat = function(){
  console.log("吃饭");
}
//说话
Human.prototype.Say = function(){
  console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
  console.log("我是人类，天生就可以两条腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
  console.log("跟老婆一起做羞羞的事，就是为了人类的繁荣");
}

//中国人
function Chinese(){
  //调用继承函数
  Extend(this,Human);
}
//美国人
function American(){
  //调用继承函数
  Extend(this,Human);
}

我們就這樣寫，就模擬了高階語言中的繼承，下面我們來看看運行後，有沒有問題

運行後，我們發現了問題，這樣寫，我們已經可以實現原型鏈接的繼承了，而且也大大的節省了很多代碼，我們在寫Chinese和American函數的時候，是不是只寫了少量代碼，我們就把父類別行為給繼承過來了，而實例也能呼叫父類別所擁有的行為函數，但是這樣寫，我們還沒有完全實現繼承，因為我們在呼叫hair屬性的時候就根本沒有起到作用，那麼，我們再修改一下程式碼，就可以實現完全繼承了

//遗传继承函数
function Extend(Children,Parent){
  //现在我们是从父类实例来继承，所以属性和方法都会被继承的
  for(var p in Parent){
    if(typeof Children[p] == "undefined"){
      Children[p] = Parent[p];
    }
  }
}
//人类祖先
function Human(){
  this.weight = "50kg";
  this.height = "180cm";
  this.hair = "棕色";
}
//吃饭
Human.prototype.Eat = function(){
  console.log("吃饭");
}
//说话
Human.prototype.Say = function(){
  console.log("大家好我是地球人");
}
//行走
Human.prototype.Walk = function(){
  console.log("我是人类，天生就可以两条腿直立行走");
}
//繁衍
Human.prototype.Multiply = function(){
  console.log("跟老婆一起做羞羞的事，就是为了人类的繁荣");
}
//中国人
function Chinese(){
  //调用继承函数
  Extend(this,new Human());
}
//美国人
function American(){
  //调用继承函数
  Extend(this,new Human());
}

我們還是要看一下運行的效果是不是跟我們想像中的一樣？

透過上在的程式碼我們不難看出，現在的繼承函數其實是從Human類別的具體實例中複製的屬性及行為，這樣我們就更進一步模擬出了類別的繼承，在上面有一句，我還需要跟大家解釋一下

if(typeof Children[p] == "undefined"){
 ...... 
}

這裡出現的typeof關鍵字其實是一個運算符，是查看某個變數是什麼類型，如果是未定義的情況，運算出的結果就是"undefined" ，所以我就是這樣比較，如果子類別沒有定義過這樣的屬性或行為函數，那麼就從父類別繼承（註：這裡的解釋是為了後面的多型式鋪墊）。

　　接下來我們再看一下可不可以多重繼承，前面我們已經提到Chinese與American兩個類別都是繼承自Human類，下面我們再寫一個類別來繼承自Chinese

//四川人
function SiChuanMan(){
  Extend(this,new Chinese());
}

現在我們已經寫出很健壯的繼承程式碼，理解也非常的簡單，只要在宣告新類別的時候，在建構函式裡面呼叫一下繼承函數，我們就可以實現屬性及行為函數的完全繼承，這樣，我們就可以省下大量的程式碼，OOP思想的優勢再一次地被體現了出來，如果我們要模擬中國每個省份的人，如果我每個省份都照著Human類的方式去寫，從太陽出來寫到第二天的太陽落坡都寫不完。繼承的寫法多種多樣，每個人都有自己的寫法，這裡，我就是以一種最簡單的方式跟大家講解的，到後面大家能熟練使用時候，也可以以自己喜歡的方式去寫，javascript本身就是一門很靈活的語言。

　　總結一下，我們今天在封裝基礎上進一步做了升級，這樣我們就實現了物件的繼承，書寫的程式碼量被進一步被壓縮，想想能提高工作的效率，更能提高程式碼的優雅度，有一點的小激動呢，只要跟著我腳步走，我們就可以用最簡單的方式去理解最複雜的東西，其實程序並不復雜，複雜的原因是大家沒有得到正確的帶領，本來很簡單的一個東西，被不同的人理解及解釋成不同的東西，這樣學習起來就複雜了，更多的是沒有連續的教程一步一步地帶領大家向正確的方向邁進，所以很長時間都很難得到提升。