JS class语法糖的深入剖析
引言
在很早以前，写过一篇文章 “类”设计模式和“原型”设计模式——“复制”和“委托”的差异 ，大致意思就是说：代码复用，也就是继承、重写，有两种思路：1. 面向对象的类继承；2. 基于 JavaScript 原型链的原型继承；前者的主要特点是：复制，通俗来说就是把变量、属性再复制一份，后者的主要特点是：委托，通过属性的查找来实现的。
后来呢，深入了解 JavaScript 高级程序设计中的继承，包括构造函数继承、原型继承、组合继承、寄生组合继承，都有各自的缺点，有兴趣的朋友，可以看我这篇文章。
还有，本瓜特别记住：维基对 JavaScript 起源的解释
JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响。在语法结构上它又与C语言有很多相似。
最后，我的小结呢就是：JavaScript 本身的设计就是“通过原型委托”来实现代码复用的，结果 ES6 搞出了个 class 作为语法糖，其本身还是基于原型链，但又是为了实现面向对象，面向对象是基于 class 类那种“复制”来实现代码复用。
类 和 原型，是两种不同的东西，JS class 将二者混在了一起，别不别扭？
后来也看到一些文章说在 JS 中使用 class 类会造成一些困扰，所以更加坚定要减少使用 class 。
而实际上，本篇题目是：JS class 并不只是简单的语法糖，所以，本篇并不是为了说它不好，而是要说它的好的！
来吧，展翅！
class 第一个好：私有变量
如果不用 class , 还有什么更优雅的方法实现以下子类的私有变量吗？
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
} // Person.constructor
get FullName () {
return this.firstName + " " + this.lastName;
}
} // Person
class Employee extends Person {
#salary;
constructor(firstName, lastName, salary) {
super(firstName, lastName);
this.salary = salary;
}
get salary() {
return this.#salary;
}
set salary(salary) {
this.#salary = salary;
console.log("Salary changed for " + this.fullName + " : $" + this.salary);
}
} // Employee
设想下，我们用原型链的思路模拟（对象）：
const Person = {
set givenName(givenName) {
this._givenName = givenName;
},
set familyName(familyName) {
this._familyName = familyName;
},
get fullName() {
return `${this._givenName} ${this._familyName}`;
}
};
const test = Person; // 这里假设用 对象 模拟 类
test.givenName = "Joe";
test.familyName = "Martinez";
console.log("test.fullName", test.fullName); // Joe Martinez
console.log("test.givenName", test.givenName); // undefined
console.log("test._givenName", test._givenName); // Joe
没有实现私有属性 _givenName
而 class 可以将值存为私有，使得对象外部不能修改：
class 第二个好：super 继承
class 可以通过 super 更优雅的实现继承、和重写，比如：
class Cash {
constructor() {
this.total = 0;
}
add(amount) {
this.total += amount;
if (this.total < 0) this.total = 0;
}
} // Cash
class Nickles extends Cash {
add(amount) {
super.add(amount * 5);
}
} // Nickles
如果是按照老样子，原型链，它可能是这样的：
const Cash = function() {
this.total = 0;
}; // Cash
Cash.prototype = {
add : function(amount) {
this.total += amount;
if (this.total < 0) this.total = 0;
}
}; // Cash.prototype
const Nickles = function() {
Object.assign(this, new Cash());
this.add = function(amount) {
Cash.add.apply(this, amount);
};
} // Nickles
读起来有点乱，this 指来指去，还有在构造函数中手动做的 assign 操作，这会增加代码执行耗时。
综上两点，JS class 还是非常有使用它的价值的，不用逃避，把它用在合适的场景，肯定会发现其魅力~~
以上就是JS class语法糖的深入剖析的详细内容，更多关于JS class语法糖的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序 图片绝对定位(背景图片)的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了关于前端JavaScript中的ES6，ES6是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017语法标准，ES6新特性目前只有在一些较新版本浏览器得到支持，老版本浏览器里面运行我们需要将ES6转换为ES52021-10-10
这篇文章主要介绍了 微信小程序 Audio API详解及实例代码的相关资料,需要的朋友可以参考下2016-09-09
本篇章我们将了解lodash里内部关于Data的操作方法，重点关注getData、setData两个内部方法，同时由实现上引申其他内部封装的方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了让chatGPT教你如何使用taro创建mbox实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
js有多种数据类型（Number（数值）、String（字符串）、Boolean（布尔值）、Null、Undefined、Symbol、Object、函数等），在开发过程中难免需要判断数据类型，本文总结了四种判断方法给大家分享,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序 http请求详细介绍的相关资料,需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了TS 类型兼容教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 转发功能的实现的相关资料,这里提供实现方法及实例帮助大家学习理解，需要的朋友可以参考下2017-08-08
一文了解JavaScript用Element Traversal新属性遍历子元素
这篇文章主要介绍了一文了解JavaScript用Element Traversal新属性遍历子元素，文章围绕Element Traversal新属性的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-11-11
最新评论