ES6 中的Class

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

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

基本用法

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

在類的實(shí)例上面調(diào)用方法，其實(shí)就是調(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命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。一個(gè)類必須有constructor方法，如果沒有顯式定義，一個(gè)空的constructor方法會(huì)被默認(rèn)添加。
注意點(diǎn)

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

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

new Foo() instanceof Foo
// false

類必須使用new調(diào)用，否則會(huì)報(bào)錯(cuò)。

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

云服務(wù)器 GPU云服務(wù)器 es6中的class es6class es6中的promise ES6

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

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

相關(guān)文章

ES6+ class中代碼的真正樣子

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

PascalXie 2019-08-20 15:11 評(píng)論0 收藏0
ES6 探秘：Classes

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

caoym 2019-08-19 17:33 評(píng)論0 收藏0
es6中的class

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

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

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

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

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

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

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

sunnyxd 2019-08-22 13:50 評(píng)論0 收藏0