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的同學會很容易理解，先學會使用對於其中不明白的知識點多查文檔理解。