深入理解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 相关文章推荐
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
移动端界面的适配
Jan 11 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
ECMAScript 基础知识
2007/06/29 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python使用mysql的两种使用方式
2018/03/07 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python3使用GUI统计代码量
2019/09/18 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python编写万花尺图案实例
2021/01/03 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
食堂个人先进事迹
2014/01/22 职场文书
运动会通讯稿400字
2014/01/28 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
教学实验楼管理制度
2014/02/01 职场文书
追悼会主持词
2014/03/20 职场文书
单位活动策划方案
2014/08/17 职场文书
搬迁通知
2015/04/20 职场文书