ECMAScript 6入門類學習筆記上

asoren 發布于2019-08-23 12:31 / 3491人閱讀

摘要：類基本概念，記錄以便自己后面加深理解了解類是什么是什么不妨寫一個看看的原型可以看到這三個屬性都是不可遍歷的并且與類相比就多了一個原型鏈。和靜態方法中是一樣的得是哪個類就返回哪個類本類不能實例化報錯正確

類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);  // 正確

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98669.html

ECMAScript 6入門類繼承筆記

類繼承看類繼承前，先回顧構造函數怎么實現對象的繼承的 function F() { this.a = 1; } function Son() { F.call(this); } function inherit(S, F) { S.protot...

_DangJin 2019-08-23 12:31 評論0 收藏0
ECMAScript 6入門讀書筆記二

摘要：變量的解構賦值更加便利的從匿名對象或者數組中，對變量進行賦值數組的解構賦值基本樣式，右邊數據類型必須是可迭代的類型。變量的解構賦值更加便利的從匿名對象或者數組中，對變量進行賦值；數組的解構賦值基本樣式，右邊數據類型必須是可迭代的類型。 let a = 1, b = 2, c = 3; //等價于 //let [a, b, c] = [1, 2, 3]; 對...

wawor4827 2019-08-23 12:27 評論0 收藏0
JavaScript 學習筆記一（入門篇）

摘要：學習筆記一入門篇最近正在看高級程序設計，一直沒來得及總結一下，順便對之前看的編程藝術進行一些簡單的總結，如有一些不正確的地方還請多指出討論。其他字符可以是字母下劃線美元符號或者數字。 JavaScript 學習筆記一（入門篇）最近正在看《JavaScript高級程序設計》，一直沒來得及總結一下，順便對之前看的《JavaScript DOM編程藝術》進行一些簡單的總結，如有一些不正...

lentoo 2019-08-21 10:36 評論0 收藏0
ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門）

摘要：也就是說，遍歷器對象本質上，就是一個指針對象。執行這個函數，就會返回一個遍歷器。一個對象如果要有可被循環調用的接口，就必須在的屬性上部署遍歷器生成方法原型鏈上的對象具有該方法也可。后面跟的是一個可遍歷的結構，它會調用該結構的遍歷器接口。 ES6 Iterator筆記（摘抄至阮一峰的ECMAScript 6入門） Iterator的遍歷過程創建一個指針對象，指向當前數據結構的起始位...

mayaohua 2019-08-20 18:19 評論0 收藏0
PHPer書單

摘要：想提升自己，還得多看書多看書多看書下面是我收集到的一些程序員應該看得書單及在線教程，自己也沒有全部看完。共勉吧當然，如果你有好的書想分享給大家的或者覺得書單不合理，可以去通過進行提交。講師溫銘，軟件基金會主席，最佳實踐作者。想提升自己，還得多看書！多看書！多看書！下面是我收集到的一些PHP程序員應該看得書單及在線教程，自己也沒有全部看完。共勉吧！當然，如果你有好的書想分享給大家的或者...

jimhs 2019-07-01 12:35 評論0 收藏0