深入理解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中的console.trace()函数介绍
Dec 29 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
JavaScript数组及常见操作方法小结
Nov 13 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 cookie使用方法学习笔记分享
2013/11/07 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python插入排序算法实例分析
2015/07/03 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python3.6的venv模块使用详解
2018/08/01 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python表达式的优先级详解
2020/02/18 Python
如何利用Python识别图片中的文字
2020/05/31 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
行政部主管岗位职责
2013/12/28 职场文书
销售业务员岗位职责
2014/01/29 职场文书
房屋继承公证书
2014/04/10 职场文书
个人授权委托书模板
2014/09/14 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
校友回访母校寄语
2015/02/26 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
施工安全协议书
2016/03/22 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript