JavaScript es6 class類的理解。

本着互聯網的分享精神，在本篇文章我將會把我對JavaScript  es6 class類的理解分享給你們。

JavaScript 類主要是 JavaScript 現有的基於原型的繼承的語法糖。 類語法不是向JavaScript引入一個新的面向對象的繼承模型。JavaScript類提供了一個更簡單和更清晰的語法來建立對象並處理繼承。

使用es寫一個類（構造函數）

在es5中你們通常都這麼寫一個類（構造函數）

另外須要注意，class類不會被提高。

// 建立一個User構造函數
function User(name, age) {
    this.name = name;
    this.age = age;
}
// User構造函數的靜態方法。
User.getClassName = function () {
    return 'User';
};
// User構造函數的動態方法
User.prototype.changeName = function (age) {
    this.age = age
};
Object.defineProperty(User.prototype, 'info', {
    get (){
       return 'name: ' + this.name + '|' + 'age: ' + this.age
    }
});
// 建立一個Manager 構造函數
function Manager(name, age, password) {
    User.call(this, name, age);  //將User函數call到Manager函數內
    this.password = password
}
// 繼承User的靜態方法
Manager.__proto__ = User;
// 調用繼承User的getClassName 方法。
console.log(Manager.getClassName());
// 繼承User動態方法
Manager.prototype = User.prototype;
// 建立一個新的動態方法 changePassword
Manager.prototype.changePassword = function (pwd) {
    this.password = pwd
};
//實例化Manager 構造函數。
var manager = new Manager('zhang', 22, '123');
manager.changeName('23');
console.log(manager.info);

將es5的構造函數轉換爲es6的類

以上方法確實沒有什麼問題，可是相對於es6的class來說沒有那麼優雅，下面我就用es6的語法讓代碼優雅一點。

其實本質上都是同樣的，只不過是一個語法糖。

/**
 * Created by 張佳偉 on 2017/5/2.
 */
'use strict';
// function  User(name, age) {
//     this.name = name;
//     this.age = age;
// }
class User {
    // 構造函數 如今叫類 本質是同樣的，其實就是一個語法糖。
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // User.getClassName = function () {
    //     return 'User';
    // };
    // 靜態方法
    static getClassName() {
        return 'User';
    }

//     User.prototype.changeName = function (name) {
//     this.name = name;
// };
//    動態方法，至關於es中的prototype
    changeName(name) {
        this.name = name;
    }

//     User.prototype.changeAge = function (age) {
//     this.age = age;
// };
    changeAge(age) {
        this.age = age;
    }

//     Object.defineProperty(User.prototype, 'info', {
//     get (){
//         return 'name: ' + this.name + '|' + 'age: ' + this.age
//     }
//     });
    get info() {
        return 'name:' + this.name + '|age:' + this.age;
    }
}
;
// function  Manager(name, age, password) {
//     User.call(this, name, age);
//     this.password = password;
// }
//繼承靜態方法
// Manager.__proto__ = User;
// //繼承prototype原型方法
// Manager.prototype = User.prototype;
// 繼承這裏省事吧，一步就到位了
class Manager extends User {
    constructor(name, age, password) {
        super(name, age);      //這個我下面會將，這裏先暫時理解爲call，可是注意他和call可不同。
        this.password = password;
    }

    changePassword(password) {
        return this.password = password;
    }

    get info() {
        var info = super.info; //這個是父類的info，固然你也能夠重寫info這個方法。那就是刪掉這句代碼，在寫上新的就行拉~
        return info
    }
}
// console.log(typeof User, typeof Manager);
var manager = new Manager('leo', 22, '123');
// manager.changeName('鉛筆');

console.log(manager.info);
console.log(manager.changePassword(456))

當即執行類的寫法

'use strict';
// 當即執行的類
let User = new class User {
    constructor(name){
        this.name = name;
    }
}('鉛筆')
console.log(User)

super  

super 關鍵字用於調用一個對象的父對象上的函數。

super的語法

super([arguments]); // 調用 父對象/父類 的構造函數
super.functionOnParent([arguments]); // 調用 父對象/父類 上的方法

在構造函數中使用時，super關鍵字單獨出現，必須在可使用this關鍵字以前使用。此關鍵字也可用於調用父對象上的函數。

class Polygon {
    constructor(height, width) {
        this.name = 'Polygon';
        this.height = height;
        this.width = width;
    }
    sayName() {
        console.log('Hi, I am a ', this.name + '.');
    }
}

class Square extends Polygon {
    constructor(length) {
        this.height;
        // ReferenceError，super 須要先被調用！

        /*
         這裏，它調用父類的構造函數的 length, 
         做爲Polygon 的 width和 height.
         */
        super(length, length);

        /*
         注意: 在派生的類中, 在你可使用'this'以前, 必須先調用super()。
         忽略這, 這將致使引用錯誤。
         */
        this.name = 'Square';
    }

    get area() {
        return this.height * this.width;
    }

    set area(value) {
        this.area = value;
    }
}

調用父類上的靜態方法

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'