ES6新語法之---對象語法糖class(8)

這節學習ES6中建立對象新語法class。

第一部分：ES5中建立對象、對象繼承。

　　1.ES5中建立對象

　　　　ES5中建立對象是經過構造函數進行new實例化實現的。

　　　　舉例：建立用戶對象

//建立User構造對象
function User(name, age) {
    this.name = name
    this.age = age
}

//建立靜態方法
User.getClassName = function(){
    return this.name
}

//建立普通方法
User.prototype.changeName = function(name){
    this.name = name
}
User.prototype.changeAge = function(age){
    this.age = age
}
Object.defineProperty(User.prototype, 'info', {
    get() {
        return 'name:' + this.name + '|age:' + this.age
    }
})

//經過new構造函數建立對象user
var user = new User('leo', 23)
console.log(user)   //User { name: 'leo', age: 23 }
console.log(user.info)  //name:leo|age:23
user.changeName('lilei')
console.log(user.info)  //name:lilei|age:23

　　上例中定義了User構造函數，在User構造函數上定義getClassName()靜態方法，在User原型上定義全部普通方法，最後經過new User建立用戶實例。

　　2.ES5中對象繼承

　　　　建立Manager對象實現繼承User對象的屬性和方法。

//建立管理員角色
function Manager(name, age, password){
    //繼承User中對name、age屬性的賦值
    User.call(this, name, age)
    this.password = password
}

//繼承靜態方法
Manager.__proto__ = User

//繼承原型方法
Manager.prototype = User.prototype

Manager.changePassword = function(password){
    this.password = password
}
var manager = new Manager('jicheng', 22, '123')
console.log(manager)    //User { name: 'jicheng', age: 22, password: '123' }
console.log(Manager.getClassName()) //Manager
console.log(manager.info)   //name:jicheng|age:22

　　上例Manager構造函數中使用，User.call()實現屬性的繼承，經過Manager.__proto__和prototype實現靜態方法和原型方法的繼承。

　　雖然ES5中咱們能夠使用構造函數完成對象的定義和繼承實現，可是和傳統面嚮對象語言中的class相比很不直觀，因此ES6中引入了class語法糖方便類的定義和實現。

第二部分：ES6中建立對象、對象繼承

　　1.ES6中建立對象

　　ES6中建立對象使用關鍵字class實現。

class User {
    constructor(name, age){
        this.name = name
        this.age = age
    }
    // 定義靜態方法
    static getClassName(){
        return this.name
    }
    // 定義普通方法
    changeName(name){
        this.name = name
    }
    changeAge(age){
        this.age = age
    }
    // 定義get、set方法
    get info(){
        return 'name:' + this.name + '|age:' + this.age
    }
}
var user = new User('leo', 22)
console.log(user)   //User { name: 'leo', age: 22 }
console.log(User.getClassName())    //User
console.log(user.info)  //name:leo|age:22

　　ES6中咱們使用class關鍵字定義對象User，使用constructor()定義構造方法，經過static關鍵字定義靜態方法，使用get/set定義屬性info的獲取和設置方法，使用class的方式進行類的定義更加的直觀，同時也更符合面嚮對象語言的編程習慣。

　　2.ES6中對象繼承

　　ES6中繼承經過關鍵字，extends進行實現。

class Manager extends User {
    constructor(name, age, password){
        //經過super繼承父類User的構造方法
        super(name, age)
        this.password = password
    }
    changePassword(password){
        this.password = password
    }
}
var manager = new Manager('jicheng', 22, '123')
console.log(manager)    //User { name: 'jicheng', age: 22, password: '123' }
console.log(Manager.getClassName()) //Manager
console.log(manager.info)   //name:jicheng|age:22

　　上例中Manager經過extends繼承了父類User的屬性、靜態方法、普通方法，constructor中經過super(name, age)繼承User中的name、age屬性。ES6中經過extends實現繼承的方式比ES5中更簡單也更直接。

　　注意：

　　　　若是子類構造函數中若是沒有顯示定義constructor()方法，那麼系統會默認爲其添加constructor(...agr)方法繼承父類的constructor方法。

class Manager extends User {
    //類中沒有顯示定義constructor方法
    
}
var manager = new Manager('jicheng', 22, '123')
console.log(manager)    //Manager { name: 'jicheng', age: 22 }

　　相似於：

class Manager extends User {
    //類中沒有顯示定義constructor方法
    constructor(...arg){
        super(...arg)
    }
}
var manager = new Manager('jicheng', 22, '123')
console.log(manager)    //Manager { name: 'jicheng', age: 22 }

　　總結：關於ES6中新引入的建立對象、實現繼承的關鍵詞，class、constructor、static、extends等，學過java的同窗會很容易理解，先學會使用對於其中不明白的知識點多查文檔理解。