更适用于JavaScript的设计模式:面向委托的设计,了解一下?(下)
先来看一下传统的面向类式的写法:
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的设计模式:面向委托的设计,了解一下?(下)的更多相关文章
- 深入理解javascript之设计模式
设计模式 设计模式是命名.抽象和识别对可重用的面向对象设计实用的的通用设计结构. 设计模式确定类和他们的实体.他们的角色和协作.还有他们的责任分配. 每个设计模式都聚焦于一个面向对象的设计难题或问题. ...
- 面向对象,更适合JavaScript
面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类.继承.封装.多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块.水泥能搭建小屋,也能造 ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- javascript事件设计模式
JavaScript事件设计模式 http://plkong.iteye.com/blog/213543 http://www.docin.com/p-696665922.html
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- Java设计原则:面向接口的设计
前言:在一个面向对象的系统中,系统的各种功能是由许许多多的不同对象协作完成的.在这种情况下,各个对象内部是如何实现对系统设计人员来说就不那么重要:而各个对象之间的协作关系则成为系统设计的关键.小到不同 ...
- JAVA设计模式总结之六大设计原则
从今年的七月份开始学习设计模式到9月底,设计模式全部学完了,在学习期间,总共过了两篇:第一篇看完设计模式后,感觉只是脑子里面有印象但无法言语.于是决定在看一篇,到9月份第二篇设计模式总于看完了,这一篇 ...
随机推荐
- xshell下mysql数据库只导出表结构不导出数据
操作系统:linux: 使用软件:xshell.winscp 进入系统之后输入命令: mysqldump -u 用户名 - p 密码 -d 数据库名 > aaa.sql 注意字符间的空格. 之后 ...
- hadoop启动报错:localhost: ssh: Could not resolve hostname localhost
hadoop启动journalnode时报错:localhost: ssh: Could not resolve hostname localhost: Temporary failure in na ...
- Java IO、NIO、AIO知识总结
本文主要讲述下自己对IO的理解,对IO的用法和细则可能没有顾虑到. 本文的理解基于以下几篇文章,他们对各自部分都讲的很细,对我理解IO提供了很大帮助. https://www.cnblogs.com/ ...
- ARTS打卡计划第一周-Review
本周分享的文章来自于medium的 Testing Best Practices for Java + Spring Apps 这个文章主要讲的是java测试的一些最佳实践 1.避免函数返回void, ...
- 基于WebGL架构的3D可视化平台—实现小车行走路线演示
小车行走路线演示New VS Old 刚接触ThingJS的时候,写的一个小车开进小区的演示,今天又看了教程中有movePath这个方法就重新写了一遍,其中也遇到了一些问题,尤其突出的问题就是小车过弯 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- Celery 1
Celery是一个用Python开发的异步的分布式任务调度模块 Celery有以下优点: 简单:一但熟悉了celery的工作流程后,配置和使用还是比较简单的 高可用:当任务执行失败或执行过程中发生连接 ...
- Mapbox Studio Classic 闪退问题解决方案
之前安装过Mapbox Studio Classic 0.38,好久没有用了,今天用的时候发现不停的闪退,经过一番折腾,发现删除 %USERPROFILE%\.mapbox-studio 目录下所有文 ...
- sonar之阿里巴巴java规则(p3c)
今天为了打包生成sonar-p3c-pdm插件,折腾了半天.sonar版本v6.7.6,p3c源码地址https://gitee.com/jasonlong10/sonar-p3c-pmd-plugi ...
- Web自动化附件上传
在进行web界面自动化编写时,可以根据定位元素的方式进行编写,但是如果某一个功能涉及到有附件上传功能,那么该如何解决呢? 继续往下看>>>>> 场景:登录系统后,进行新增 ...