物件的單體模式和麵向物件

阿新 • • 發佈：2019-01-12

物件的單體模式

為了解決箭頭函式this指向的問題推出來一種寫法物件的單體模式

    <script>
    var person = {
        name:'張亞飛',
        age: 23,
        fav(){
            console.log(this.name, this.age);
        }
    };
    person.fav();  // 張亞飛  23
    </script>

面向物件

JavaScript 語言中，生成例項物件的傳統方法是通過建構函式。

     function 
 Animal(name,age){
         this.name = name;
         this.age = age;
        
     }
　　　// 為物件新增方法
     Animal.prototype.showName = function(){
         console.log(this.name, this.age);
     }

     var dog = new Animal('小強',18)
     dog.showName();

上面這種寫法跟傳統的面嚮物件語言（比如 C++ 和 Java）差異很大，很容易讓新學習這門語言的程式設計師感到困惑。

ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為物件的模板。通過class關鍵字，可以定義類。

基本上，ES6 的class可以看作只是一個語法糖，它的絕大部分功能，ES5 都可以做到，新的class寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。上面的程式碼用 ES6 的class改寫，就是下面這樣

          class Animal{
            
            // 構造器  當你建立例項之後 constructor()方法會立刻呼叫 通常這個方法初始化物件的屬性
            constructor(name,age){
                this.name = name;
                this.age = age;
            }
　　　　　　　// 一定不要加逗號，加了會報錯
            showName(){
                console.log(this.name);
            }
        }
        var a2 = new Animal('小強',18);

上面程式碼定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而this關鍵字則代表例項物件。也就是說，ES5 的建構函式Animal，對應 ES6 的Animal類的構造方法。

Animal類除了構造方法，還定義了一個showName方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函式定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。

ES6 的類，完全可以看作建構函式的另一種寫法。

console.log(Animal2===Animal2.prototype.constructor);//true

上面程式碼表示，類本身就指向了類的建構函式。

使用的時候，也是直接對類使用new命令，跟建構函式的用法完全一致。

constructor方法

constructor方法是類的預設方法，通過new命令生成物件例項時，自動呼叫該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被預設新增。

class Animal {
}

// 等同於
class Animal {
  constructor() {}
}

上面程式碼中，定義了一個空的類Point，JavaScript 引擎會自動為它新增一個空的constructor方法。