對象的單體模式和麪向對象

對象的單體模式

爲了解決箭頭函數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關鍵字,能夠定義類。post

基本上,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類的構造方法。this

Animal類除了構造方法,還定義了一個showName方法。注意,定義「類」的方法的時候,前面不須要加上function這個關鍵字,直接把函數定義放進去了就能夠了。另外,方法之間不須要逗號分隔,加了會報錯。spa

ES6 的類,徹底能夠看做構造函數的另外一種寫法。prototype

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

上面代碼表示,類自己就指向了類的構造函數。code

使用的時候,也是直接對類使用new命令,跟構造函數的用法徹底一致。對象

constructor方法

constructor方法是類的默認方法,經過new命令生成對象實例時,自動調用該方法。一個類必須有constructor方法,若是沒有顯式定義,一個空的constructor方法會被默認添加。

複製代碼
class Animal {
}

// 等同於
class Animal {
  constructor() {}
}
複製代碼

上面代碼中,定義了一個空的類Point,JavaScript 引擎會自動爲它添加一個空的constructor方法。

相關文章
相關標籤/搜索