ES6怎么定義類

這篇文章主要介紹“ES6怎么定義類”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“ES6怎么定義類”文章能幫助大家解決問題。

在ES6中，class（類）作為對象的模板被引入，可以通過“class”關鍵字來定義類。class的本質是function，它可以看作一個語法糖，讓對象原型的寫法更加清晰、更像面向對象編程的語法。

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6 Class

在ES6中，class（類）作為對象的模板被引入，可以通過“class”關鍵字來定義類。

class 的本質是 function。

基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

基礎用法

類定義

類表達式可以為匿名或命名。

// 匿名類
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名類
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

類聲明

class Example {
    constructor(a) {
        this.a = a;
    }
}

注意要點：不可重復聲明。

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

注意要點：

類定義不會被提升，這意味著，必須在訪問前對類進行定義，否則就會報錯。

類中方法不需要 function 關鍵字。

方法間不能加分號。

new Example(); 
class Example {}

類的主體

屬性

prototype

ES6 中，prototype 仍舊存在，雖然可以直接自類中定義方法，但是其實方法還是定義在 prototype 上的。 覆蓋方法 / 初始化時添加方法

Example.prototype={
    //methods
}

添加方法

Object.assign(Example.prototype,{
    //methods
})

靜態屬性

靜態屬性：class 本身的屬性，即直接定義在類內部的屬性（ Class.propname ），不需要實例化。 ES6 中規定，Class 內部只有靜態方法，沒有靜態屬性。

class Example {
// 新提案
    static a = 2;
}
// 目前可行寫法
Example.b = 2;

公共屬性

class Example{}
Example.prototype.a = 2;

實例屬性

實例屬性：定義在實例對象（ this ）上的屬性。

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

name 屬性

返回跟在 class 后的類名(存在時)。

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

方法

constructor 方法

constructor 方法是類的默認方法，創建類的實例化對象時被調用。

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

返回對象

class Test {
    constructor(){
        // 默認返回實例對象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回對象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

靜態方法

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

原型方法

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

實例方法

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

類的實例化

new

class 的實例化必須通過 new 關鍵字。

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

實例化對象

共享原型對象

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已廢棄，不建議使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

關于“ES6怎么定義類”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。