js 中的class

fai1017 發(fā)布于2019-08-26 12:20 / 1862人閱讀

摘要：重點(diǎn)在于構(gòu)造函數(shù)，使用的是構(gòu)造函數(shù)來模擬類。使用創(chuàng)建子類由于是在類中定義，關(guān)鍵字可以省去創(chuàng)建父類類不可繼承沒有構(gòu)造函數(shù)的對(duì)象如果一個(gè)對(duì)象沒有構(gòu)造函數(shù)，將不能進(jìn)行繼承。

js 的class
由于存在轉(zhuǎn)換器這種神器，所以代碼能直接轉(zhuǎn)換為es5，用es6的語法寫。

一些解釋

js的class僅僅為一個(gè)語法糖，是在原先構(gòu)造函數(shù)的基礎(chǔ)上出現(xiàn)的class，僅僅如此。所以使用構(gòu)造函數(shù)構(gòu)造類，或者使用class語法糖構(gòu)造類都是相同的。具體還是使用prototype和this來進(jìn)行模擬類。

重點(diǎn)在于構(gòu)造函數(shù)，使用的是構(gòu)造函數(shù)來模擬類。

類聲明

需要聲明一個(gè)類，需要使用class

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

和函數(shù)聲明的最大的區(qū)別在于，類聲明，不會(huì)出現(xiàn)聲明提前，函數(shù)聲明會(huì)出現(xiàn)聲明提前，這是兩者最大的區(qū)別。

在上方中，聲明類以后，新建一個(gè)對(duì)象。

let rectAngle = new Rectangle

該對(duì)象具有constructor方法。

匿名類

和匿名函數(shù)類似，類依舊可以進(jìn)行匿名聲明

let Rectangle = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

在類表達(dá)式中，同樣會(huì)出現(xiàn)類聲明提升的問題。

constructor

為一個(gè)構(gòu)造函數(shù)，用于初始化class并創(chuàng)建一個(gè)對(duì)象

即為原先學(xué)習(xí)的構(gòu)造函數(shù)，函數(shù)為對(duì)象，對(duì)象為函數(shù)。

class Rectangle {
    // 構(gòu)造函數(shù)
    constructor(height, width) {
        this.height = height;
        this.width = width;
    };
    // get 方法即調(diào)用將會(huì)返回的值
    get area() {
        return this.calcArea();
    };
    // 定義calcArea函數(shù)
    calcArea() {
        return this.height * this.width;
    }
}

上方定義了一個(gè)類如果需要使用

const square = new Rectangle();
console.log(square.area);

即可完成對(duì)類的使用。

static

為一個(gè)靜態(tài)方法，該靜態(tài)new出的來的對(duì)象不能進(jìn)行使用。

常常用于工具函數(shù)的書寫

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

    static distance(a, b){
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);    // 畢達(dá)哥拉斯定理
    }
}
// 使用
const p1 = new Point(5,5);
const p2 = new Point(10,10);
console.log(Point.distance(p1,p2));

關(guān)于嚴(yán)格模式

由于js存在嚴(yán)格模式，并且上面的內(nèi)容在嚴(yán)格模式下執(zhí)行，如果該對(duì)象沒有this的值，將不會(huì)返回其本身。

傳統(tǒng)的使用prototype將會(huì)返回其本身，因?yàn)閭鹘y(tǒng)的不在嚴(yán)格模式下執(zhí)行。

extends

使用extends創(chuàng)建子類

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {    // 由于是在類中定義，function關(guān)鍵字可以省去
        console.log(this.name);
    }
}
// 創(chuàng)建DOg父類
class Dog extends Animal {
    speak() {
        console.log(this.name);
    }
}

let d = new Dog();
d.name = "ming"
d.speak();

類不可繼承沒有構(gòu)造函數(shù)的對(duì)象

如果一個(gè)對(duì)象沒有構(gòu)造函數(shù)，將不能進(jìn)行繼承。
請(qǐng)使用

Object.create()

進(jìn)行創(chuàng)建給予對(duì)象的新對(duì)象

const a = {

};

const b = Object.create(a);    // 創(chuàng)建基于原型a的對(duì)象

super

使用super調(diào)用超類

class Cat {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log();
    };
}  

class Lion extends Cat {
    speak() {
        super.speak();
    }
}

即使用super調(diào)用超類