深入理解JavaScript系列(42):设计模式之原型模式详解


Posted in Javascript onMarch 04, 2015

介绍

原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象。

正文

对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象,例如,如果一个构造函数的原型包含了一个name属性(见后面的例子),那通过这个构造函数创建的对象都会有这个属性。

在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很多讲解的都是关于类的,但是现实情况是基于原型继承的JavaScript完全避免了类(class)的概念。我们只是简单从现有的对象进行拷贝来创建对象。

真正的原型继承是作为最新版的ECMAScript5标准提出的,使用Object.create方法来创建这样的对象,该方法创建指定的对象,其对象的prototype有指定的对象(也就是该方法传进的第一个参数对象),也可以包含其他可选的指定属性。例如Object.create(prototype, optionalDescriptorObjects),下面的例子里也可以看到这个用法:

// 因为不是构造函数,所以不用大写

var someCar = {

    drive: function () { },

    name: '马自达 3'

};
// 使用Object.create创建一个新车x

var anotherCar = Object.create(someCar);

anotherCar.name = '丰田佳美';

Object.create运行你直接从其它对象继承过来,使用该方法的第二个参数,你可以初始化额外的其它属性。例如:
var vehicle = {

    getModel: function () {

        console.log('车辆的模具是:' + this.model);

    }

};
var car = Object.create(vehicle, {

    'id': {

        value: MY_GLOBAL.nextId(),

        enumerable: true // 默认writable:false, configurable:false

 },

    'model': {

        value: '福特',

        enumerable: true

    }

});

这里,可以在Object.create的第二个参数里使用对象字面量传入要初始化的额外属性,其语法与Object.defineProperties或Object.defineProperty方法类型。它允许您设定属性的特性,例如enumerable, writable 或 configurable。

如果你希望自己去实现原型模式,而不直接使用Object.create 。你可以使用像下面这样的代码为上面的例子来实现:

var vehiclePrototype = {

    init: function (carModel) {

        this.model = carModel;

    },

    getModel: function () {

        console.log('车辆模具是:' + this.model);

    }

};


function vehicle(model) {

    function F() { };

    F.prototype = vehiclePrototype;
    var f = new F();
    f.init(model);

    return f;

}
var car = vehicle('福特Escort');

car.getModel();

总结

原型模式在JavaScript里的使用简直是无处不在,其它很多模式有很多也是基于prototype的,就不多说了,这里大家要注意的依然是浅拷贝和深拷贝的问题,免得出现引用问题。

Javascript 相关文章推荐
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
Jquery-data的三种用法
Apr 18 jQuery
angularjs中的$eval方法详解
Apr 24 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
QML实现圆环颜色选择器
Sep 25 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
javascript 动态创建表格的2种方法总结
Mar 04 #Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 #Javascript
You might like
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
应届生个人求职信模板
2013/11/26 职场文书
集体婚礼证婚词
2014/01/13 职场文书
见习期自我鉴定
2014/01/31 职场文书
社区八一活动方案
2014/02/03 职场文书
淘宝活动策划方案
2014/02/06 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
创新型城市实施方案
2014/03/06 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
《月球之谜》教学反思
2016/02/20 职场文书