JS class语法糖的深入剖析


Posted in Javascript onJuly 07, 2022

引言

在很早以前,写过一篇文章 “类”设计模式和“原型”设计模式——“复制”和“委托”的差异 ,大致意思就是说:代码复用,也就是继承、重写,有两种思路: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语法糖的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 #Javascript
js作用域及作用域链工作引擎
Promise静态四兄弟实现示例详解
Jul 07 #Javascript
Three.js实现雪糕地球的使用示例详解
二维码条形码生成的JavaScript脚本库
Jul 07 #Javascript
JS实现简单的九宫格抽奖
JS实现九宫格拼图游戏
You might like
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
对Python 除法负数取商的取整方式详解
2018/12/12 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python实现海螺图片的方法示例
2019/05/12 Python
Django 多环境配置详解
2019/05/14 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
安全事故检讨书
2014/01/18 职场文书
大学生作弊检讨书
2014/02/19 职场文书
终止劳动合同协议书
2014/04/14 职场文书
公司合作意向书范文
2014/07/30 职场文书
大四学生个人总结
2015/02/15 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
python垃圾回收机制原理分析
2022/04/13 Python