目錄

• 關(guān)于js
• 對象和原型
• 原型鏈
• 基于原型鏈的繼承

參考資料
ECMAScript 6 入門
JavaScript原型中的哲學(xué)思想
MDNJavaScript 參考文檔

介紹

關(guān)于js

完整的 JavaScript 主要是由ECMAScript、文檔對象模型、瀏覽器對象模型三個(gè)部分組成。

• ECMAScript其實(shí)就是 js 的標(biāo)準(zhǔn)規(guī)范，或者說 js 是 ECMAScript 的擴(kuò)展。
  • ECMA全稱是歐洲計(jì)算機(jī)制造商協(xié)會(huì)，是一個(gè)國際標(biāo)準(zhǔn)化組織，主要制定了瀏覽器腳本語言 的標(biāo)準(zhǔn)（針對js），并將其成命名為 ECMAScript。
• 文檔對象模型（DOM）：對 HTML 頁面元素的屬性、樣式、事件等操作。例如：
  • document.getElementByXXX()
  • document.getElementByXXX(id).style.property
  • document.getElementByXXX(id).attribute
  • 當(dāng)提交表單時(shí)運(yùn)行腳本：onsubmit
• 瀏覽器對象對象模型（BOM）：針對瀏覽器相關(guān)的屬性和方法：
  • 打開新窗口 window.open()
  • 所使用的 web 協(xié)議（http:// 或 https://）location.protocol
  • 瀏覽器平臺(tái) navigator.platform

對象和原型

JavaScript 是一門面向?qū)ο蟮恼Z言。

殊不知，JavaScript的世界中的對象，追根溯源來自于一個(gè) null。

在 ECMAScript 5 中，創(chuàng)建對象，一般有三種方法：

1. 對象直接量：var point = {x:0 , y:0} ;
2. new 和構(gòu)造函數(shù)：var a = new Array() ;
3. Object.create()：var o1 = Object.create({x:1 , y:2})

我們來了解一個(gè)與對象息息相關(guān)的一個(gè)概念，原型。

絕大部分 JavaScript 對象（null 除外）都和另一個(gè)對象相關(guān)聯(lián)，即原型，指向該原型對象的內(nèi)部指針則是proto。每一個(gè)對象都從原型繼承屬性。

• 通過對象直接量創(chuàng)建的對象都有同一個(gè)原型對象，可以通過 __proto__ 獲取原型對象。
• 通過new 和構(gòu)造函數(shù)創(chuàng)建的對象的原型就是構(gòu)造函數(shù)的 prototype 屬性的值，簡單地說，通過 new Array()創(chuàng)建的對象的原型就是 Array.prototype。而 Array.prototype則是繼承自 Object.prototype。
• 通過Object.create()方法來創(chuàng)建對象，傳入的參數(shù)為原型對象。

沒有原型的對象為數(shù)不多，Object.prototype 就是其中之一，它不繼承任何屬性，所有的內(nèi)置構(gòu)造函數(shù)都具有一個(gè)繼承自 Object.prototype 的原型。

去年6月，ECMAScript6發(fā)布，ECMAScript6 引入了一套新的關(guān)鍵字class可以實(shí)現(xiàn)類。

現(xiàn)在我們來基于原型編寫一個(gè)簡單的類：

我們先了解 new 的作用:

1. new 的作用就是創(chuàng)建實(shí)例對象，然后調(diào)用構(gòu)造方法。

2. 放在 new 后面的方法會(huì)被默認(rèn)當(dāng)做構(gòu)造函數(shù)。

3. 然后創(chuàng)建一個(gè)新的實(shí)例對象，該對象則從函數(shù)的原型繼承屬性和方法。

4. 上下文（this）會(huì)指向這個(gè)新實(shí)例對象。

   <script type="text/javascript">
        function  Human(name) {
           this.name = name ;
       }
       Human.prototype = {
           put : function(){
               console.log("my name is " + this.name) ;
           }
       }
   </script>
   

原型鏈

想要了解繼承，我們得先知道原型鏈這個(gè)概念，顧名思義，原型鏈就是由原型對象組成的構(gòu)成的一條鏈。

假設(shè)要查詢對象 o 的屬性 x，如果 o 不存在 x，那么將會(huì)在 o 的原型對象 o1 中查詢屬性 x，如果 o1 也沒有 x，則會(huì)在 o1 的原型對象 o2 查找，直到找到 x 或者找到一個(gè)原型是 null 的對象為止?？梢钥吹?，對象的原型屬性就構(gòu)成了一條原型鏈。通過這條鏈，我們就能實(shí)現(xiàn)繼承。

    <script type="text/javascript">
        var a = Object.create({x:1 , y:2}) ;
        var b = Object.create(a) ;
        var c = Object.create(b) ;
        console.log(c.__proto__) ;
    </script>

打印輸出為：

輸出原型鏈

基于原型鏈的繼承

現(xiàn)在我們可以來簡單地實(shí)現(xiàn)基于原型鏈的繼承。

• 實(shí)現(xiàn)繼承屬性：

  <script type="text/javascript">
          var a = {
              x:10,
              y:20
          } ;
          var b = Object.create(a) ;
          b.y = 30 ;
          b.z = 40 ;
          var c = Object.create(b) ;
  
          console.log(c.x) ; // 10
          console.log(c.y) ; // 30
          console.log(c.z) ; // 40
  
      </script>
  

• 實(shí)現(xiàn)繼承方法：

  <script type="text/javascript">
     a = 1 ;
      var o = {
          a : 2 ,
          m : function(){
              return this.a + 1 ;
          }
      };
  

// console.log(o.m()) ;
// console.log(this.a) ;

    var p = Object.create(o) ;
    p.a = 20 ;
    console.log(p.m()) ;
</script>
```