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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家收藏整理了js数组去重的n种方法，大家可以根据自己需要选择比较好的方法，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要介绍了Javascript取整函数及向零取整几种常用的方法,每种方法都有其特点和适用场景,推荐使用Math.trunc(),因为它语义明确、代码易读且性能较好,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了JS实现的颜色实时渐变效果,结合实例形式分析了JavaScript结合时间函数定时触发动态改变页面元素属性的相关技巧,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了js淡入淡出的图片轮播切换特效，图片可以随意替换，文中示例代码介绍的非常详细，具有一定的参考价值，推荐给大家，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了微信小程序+mqtt,esp8266温湿度读取的实现方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了JS使用post提交的两种方式,实例分析了两种JavaScript使用post提交的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
文本框(input)获取焦点(onfocus)时样式改变的示例代码
本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了js注入，黑客之路必备！本文告诉大家什么是js注入，如何进行js注入攻防，感兴趣的小伙伴们可以参考一下2016-09-09
今天小编就为大家分享一篇layer弹出层扩展主题的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
这篇文章主要介绍了详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论