先来看一下传统的面向类式的写法:

function Foo(name) {
this.name = name;
} Foo.prototype.sayName = function() {
console.log('name: ' + this.name)
} function Bar(name, age) {
Foo.call(this, name);
this.age = age;
} Bar.prototype = Object.create(Foo.prototype); Bar.prototype.sayAge = function() {
console.log('age: ' + this.age)
} var bar1 = new Bar('bar1', 13); bar1.sayName();
bar1.sayAge();

这里的Object.create也可以替换成Object.setPrototypeOf,但是我们这里并不care它的constructor指向是否正确,所以从可读性的角度我们用Object.create。(why ? 请参考上一篇)

上面是传统的,也是最为推崇的寄生组合式继承模式,但是es6诞生以后,这种写法就不再流行了,更多的是利用class的语法糖,我们来看代码:

class Foo {
constructor(name) {
this.name = name;
}
sayName() {
console.log('name: ' + this.name);
}
} class Bar extends Foo {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log('age: ' + this.age);
}
} var bar3 = new Bar('bar3', 15); bar3.sayName();
bar3.sayAge();

class的语法优势在于没有了prototype的混乱,很轻松地实现继承,利用super方法轻松实现构造函数的复制,等同于传统的call所实现的效果,extends实现委托机制,等同于Object.create所实现的效果。

但是缺陷在于加深了人们对于类以及继承的误解。

我们再来看利用委托的设计模式:

Foo = {
init(name) {
this.name = name
},
sayName() {
console.log('name: ' + this.name);
}
} Bar = Object.create(Foo); Bar.inits = function(name, age) {
Foo.init.call(this, name);
this.age = age;
} Bar.sayAge = function() {
console.log('age: ' + this.age);
} var bar = Object.create(Bar); bar.inits('bar', 14); bar.sayName();
bar.sayAge();

同样,这里没有prototype的出现,也没有new构造函数调用,完全依靠委托的机制,完全是对象之间的联系。这种设计模式要求我们不再利用多态去重写原有的函数或属性,而是用不同的函数名或属性名消除这种歧义。

可能存在的缺陷是之前的new构造函数被分成了两段代码。

var bar = Object.create(Bar);

bar.inits('bar', 14);

但是有一个好处在于我们可以关注点分离,使得创建和初始化分离。

以上三种是目前主流的实现仿类以及继承的范式,第二种目前相对较为流行,第三种更生僻一些,但是却最符合JavaScript的设计思想,没有类的概念,没有构造函数,只有对象与对象的联系,行为委托。并不强求一定要用哪一种,还是看个人喜好吧,因为很难讲三者的优胜好坏。

end

更适用于JavaScript的设计模式:面向委托的设计,了解一下?(下)的更多相关文章

  1. 深入理解javascript之设计模式

    设计模式 设计模式是命名.抽象和识别对可重用的面向对象设计实用的的通用设计结构. 设计模式确定类和他们的实体.他们的角色和协作.还有他们的责任分配. 每个设计模式都聚焦于一个面向对象的设计难题或问题. ...

  2. 面向对象,更适合JavaScript

    面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类.继承.封装.多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块.水泥能搭建小屋,也能造 ...

  3. js实例分析JavaScript中的事件委托和事件绑定

    我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...

  4. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  5. javascript事件设计模式

    JavaScript事件设计模式 http://plkong.iteye.com/blog/213543 http://www.docin.com/p-696665922.html

  6. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  7. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  8. Java设计原则:面向接口的设计

    前言:在一个面向对象的系统中,系统的各种功能是由许许多多的不同对象协作完成的.在这种情况下,各个对象内部是如何实现对系统设计人员来说就不那么重要:而各个对象之间的协作关系则成为系统设计的关键.小到不同 ...

  9. JAVA设计模式总结之六大设计原则

    从今年的七月份开始学习设计模式到9月底,设计模式全部学完了,在学习期间,总共过了两篇:第一篇看完设计模式后,感觉只是脑子里面有印象但无法言语.于是决定在看一篇,到9月份第二篇设计模式总于看完了,这一篇 ...

随机推荐

  1. 经测试稳定可用的蓝牙链接通信Demo,记录过程中遇到的问题的思考和解决办法,并整理后给出一个Utils类可以简单调用来实现蓝牙功能

    说明:这是本人在蓝牙开发过程中遇到过的问题记录和分析,以及解决办法. 在研究过程中,许多的前人给出的解决方案和思路指导对我相当有帮助,但并非都是可采取的解决方法, 经过本人对这些方法的测试和使用过后, ...

  2. docker 相关

    https://www.cnblogs.com/neptunemoon/p/6512121.html centos7 安装docker1.更新yum包yum update2.卸载旧版本(如果安装过旧版 ...

  3. React-Native: bios打开VT-x选项

    问题: 我在Android Studio新建一个虚拟机的时候出现如图错误: 解决方案:重启电脑,开机的时候不停的按f12(不同的主机不一样),进入bios,然后打开Virtualization Tec ...

  4. 【译】图解Transformer

    目录 从宏观上看Transformer 把张量画出来 开始编码! 从宏观上看自注意力 自注意力的细节 自注意力的矩阵计算 "多头"自注意力 用位置编码表示序列的顺序 残差 解码器 ...

  5. Day02 - Ruby比一比:Module模块与Class类别

    前情提要 在第一天里,我很激昂地用Ruby的类别.物件.方法,写了宣言! class TingIsIronman def initialize @message =“I'm going to writ ...

  6. word里如何将模板的样式(标题啊、字体啊)导入到另外的模板里

    点进去

  7. 修改Windows server 时间同步

    1.关闭“与Internet时间同步”选项. 2.禁用Windows时间服务,并将其设置为手动. 3.禁用Hyper-v时间同步服务,并将其设置为手动,这个在Hyper-v软件上选中要修改的虚拟机,设 ...

  8. Python设计模式 - UML - 对象图(Object Diagram)

    简介 对象图和类图的基本概念是类似的,可以看作类图在系统某一时刻的镜像,显示了该时刻系统中参与交互的各个对象以及它们之间的关系. 对象图的元素包括对象.链接.包,元素之间的关系和类图相似. 对象图建模 ...

  9. byte -> int

    传送门 传送门2 以下copy: int i = 0;   i += ((b[0] & 0xff) << 24);   i += ((b[1] & 0xff) <&l ...

  10. 我在Python学习中遇到的问题一

    开发工具:PyCharm 系统:macOs Serria 10.12.4 jetbrains出品,作为和idea一个公司的兄弟产品,延续了idea的易用性,并且操作按钮也基本一致 一. 执行环境问题 ...