傳統的javascript中只有物件，沒有類的概念。它是基於原型的面嚮物件語言。原型物件特點就是將自身的屬性共享給新物件。這樣的寫法相對於其它傳統面嚮物件語言來講，很有一種獨樹一幟的感腳！非常容易讓人困惑！
如果要生成一個物件例項，需要先定義一個建構函式，然後通過new操作符來完成。建構函式示例：

//函式名和例項化構造名相同且大寫（非強制，但這麼寫有助於區分建構函式和普通函式）
function Person(name,age) {
    this.name = name;
    this.age=age;
}
Person.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"歲了";
}
var obj=new Person("laotie",88);//通過建構函式建立物件，必須使用new 運算子
console.log(obj.say());//我的名字叫laotie今年88歲了
 

建構函式生成例項的執行過程：

1.當使用了建構函式，並且new 建構函式(),後臺會隱式執行new Object()建立物件;
2.將建構函式的作用域給新物件，（即new Object()創建出的物件），而函式體內的this就代表new Object()出來的物件。
3.執行建構函式的程式碼。
4.返回新物件（後臺直接返回）;

ES6引入了Class（類）這個概念，通過class關鍵字可以定義類。該關鍵字的出現使得其在物件寫法上更加清晰，更像是一種面向物件的語言。如果將之前的程式碼改為ES6的寫法就會是這個樣子：

class Person{//定義了一個名字為Person的類
    constructor(name,age){//constructor是一個構造方法，用來接收引數
        this.name = name;//this代表的是例項物件
        this.age=age;
    }
    say(){//這是一個類的方法，注意千萬不要加上function
        return "我的名字叫" + this.name+"今年"+this.age+"歲了";
    }
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88歲了
 

注意項

1.在類中宣告方法的時候，千萬不要給該方法加上function關鍵字
2.方法之間不要用逗號分隔，否則會報錯

由下面程式碼可以看出類實質上就是一個函式。類自身指向的就是建構函式。所以可以認為ES6中的類其實就是建構函式的另外一種寫法！

console.log(typeof Person);//function
console.log(Person===Person.prototype.constructor);//true

以下程式碼說明建構函式的prototype屬性，在ES6的類中依然存在著。
console.log(Person.prototype);//輸出的結果是一個物件

Person.prototype.say=function(){//定義與類中相同名字的方法。成功實現了覆蓋！
    return "我是來證明的，你叫" + this.name+"今年"+this.age+"歲了";
}
var obj=new Person("laotie",88);
console.log(obj.say());//我是來證明的，你叫laotie今年88歲了

當然也可以通過prototype屬性對類新增方法。如下：

Person.prototype.addFn=function(){
    return "我是通過prototype新增加的方法,名字叫addFn";
}
var obj=new Person("laotie",88);
console.log(obj.addFn());//我是通過prototype新增加的方法,名字叫addFn

還可以通過Object.assign方法來為物件動態增加方法

Object.assign(Person.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Person("laotie",88);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88

constructor方法是類的建構函式的預設方法，通過new命令生成物件例項時，自動呼叫該方法。

class Box{
    constructor(){
        console.log("啦啦啦，今天天氣好晴朗");//當例項化物件時該行程式碼會執行。
    }
}
var obj=new Box();

constructor方法如果沒有顯式定義，會隱式生成一個constructor方法。所以即使你沒有新增建構函式，建構函式也是存在的。constructor方法預設返回例項物件this，但是也可以指定constructor方法返回一個全新的物件，讓返回的例項物件不是該類的例項。

class Desk{
    constructor(){
        this.xixi="我是一隻小小小小鳥！哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 這裡沒有用this哦，直接返回一個全新的物件
    }
}
var obj=new Box();
console.log(obj.xixi);//我是一隻小小小小鳥！哦

constructor中定義的屬性可以稱為例項屬性（即定義在this物件上），constructor外宣告的屬性都是定義在原型上的，可以稱為原型屬性（即定義在class上)。hasOwnProperty()函式用於判斷屬性是否是例項屬性。其結果是一個布林值， true說明是例項屬性，false說明不是例項屬性。in操作符會在通過物件能夠訪問給定屬性時返回true,無論該屬性存在於例項中還是原型中。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

類的所有例項共享一個原型物件，它們的原型都是Person.prototype，所以proto屬性是相等的

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
//box1與box2都是Box的例項。它們的__proto__都指向Box的prototype
var box1=new Box(12,88);
var box2=new Box(40,60);
console.log(box1.__proto__===box2.__proto__);//true

由此，也可以通過proto來為類增加方法。使用例項的proto屬性改寫原型，會改變Class的原始定義，影響到所有例項，所以不推薦使用！

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box1=new Box(12,88);
var box2=new Box(40,60);
box1.__proto__.sub=function(){
    return this.num2-this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//20

class不存在變數提升，所以需要先定義再使用。因為ES6不會把類的宣告提升到程式碼頭部，但是ES5就不一樣,ES5存在變數提升,可以先使用，然後再定義。

//ES5可以先使用再定義,存在變數提升
new A();
function A(){

}
//ES6不能先使用再定義,不存在變數提升 會報錯
new B();//B is not defined
class B{

}

作者：張培躍
連結：https://www.jianshu.com/p/86267fab4878
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。