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中類的示例”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！