深入理解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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
JS 树形递归实例代码
2010/05/18 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python小项目之五子棋游戏
2019/12/26 Python
Django更新models数据库结构步骤
2020/04/01 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
海洋科学专业求职信
2014/08/10 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript