深入理解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面向对象编程(一) 实例代码
Jun 25 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
js中let和var定义变量的区别
Feb 08 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
护理实习自我鉴定
2013/12/14 职场文书
门卫工作岗位职责
2013/12/17 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
工作报告范文
2019/06/20 职场文书
SQL基础的查询语句
2021/11/11 MySQL
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js