ES6入門教程——13、ES6的類

 

一、傳統js在沒有類概率的情況下實現類概率方式

它是基於原型的面嚮對象語言。原型對象特點就是將自身的屬性共享給新對象。非常容易讓人困惑！

如果要生成一個對象實例，需要先定義一個構造函數，在prototype上增加方法，然後通過new操作符來完成。構造函數示例：

//函數名和實例化構造名相同且大寫（非強制，但這麼寫有助於區分構造函數和普通函數）
function Student(name,age) {
    this.name = name;
    this.age=age;
}
Student.prototype.say = function(){
    return "我的名字叫" + this.name+"今年"+this.age+"歲了";
}
var obj=new Student("xiaoxiao",18);//通過構造函數創建對象，必須使用new 運算符
console.log(obj.say());//我的名字叫xiaoxiao今年18歲了

二、ES6中的類實現

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

ES6中的類其實就是構造函數的另外一種寫法！

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

實際上類的所有方法都定義在類的prototype屬性上。

可以通過Object.assign方法來爲對象動態增加方法。

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

上面是在類原型prototype上增加方法，也可以使用實例的proto屬性改寫原型，會改變Class的原始定義，影響到所有實例，所以不推薦使用！下面的例子是使用實例的__proto__屬性增加方法。

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