深入理解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实现的立体文字渐变效果
May 17 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
微信小程序入门教程
Nov 18 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 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将数据库导出成excel的方法
2010/05/07 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
javascript实现画板功能
2020/04/12 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python实现逻辑回归的方法示例
2017/05/02 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python操作文件的参数整理
2019/06/11 Python
python全栈知识点总结
2019/07/01 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
python3中布局背景颜色代码分析
2020/12/01 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
市场调查策划方案
2014/06/10 职场文书
2014年党员整改措施
2014/10/24 职场文书
市场总监岗位职责
2015/02/11 职场文书
主持人大赛开场白
2015/05/29 职场文书
无故旷工检讨书
2015/08/15 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Vue的生命周期一起来看看
2022/02/24 Vue.js
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python