深入理解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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
初识javascript 文档碎片
Jul 13 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
jQuery操作css样式
May 15 jQuery
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
解决vue中的无限循环问题
Jul 27 Javascript
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与javascript对多项选择的处理
2006/10/09 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
微信小程序开发探究
2016/12/27 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python yield关键词案例测试
2019/10/15 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
python3排序的实例方法
2020/10/20 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
组工干部演讲稿
2014/09/02 职场文书
委托培训协议书
2014/11/17 职场文书
深入理解python多线程编程
2021/04/18 Python
Python中for后接else的语法使用
2021/05/18 Python