脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript class和prototype

javascript中使用class和prototype的区别小结

 更新时间：2023年08月15日 10:36:35   作者：dralexsanderl  
本文将介绍在JavaScript何时使用class以及何时使用prototype,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文将介绍在 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
    }
}

在创建了上面的Car对象后，就可以使用以下的方式创建一个实例：

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

创建了一个byd实例后，就可以调用carInfo这个方法：

console.log(byd.carInfo());

在这里插入图片描述

在这种情况下我们还可以通过call或者apaply方法来扩展Car对象来实现不同类型的车辆。

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

现在，我们就可以创建一个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
    }
}

调用新版本的carInfo方法：

console.log(byd.carInfo());

在这里插入图片描述

class

在ECMAScript 2015中js推出了class这个概念。引入class的目标是允许使用更简单、更干净的语法创建类。事实上，class只是一个“语法糖”，以使开发人员能更容易编写代码。

将前面用prototype实现的代码转换成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.
翻译： 绑定问题。由于类构造函数密切处理此关键字，因此可能会引入潜在的绑定问题，尤其是在尝试将类方法作为回调传递给外部程序时。

当谈到在 JavaScript 中使用类或原型时，我觉得这是一个应该由支持和维护代码库的团队做出的决定。如果他们习惯于原型写法，那么就应该合理设计他们的组件。但是，如果偏好是利用class概念，则该团队的开发人员应该了解上述绑定挑战，但应该继续保持在他们的编程习惯。

到此这篇关于javascript中使用class和prototype的区别小结的文章就介绍到这了,更多相关javascript class和prototype内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论