ES6的Class學(xué)習(xí)

AJie 發(fā)布于2019-08-20 18:35 / 3331人閱讀

摘要：另外只有調(diào)用之后，才可以使用關(guān)鍵字正確子類的屬性和的靜態(tài)方法，在一個方法前面，加上關(guān)鍵字，就表示該方法不會被實例繼承，但是可以被子類繼承但是可以被子類繼承，也可從上調(diào)用

初識Class

傳統(tǒng)的寫法

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

Point.prototype.toString = () => {
    return `( ${this.x}, ${this.y} )`
}

ES6為了更接近面向?qū)ο蟮木幊谭绞剑峁┝薈lass的概念

class Point {
    constructor (x, y) {
        this.x = x
        this.y = y
    }
    
    toString {
        return `( ${this.x}, ${this.y} )`
    }
}

上面定義了一個‘類’，一個構(gòu)造方法constructor，this是實例對象，一個toString方法（注意沒有function這個保留字）

class類中的方法（除constructor之外）其實都定義在類的prototype屬性上

// 比如toString()，相當(dāng)于
Point.prototype = {
    toString(){}
}

// 所以類的新方法可以這樣添加進去
Object.assign(Point.prototype, {
    toString(){},
    toValue(){}
})

Point.prototype.constructor === Point // true

構(gòu)造方法和實例對象

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

constructor () {}

該方法默認(rèn)返回實例對象（就是this），但是可以指定返回另一個對象

class Foo {
    constructor {
        return Object.create(null)
    }
}
new Foo() instanceof Foo // false

實例對象的創(chuàng)建同之前一樣

class Point {
    // 這里為了縮小工作量，沒有全部書寫
    constructor () {}
    tostring () {}
}

let point = new Point(2, 3)
point.toString() // (2, 3)

point.hasOwnProperty("x") // true，因為該實例屬性顯式的定義在this上
point.hasOwnProperty("toString") // false，因為方法都是定義在原型上的
point.prototype.hasOwnProperty("toString") // true

point._proto_ === Point.prototype // true

ES6的Class只是ES5的構(gòu)造函數(shù)的一層包裝，所以繼承了函數(shù)的許多屬性，包括name屬性

class Point {} 
Point.name // "Point"

class不存在變量提升

new Foo() // ReferenceError
class Foo {}

// let Foo = class {}
// class Bar extends Foo {}
// 因為class沒有提升，所以上面代碼不會報錯

class的繼承

class childPoint extends Point {
    constructor(x, y, color) {
        super(x, y)
        this.color = color
    }
    
    toString() {
        return this.color + "" + super.toString() // 等于Parent.toString()
    }
}

子類必須在constructor方法中調(diào)用super方法，否則新建實例會出錯。另外只有調(diào)用super之后，才可以使用this關(guān)鍵字

class Point{}
class childPoint extends Point{
    constructor (x, y, color) {
        this.color = color // ReferenceError
        super(x, y)
        this.color = color // 正確
    }
    
}
let cp = new childPoint() // ReferenceError

子類的_proto_屬性

class B extends A {
}

B._prototype_ === A // true
B.prptotype._proto_ === A.prototype // true

Object.getPrototypeof(B) === A // true

getter和setter

class MyClass {
    get prop() {
        return "getter"
    }
    set prop(value) {
        console.log("setter:" + value )
    }
}

let inst = new MyClass()

inst.prop = 123 // setter: 123
inst.prop // "getter"

Class的靜態(tài)方法，在一個方法前面，加上static關(guān)鍵字，就表示該方法不會被實例繼承，但是可以被子類繼承

class Foo {
    static classMethod () {
        return "hello"
    }
}

Foo.classMethod() // hello

let foo = new Foo()

foo.classMethod() // TypeError: undefined is not a function

// 但是可以被子類繼承，也可從super上調(diào)用
class Bar extends Foo {
    // static classMethod() {
        // return super.classMethod() + ", too"
    // }
}
Bar.classMethod() // hello