快捷導(dǎo)航

javascript中使用class和prototype的區(qū)別小結(jié)

更新時間：2023年08月15日 10:36:35 作者：dralexsanderl

本文將介紹在JavaScript何時使用class以及何時使用prototype,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

prototype

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

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

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

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

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

console.log(byd.carInfo());

在這里插入圖片描述

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

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

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

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

而且我們還可以通過原型為SportUtilityCar定義一個新版本的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這個概念。引入class的目標是允許使用更簡單、更干凈的語法創(chuàng)建類。事實上，class只是一個“語法糖”，以使開發(fā)人員能更容易編寫代碼。

將前面用prototype實現(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，可以通過以下寫法。

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的語法類似于 Java 或 C# 等語言。class方法允許不通過 Object.prototype 語法而為原型鏈添加屬性和方法。

class 與 prototype 對比

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

例如，Michael Krasnov在Please stop using classes in JavaScript文章中提到一個問題：

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.
翻譯：綁定問題。由于類構(gòu)造函數(shù)密切處理此關(guān)鍵字，因此可能會引入潛在的綁定問題，尤其是在嘗試將類方法作為回調(diào)傳遞給外部程序時。

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

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

您可能感興趣的文章: