深入理解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的两个ListBox子项互相调整的实现代码
May 07 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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下载xls文件(自己动手写的)
2014/04/18 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
php实现微信企业转账功能
2018/10/02 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python装饰器常见使用方法分析
2019/06/26 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
毕业生就业自荐信
2013/12/04 职场文书
学期自我评价
2014/01/27 职场文书
小学美术教学反思
2014/02/01 职场文书
出生公证委托书
2014/04/03 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
城管年度个人总结
2015/02/28 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server