對es6中類別的簡單理解（附範例）

這篇文章帶給大家的內容是關於對es6中類的簡單理解（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

類別class

基本概念，記錄以便自己後面加深理解

了解類別是什麼

#class是什麼？不妨寫一個看看

class Demo {
    constructor() {
        this.a = 1;
        this.b = this.f;
    }
    f() {
        return this;
    }
}
Demo.prototype; //{
                //  constructor: class Demo
                //  f: ƒ f()           
                //  __proto__: Object }

Demo的原型可以看到這三個屬性都是不可遍歷的並且與Demo類別相比就多了一個__proto__原型鏈。我們再new一個Demo看一下

let o = new Demo();
console.log(Object.getPrototypeOf(o));  //{
                                        //  constructor: class Demo
                                        //  f: ƒ f()           
                                        //  __proto__: Object }

實際上Demo類別相當於Demo實例的原型

class中的constructor

在我看來

    constructor() {
        this.a = 1;
        this.b = this.f;
    }

這部分相當於es5中建構函數的作用，在new的過程中對this進行賦值，並返回this也就成了實例對象
因此你在constructor中return了一個對象且不等於null那麼實例對象是return的值，和es5建構子一樣的效果

class中的方法

    f() {
        return this;
    }

這個方法最終屬於在實例物件的原型鏈上不可遍歷方法，因此也能被實例物件使用

新知識點

class的靜態方法

表示該方法不會被實例繼承，而是直接透過類別來呼叫

class Demo {
    constructor() {
        this.a = this;
        this.b = this.f;
    }
    static g() {
        return this;
    }
    static f() {
        return this;
    }
}
let o = new Demo(); 
//console.log(o.b());    //not a function
//console.log(o.g());     //not a function
Demo.g() === Demo;        //true

靜態方法中的this指向類別自己，而this.a = this則指向實例物件自己

#靜態方法可以被子類別繼承

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

靜態方法可以從super物件上呼叫

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

Class 內部只有靜態方法，沒有靜態屬性

class表達式的立即執行寫法

var o =  new class {
    constructor(n) {
        this.a = n;
        this.b = this.f;
    }
    g() {
        return n;
    }
    f() {
        return this;
    }

}(1)

o.a;             // 1

class類別聲明不存在變數提升

new.target 屬性

是在new後返回一個對象，例如es5中建構函數f不是透過new調用返回undefined，透過new調用返回建構子自己

function f() {
    return new.target;
}
console.log((new f()) === f);       //true

而class類別中，則傳回class自身。和靜態方法中this是一樣的；new得是哪個類別就回傳哪個類別

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

以上是對es6中類別的簡單理解（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！