深入理解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图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
深入了解php4(1)--回到未来
2006/10/09 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
关于php中一些字符串总结
2016/05/05 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
jquery键盘事件介绍
2011/01/31 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
微信跳一跳辅助python代码实现
2018/01/05 Python
django反向解析和正向解析的方式
2018/06/05 Python
超简单的Python HTTP服务
2019/07/22 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
苹果香港官方商城:Apple香港
2016/09/14 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
行政助理求职自荐信
2013/10/26 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书