详解Javascript 中的 class、构造函数、工厂函数


Posted in Javascript onDecember 20, 2017

到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立。现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数。他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择。

首先我们来看一下,这三种方法是怎样的

// class 关键字,ES6新特性
class ClassCar {
 drive () {
  console.log('Vroom!');
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 构造函数
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log('Vroom!');
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工厂函数
const proto = {
 drive () {
  console.log('Vroom!');
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

这些方法都是基于原型的创建,而且都支持在构造时函数中私有变量的实现。换句话来说,这些函数拥有着大部分相同的特性,甚至在很多场景下,他们是等价的。

在 Javascript 中,每一个函数都能返回一个新的对象。当它不是构造函数或者类的时候,它就被称作工厂函数。

ES6的类其实是构造函数的语法糖(至少现阶段是这样实行的),所以接下来讨论的所有内容都适用于构造函数的也适用于ES6类:

class Foo {}
console.log(typeof Foo); // function

构造函数和ES6类的好处

  • 大部分的书会教你去用类和构造函数
  • ‘ this ' 是指向新的这个对象的。
  • 一些人喜欢 new 关键字的可读性
  • 也许还会有一些很小的细节方面的差别,但是如果在开发过程中没有问题的话,也不用太担心。

构造函数和ES6类的坏处

1. 你需要 new 关键字

到了ES6,构造函数和类都需要带 new 关键字。

function Foo() {
 if (!(this instanceof Foo)) { return new Foo(); }
}

在ES6中,如果你尝试调用类函数没有 new 关键字就会抛出一个任务。如果你要个不用 new 关键字的话,就只能使用工厂函数把它包起来。

2. 实例化过程中的细节暴露给了外界API

所有的调用都紧紧的关联到了构造器的实现上,如果你需要自己在构造过程中动一些手脚,那就是一个非常麻烦的事情了。

3. 构造器没有遵守 Open / Closed 法则

因为 new 关键字的细节处理,构造器违反 Open / Closed 法则:API应该开放拓展,避免修改。

我曾经质疑过,类和工厂函数是那么的相似,把类函数升级为一个工厂函数也不会有什么影响,不过在JavaScript里面,的确有影响。

如果你开始写着构造函数或者类,但是写着写着,你发现需要工厂函数的灵活性,这个时候你不能简单的就改改简单改改函数一走了之。

不幸的是,你是个JavaScript程序员,构造器改造成工厂函数是一个大手术:

// 原来的实现:
// class Car {
//  drive () {
//   console.log('Vroom!');
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现:
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log('Vrooom!');
   },
   getOptions: function () {
    return ['leather', 'wood', 'pearl'];
   }
  }
 }
};
// 期望中的用法是:
const newCar = AutoMaker.Car('premium');
newCar.drive(); // 'Vrooom!'
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property 'undefined' of
// undefined at new AutoMaker.Car

在上面例子里面,我们从一个类开始,最后把它改成来一个可以根据特定的原型来创建对象的工厂函数,这样的函数可以广泛应用于接口抽象和特殊需求定制。

4. 使用构造器让 instanceof 有可乘之机

构造函数和工厂函数的不同就是 instanceof 操作符,很多人使用 instanceof 来确保自己代码的正确性。但是说实话,这是有很大问题的,建议避免 instanceof 的使用。

instanceof 会说谎。

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: 'a'};
foo.prototype = bar;
// bar是一个foo的实例吗,显示不是
console.log(bar instanceof foo); // false
// 上面我们看到了,他的确不是一个foo实例
// baz 显然也不是一个foo的实例,对吧?
const baz = Object.create(bar);
// ...不对.
console.log(baz instanceof foo); // true. oops.

instanceof 并不会像其他强类型语言那样做检查,他只是检查了原型链上的对象。

在一些执行上下文中,他就会失效,比如你改变了 Constructor.prototype 的时候。

又比如你开始些的是一个构造函数或者类,之后你又将它拓展为一个另一个对象,就像上面改写成工厂函数的情况。这时候 instanceof 也会有问题。

总而言之, instanceof 是另一个构造函数和工厂函数呼唤的大改变。

用类的好处

  • 一个方便的,自包含的关键字
  • 一个唯一的权威性方法在JavaScript来实现类。
  • 对于其他有class的语言开发经验的开发者有很好的体验。

用类的坏处

构造器所有的坏处, 加上:

使用 extends 关键字创建一个有问题的类,对于用户是一个很大的诱惑。
类的层级继承会造成很多有名的问题,包括 fragile base class(基础类会因为继承被破坏),gorilla banana problem(对象混杂着复杂的上下文环境),duplication by necessity(类在继承多样化时需要时时修改)等等。

虽然其他两种方法也有可能让你陷入这些问题,但是在使用 extend 关键字的时候,环境使然,就会把你引导上这条路。换句话说,他引导你向着一个不灵活的关系编写代码,而不是更有复用性的代码。

使用工厂函数的好处

工厂函数比起类和构造函数都更加的灵活,也不会把人引向错误的道路。也不会让你陷入深深的继承链中。你可以使用很多手段来模拟继承

1. 用任意的原型返回任意的对象

举个例子,你可以通过同一个实现来创建不同的实例,一个媒体播放器可以针对不同的媒体格式来创建实例,使用不同的API,或者一个事件库可以是针对DOM时间的或者ws事件。

工厂函数也可以通过执行上下文来实例化对象,可以从对象池中得到好处,也可以更加灵活的继承模型。

2. 没有复杂重构的担忧

你永远不会有把工厂函数转换成构造函数这样的需求,所以重构也没必要。

3. 没有 new

你不用new关键字来新建对象,自己可以掌握这个过程。

4. 标准的 this 行为

this 就是你熟悉的哪个this,你可以用它来获取父对象。举个例子来说,在 player.create() 中,this指向的是player,也可以通过call和apply来绑定其他this。

5. 没有 instanceof 的烦恼

6. 有些人喜欢直接不带new的写法的可读直观性。

工厂函数的坏处

  • 并没有自动的处理原型,工厂函数原型不会波及原型链。
  • this 并没有自动指向工厂函数里的新对象。
  • 也许还会有一些很小的细节方面的差别,但是如果在开发过程中没有问题的话,也不用太担心。

结论

在我看来,类也许是一个方便的关键字,但是也不能掩饰他会把毫无防备的用户引向继承深坑。另一个风险在于未来的你想要使用工厂函数的可能性,你要做非常大的改变。

如果你是在一个比较大的团队协作里面,如果要修改一个公共的API,你可能干扰到你并不能接触到的代码,所以你不能对改装函数的影响视而不见。

工厂模式很棒的一个地方在于,他不仅仅更加强大,更加灵活,也可以鼓励整个队伍来让API更加简单,安全,轻便。

总结

以上所述是小编给大家介绍的详解Javascript 中的 class、构造函数、工厂函数,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 #Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 #Javascript
Angular2+如何去除url中的#号详解
Dec 20 #Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 #Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php简单实现数组分页的方法
2016/04/30 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
在Javascript中定义对象类别
2006/12/22 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
对python中return和print的一些理解
2017/08/18 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python标记语句块使用方法总结
2019/08/05 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Python截图并保存的具体实例
2021/01/14 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
会计电算化应届生自荐信
2014/02/25 职场文书
春季防火方案
2014/05/10 职场文书
公司董事任命书
2015/09/21 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python