JavaScript代码复用模式

bergwhite 发布于2019-08-21 10:21 / 1668人阅读

摘要：如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。方法继承自对象这是中构造函数链的一个示例。

代码复用及其原则

代码复用，顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用，从而构建新的程序。在谈及代码复用的时候，我们首先可以想到的是继承性。代码复用的原则是：

优先使用对象组合，而不是类继承

在js中，由于没有类的概念，因此实例的概念也就没多大意义，js中的对象是简单的键-值对，可以动态的创建和修改它们。

但在js中，我们可以使用构造函数和new操作符来实例化一个对象，这与其他使用类的编程语言在语法上有其相似之处。

例如：

var trigkit4 = new Person();

js在调用构造函数Person时似乎看起来是一个类，但其实际上仍然是一个函数，这让我们产生了一些假定在类的基础上的开发思路和继承模式，我们可以称之为“类式继承模式”。

传统的继承模式是需要class关键字的，我们假定以上的类式继承模式为现代继承模式，这是一种不需要以类的方式考虑的模式。

类式继承模式

看下面两个构造函数Parent()和Child()的例子：

当使用new Child()语句创建一个对象时，它会通过原型从Parent()实例获取它的功能，比如：

var kid = new Child();
kid.say();//Allen

原型链

讨论一下类式继承模式下原型链的工作原理，我们将对象看做是内存中某处的块，该内存块包含数据以及指向其他块的引用。当用new Parent()语句创建一个对象时，就会创建如下图左边的这样一个块，这个块保存了name属性，如果想访问say()方法，我们可以通过指向构造函数Parent()的prototype（原型）属性的隐式链接__proto__，便可访问右边区块Parent.prototype。

那么，当使用var kid = new Child()创建新对象时会发生什么？如下图：

使用new Child()语句所创建的对象除了隐式链接__proto__外，它几乎是空的。这种情况下，__proto__指向了在inherit()函数中使用new Parent()语句所创建的对象

当执行kid.say()时，由于最左下角的区块对象并没有say()方法，因此他将通过原型链查询中间的区块对象，然而，中间的区块对象也没有say()方法，因此他又顺着原型链查询到最右边的区块对象，而该对象正好有say()方法。完了吗？

执行到这里的时候并没有完，在say()方法中引用了this.name，this指向构造函数所创建的对象，在这里，它指向了new Child()这个区块，然而，new Child()中并没有name属性，为此，将查询中间区块，而中间区块正好有name属性，至此，原型链的查询完毕。

更详细的讨论请查看我这篇文章：JavaScript学习总结（五）原型和原型链详解

共享原型

本模式的法则在于：可复用的成员应该转移到原型中而不是放置在this中。因此，处于继承的目的，任何值得继承的东西都应该放在原型中实现。所以，可以将子对象的原型与父对象的原型设置为相同即可，如下示例所示：

function inherit(C,P){
    C.prototype = P.prototype;
}

子对象和父对象共享同一个原型，并且可以同等的访问say()方法。然而，子对象并没有继承name属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

继承一个对象的功能

使用构造函数链的概念和Function.apply()方法，来模拟js中传统的类继承行为：

首先，在newObject的构造函数中，在oldObject上调用一个apply方法，传入对新的对象的引用和参数数组。apply方法继承自Function对象

newObject.prototype = new oldObject();

这是js中构造函数链的一个示例。当创建一个newObject的新实例的时候，newObject以这样一种方式继承了旧对象的方法和属性。

服务器托管私有云代码复用 javascript命令模式 javascript严格模式 javascript设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85382.html

设计模式（通往高手之路的必备技能）

摘要：设计模式的定义在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。从前由于使用的局限性，和做的应用相对简单，不被重视，就更谈不上设计模式的问题。 ‘从大处着眼，从小处着手’，以前对这句话一知半解，自从踏出校门走入社会，开始工作以来，有了越来越深的理解，偶有发现这句话用在程序开发中也有用，所以，近段时间开始尝试着分析jQuery源码，分析angularjs源码，学习设计模式。设...

paraller 2019-08-21 18:35 评论0 收藏0
5分钟即可掌握的前端高效利器：JavaScript 策略模式

摘要：策略模式由两部分构成一部分是封装不同策略的策略组，另一部分是。策略模式的典型应用场景是表单校验中，对于校验规则的封装。然而图像的压缩及上传错误处理等部分是公用的。遂考虑使用策略模式封装。浅谈 JavaScript 中策略模式的使用：什么是设计模式什么是策略模式策略模式在 JavaScript 中的应用（使用策略模式封装百度AI识别调用）策略模式在 Vue 组件封装中的应用（...

BlackFlagBin 2019-08-23 11:48 评论0 收藏0
JavaScript设计模式与开发实践 - 策略模式

摘要：引言本文摘自设计模式与开发实践在现实中，很多时候也有多种途径到达同一个目的地。将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。一个基于策略模式的程序至少由两部分组成。引言本文摘自《JavaScript设计模式与开发实践》在现实中，很多时候也有多种途径到达同一个目的地。比如我们要去某个地方旅游，可以根据具体的实...

xi4oh4o 2019-08-21 17:38 评论0 收藏0
javascript设计模式学习日记--模板方法模式

摘要：是模板方法，他封装了子类中算法框架，它作为一个算法的模板，去指导子类以什么样的顺序去执行代码。制定算法骨架，让子类具体实现，这大概就是模板方法模式了吧模板方法模式：把相似的流程抽象出来作为一个父类，来封装好子类的算法框架，然后子类继承这个父类，并且可以重写非公有的方法，来实现自己的业务逻辑。聚个栗子泡茶泡咖啡是很好的例子，不同企业的面试流程也是一个很好的例子对于很多大型公司，...

jsdt 2019-08-22 16:57 评论0 收藏0
《Node.js设计模式》欢迎来到Node.js平台

摘要：事件多路复用器收集资源的事件并且把这些事件放入队列中，直到事件被处理时都是阻塞状态。最后，处理事件多路复用器返回的每个事件，此时，与系统资源相关联的事件将被读并且在整个操作中都是非阻塞的。本系列文章为《Node.js Design Patterns Second Edition》的原文翻译和读书笔记，在GitHub连载更新，同步翻译版链接。欢迎关注我的专栏，之后的博文将在专栏同步：...

Paul_King 2019-08-21 17:46 评论0 收藏0