技術標籤：es6

概述

ES6中提供了更接近面向物件（注意：javascript本質上是基於物件的語言）語言的寫法，作為物件的模板引入了class (類)，通過 class 關鍵字定義類。

class 的本質是 function。

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

類的基本語法

		// 定義類
        class Baby {
            constructor(name, age) {
                this
 
.name = name;
                this.age = age;
            }
            kill() {
                return `${this .name} like smile`

            }
        }

        //建立物件
        var bobi = new Baby("bobi", 1);
        console.log(bobi);
        // 呼叫方法
        console.log(bobi.kill());

1. 上面程式碼定義了一個“類”，可以看到裡面有一個constructor方法，這就是構造方法，而this關鍵字則代表例項物件。也就是說，ES5的建構函式Baby，對應ES6的Baby類的構造方法。
2. 可以看到上面Baby類除了構造方法，還定義了一個kill方法，注意，在定義類的方法時，不需要加function這個關鍵字，把定義放進去就可以，另外方法間不要加逗號，加了會報錯。
   
   可以看到，在這裡編輯器直接報錯了
3. 需要注意的是我們的還需要使用new方法在來使用類，和ES5之前不同；

  		var bobi = new Baby("bobi", 1);//這裡正常
        var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
 

我們需要注意，一定要避免在專案中在不使用new方法的時候去使用類；
4. 還需要注意的一點是我們不要重複宣告類，會報錯

		class MM {}
        class MM {}

不可以重複宣告
5. 類定義不會被提升，這意味著，必須在訪問前對類進行定義，否則就會報錯。
6. 類是不可以列舉的

for (var key in Baby) {
           console.log(key); // 沒有任何內容打印出來
       }

constructor 方法

constructor 方法是類的預設方法，返回對建立此物件的陣列函式的引用。一個類必須有constructor方法，如果沒有顯式定義，預設會新增一個空的constructor方法。
constructor 方法預設返回例項物件，但是當constructor方法返回一個複雜型別的時候，可以改變。

  // 定義類
        class Baby {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                // return 111; //返回Baby {name: "bobi", age: 1}
                // return "asdfasd"; //返回Baby {name: "bobi", age: 1}
                // return false; //返回Baby {name: "bobi", age: 1}
                // return [1, 2] //返回[1,2]
                // return {
                //     name: "111"
                // } //返回{name:"111"}
                return function fn() {
                        console.log(11);

                    } //返回函式

            }
            kill() {
                return `${this .name} like smile`

            }
        }

        //建立物件
        var bobi = new Baby("bobi", 1);
        console.log(bobi);

Constructor與普通建構函式的區別： 類的建構函式，不使用new是沒法呼叫的，會報錯。這是它跟普通建構函式的一個主要區別，後者不用new也可以執行。
上面有演示這裡就不在演示；

static 關鍵字

類（class）通過 static 關鍵字定義靜態方法。不能在類的例項上呼叫靜態方法，而應該通過類本身呼叫。

 class Baby {
            constructor(name, age) {
                this.name = name;
                this.age = age;


            }
            kill() {
                return `${this .name} like smile`

            }
            static mama = "lucy"
        }

        //建立物件
        var bobi = new Baby("bobi", 1);
        console.log(Baby.mama);
        console.log(bobi.mama);

只有當類本身呼叫的時候才可以使用，new出來的例項化物件呼叫為underfined；

1. 靜態方法呼叫同一個類中的其他靜態方法，可使用 this 關鍵字

  // 定義類
        class Baby {
            constructor(name, age) {
                this.name = name;
                this.age = age;


            }
            kill() {
                return `${this .name} like smile`

            }
            static mama = "lucy";
            static father = this.mama + " honey"
        }


        console.log(Baby.father);//lucy honey

2. 非靜態方法中，不能直接使用 this 關鍵字來訪問靜態方法。而是要用類名來呼叫;

  class Baby {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                console.log(Baby.mama);
                console.log(this.constructor.father);
                //this指向新new出來的物件 this.constructor指向類
                console.log(this.constructor);

            }
            kill() {
                return `${this .name} like smile`

            }
            static mama = "lucy";
            static father = this.mama + " honey"
        }
        var boby = new Baby("boby", 1)

總結

本篇文章就到這裡，有補充歡迎評論區補充，如果有幫助，歡迎點贊~