ES6 中的Class

Donne 發(fā)布于2019-08-23 17:08 / 1457人閱讀

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

基本用法

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 + ")";
  }
}

在類的實例上面調(diào)用方法，其實就是調(diào)用原型上的方法。

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)

注：類的內(nèi)部所有定義的方法，都是不可枚舉的

constructor 方法

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

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

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

new Foo() instanceof Foo
// false

類必須使用new調(diào)用，否則會報錯。

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);

取值函數(shù)（getter）和存值函數(shù)（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云服務(wù)器云服務(wù)器 es6中的class es6class es6中的promise ES6

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103860.html

相關(guān)文章

ES6+ class中代碼的真正樣子

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

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

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

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

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

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

摘要：請看對應(yīng)版本干了什么可知，相當(dāng)于以前在構(gòu)造函數(shù)里的行為。這種寫法會與上文中寫法有何區(qū)別我們在環(huán)境下運(yùn)行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細(xì)品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統(tǒng)面向?qū)ο笳Z言的class寫法，ES6發(fā)布之后，Babel迅速跟進(jìn)，廣大開發(fā)者也很快喜歡上ES6帶...

jubincn 2019-08-26 10:58 評論0 收藏0
ES6學(xué)習(xí)總結(jié)（三）

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

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

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

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