深入理解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 相关文章推荐
prototype 1.5 & scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript的面向对象(二)
Nov 09 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
前端监听websocket消息并实时弹出(实例代码)
Nov 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jQuery live
2009/05/15 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
python list多级排序知识点总结
2019/10/23 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
小学教师自我鉴定范文
2014/03/20 职场文书
实习指导教师评语
2014/12/30 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
CAD实训总结范文
2015/08/03 职场文书
辞职离别感言
2015/08/04 职场文书
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python