本文將介紹在 JavaScript 何時(shí)使用class以及何時(shí)使用prototype。

prototype

首先先介紹一下prototype的概念，在Javascript中，所有的對(duì)象都從原型中繼承屬性和方法。

function Car(brand, vinNumber) {
    this.brand = brand;
    this.vinNumber = vinNumber;
}
Car.prototype.carInfo = function() {
    return {
        brand: this.brand,
        vinNumber: this.vinNumber
    }
}

在創(chuàng)建了上面的Car對(duì)象后，就可以使用以下的方式創(chuàng)建一個(gè)實(shí)例：

const byd = new Car('byd', 'qwuiqbasunqwidn123123');

創(chuàng)建了一個(gè)byd實(shí)例后，就可以調(diào)用carInfo這個(gè)方法：

console.log(byd.carInfo());

在這種情況下我們還可以通過(guò)call或者apaply方法來(lái)擴(kuò)展Car對(duì)象來(lái)實(shí)現(xiàn)不同類型的車輛。

function SportUtilityCar(brand, vinNumber, drivetrain) {
    Car.call(this, brand, vinNumber);
    this.drivetrain = drivetrain;
}

現(xiàn)在，我們就可以創(chuàng)建一個(gè)SportUtilityCar的實(shí)例而非Car。

const byd = new SportUtilityCar('byd', 'qwuiqbasunqwidn123123', 'AWD');

而且我們還可以通過(guò)原型為SportUtilityCar定義一個(gè)新版本的carInfo方法。

SportUtilityCar.prototype.carInfo = function() {
    return {
        brand: this.brand,
        vinNumber: this.vinNumber,
        drivetrain: this.drivetrain
    }
}

調(diào)用新版本的carInfo方法：

console.log(byd.carInfo());

class

在ECMAScript 2015中js推出了class這個(gè)概念。引入class的目標(biāo)是允許使用更簡(jiǎn)單、更干凈的語(yǔ)法創(chuàng)建類。事實(shí)上，class只是一個(gè)“語(yǔ)法糖”，以使開(kāi)發(fā)人員能更容易編寫代碼。

將前面用prototype實(shí)現(xiàn)的代碼轉(zhuǎn)換成class。

class Car {
    constructor(brand, vinNumber) {
        this.brand = brand;
        this.vinNumber = vinNumber;
    }
    carInfo() {
        return {
            brand: this.brand,
            vinNumber: this.vinNumber
        }
    }
}
class SportUtilityCar extends Car {
    constructor(brand, vinNumber, drivetrain) {
        super(brand, vinNumber);
        this.drivetrain = drivetrain;
    }
    carInfo() {
        return {
            brand: this.brand,
            vinNumber: this.vinNumber,
            drivetrain: this.drivetrain
        }
    }
}

如果我們需要在類中添加 getter 和 setter，可以通過(guò)以下寫法。

class SportUtilityCar extends Car {
    constructor(brand, vinNumber, drivetrain) {
        super(brand, vinNumber);
        this.drivetrain = drivetrain;
    }
    carInfo() {
        return {
            brand: this.brand,
            vinNumber: this.vinNumber,
            drivetrain: this.drivetrain
        }
    }
    get drivetrain() {
        return this._drivetrain;
    }
    set drivetrain(newDrivetrain) {
        this._drivetrain = newDrivetrain;
    }
}

class的語(yǔ)法類似于 Java 或 C# 等語(yǔ)言。class方法允許不通過(guò) Object.prototype 語(yǔ)法而為原型鏈添加屬性和方法。

class 與 prototype 對(duì)比

如上所述，JavaScript 中的類只是語(yǔ)法糖，雖然這種方法允許那些來(lái)自Java，C#或C++等語(yǔ)言的人也可以更加快速的上手javascript，但許多Javascript純粹主義者建議不要使用類。

例如，Michael Krasnov在Please stop using classes in JavaScript文章中提到一個(gè)問(wèn)題：

Binding issues. As class constructor functions deal closely with this keyword, it can introduce potential binding issues, especially if you try to pass your class method as a callback to an external routine.
翻譯： 綁定問(wèn)題。由于類構(gòu)造函數(shù)密切處理此關(guān)鍵字，因此可能會(huì)引入潛在的綁定問(wèn)題，尤其是在嘗試將類方法作為回調(diào)傳遞給外部程序時(shí)。

當(dāng)談到在 JavaScript 中使用類或原型時(shí)，我覺(jué)得這是一個(gè)應(yīng)該由支持和維護(hù)代碼庫(kù)的團(tuán)隊(duì)做出的決定。如果他們習(xí)慣于原型寫法，那么就應(yīng)該合理設(shè)計(jì)他們的組件。但是，如果偏好是利用class概念，則該團(tuán)隊(duì)的開(kāi)發(fā)人員應(yīng)該了解上述綁定挑戰(zhàn)，但應(yīng)該繼續(xù)保持在他們的編程習(xí)慣。

到此這篇關(guān)于javascript中使用class和prototype的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)javascript class和prototype內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論