ES6 中的Class

Donne 發布于2019-08-23 17:08 / 1449人閱讀

摘要：注類的內部所有定義的方法，都是不可枚舉的方法方法是類的默認方法，通過命令生成對象實例時，自動調用該方法。一個類必須有方法，如果沒有顯式定義，一個空的方法會被默認添加。注意點方法默認返回實例對象即，完全可以指定返回另外一個對象。

基本用法

ES5 的寫法

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
};

var p = new Point(1, 2);

ES6 的寫法

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }
}

在類的實例上面調用方法，其實就是調用原型上的方法。

class B {}
let b = new B();

b.__proto__.constructor === B.prototype.constructor?console.log("true"):console.log("false")
console.log(typeof b.__proto__.constructor)
console.log(typeof B.prototype.constructor)

注：類的內部所有定義的方法，都是不可枚舉的

constructor 方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。
注意點

constructor方法默認返回實例對象（即this），完全可以指定返回另外一個對象。

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

類必須使用new調用，否則會報錯。

class book{
    constructor(){
        this._year=2004;
        this.edition=1;
    }
    get year(){
        return this._year;
    }
    set year(newVal){
        if(newVal>2004){
            this._year=newVal;
            this.edition+=newVal-2004;
        }
    }
}
let b=new book();
b.year = 2004; //2
console.log(b.edition);

取值函數（getter）和存值函數（setter）

class book{
    constructor(){
        this._year=2004;
        this.edition=1;
    }
    get year(){
        return this._year;
    }
    set year(newVal){
        if(newVal>2004){
            this._year=newVal;
            this.edition+=newVal-2004;
        }
    }
}
let b=new book();
b.year = 2004; //2
console.log(b.edition);

GPU云服務器云服務器 es6中的class es6class es6中的promise ES6

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

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

ES6+ class中代碼的真正樣子

摘要：一用定義一個空類在中在中結論這個結果很清晰，原來中的類在中也是定義一個構造函數，然后返回出來。這篇文章用代碼對比的方式解釋ES6中的類如果用我們熟悉的ES5來看是什么樣的。一、用class定義一個空類在ES6中： class Person { } 在ES5中： var Person = (function () { function Person() { } ...

PascalXie 2019-08-20 15:11 評論0 收藏0
ES6 探秘：Classes

摘要：中的同名的實際上就是我們在的原型繼承中使用的構造函數，所以中的是對中的構造函數的一種包裝。我們發現，在中設定的屬性被放在的構造函數中，而方法則以鍵值對的形式傳入一個函數中。大家是不是對這種繼承模式似曾相識呢對了，這就是所謂的構造函數竊取。 ES6中增加了一些新特性，但從底層的角度來說，只是一些語法糖。但是就我個人來說，如果不了解這些語法糖的本質，是用不安心的。那我們要如何揭開這些語法糖...

caoym 2019-08-19 17:33 評論0 收藏0
es6中的class

摘要：和大多數瀏覽器的實現中，每一個對象都有屬性除外，指向對應的構造函數的屬性。作為構造函數的語法糖，同時有屬性和屬性，因為存在兩條繼承鏈。前言 es6的class其實是構造函數的語法糖，但是又有區別，下面來詳細分析下class 定義先來看下class的定義的代碼 class Point{ constructor(){} toString(){} } ...

546669204 2019-08-23 11:42 評論0 收藏0
ES6 class繼承與super關鍵詞深入探索

摘要：請看對應版本干了什么可知，相當于以前在構造函數里的行為。這種寫法會與上文中寫法有何區別我們在環境下運行一下，看看這兩種構造函數的有何區別打印結果打印結果結合上文中關于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統面向對象語言的class寫法，ES6發布之后，Babel迅速跟進，廣大開發者也很快喜歡上ES6帶...

jubincn 2019-08-26 10:58 評論0 收藏0
ES6學習總結（三）

摘要：不同于其他面向對象語言，以前的中中沒有類的概念，主要是通過原型的方式來實現繼承，中引入了原型鏈，并且將原型鏈用來實現繼承，其核心是利用原型使得一個對象繼承另一個對象的方法和屬性，中原型繼承的關鍵是將一個實例的原型對象指向另一個實例，因此前一不同于其他面向對象語言，ES6以前的JavaScript中中沒有class類的概念，主要是通過原型的方式來實現繼承，JavaScript中引入了原...

baoxl 2019-08-21 11:55 評論0 收藏0
如何繼承Date對象？由一道題徹底弄懂JS繼承。

摘要：前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。倘若用的是中文搜索。所以最終的實例對象仍然能進行正常的原型鏈回溯，回溯到原本的所有原型方法這樣通過一個巧妙的欺騙技巧，就實現了完美的繼承。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 20180201更新：修改用詞描述，如組合寄生式改成寄生組合式，修改多處筆誤（感謝@Yao Ding的...

sunnyxd 2019-08-22 13:50 評論0 收藏0