深入理解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的deferred对象使用详解
Aug 20 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jquery实现用户打分评分特效
May 28 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 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处理postfix邮件内容的方法
2015/06/16 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jQuery事件详解
2017/02/23 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python tornado修改log输出方式
2019/11/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
会计专业毕业生求职信分享
2014/01/03 职场文书
公司任命书范本
2014/06/04 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python