JavaScript设计模式之原型模式(Object.create与prototype)介绍


Posted in Javascript onDecember 28, 2014

原型模式说明

说明:使用原型实例来 拷贝 创建新的可定制的对象;新建的对象,不需要知道原对象创建的具体过程;

过程:Prototype => new ProtoExam => clone to new Object;

使用相关代码:

function Prototype() {

    this.name = '';

    this.age = '';

    this.sex = '';

}
Prototype.prototype.userInfo = function() {

    return '个人信息, 姓名: '+this.name+', 年龄: '+this.age+', 性别:'+this.sex+'<br />';

}

现在需要两个或以上的个人信息内容:

var proto = new Prototype();

var person1 = Object.create(proto);

person1.name = '小明';

person1.sex = '男';

person1.age = 35;

person1.userInfo(); 

//

var person2 = Object.create(proto);

person2.name = '小华';

person2.sex = '女';

person2.age = 33;

person2.userInfo();

输出返回:

个人信息, 姓名: 小明, 年龄: 35, 性别: 男

个人信息, 姓名: 小华, 年龄: 33, 性别: 女

原型模式,一般用于 抽象结构复杂,但内容组成差不多,抽象内容可定制,新创建只需在原创建对象上稍微修改即可达到需求的情况;

Object.create 使用说明

1>. 定义: 创建一个可指定原型对象的并可以包含可选自定义属性的对象;
2> Object.create(proto [, properties]);  可选,用于配置新对象的属性;

1. proto: 要创建新对象的 原型,必须,可为 null; 这个 proto 要是已经创建的[new过],或 对象.prototype 才有价值;

2. properties: 可选,结构为:

{

     propField: {

           value: 'val'|{}|function(){},

           writable: true|false,

           enumerable: true|false,

           configurable: true|false,

           get:function(){return 10},

           set:function(value){}

     }

}

自定的属性有以下的四种本置属性:

value: 自定义属性值;

writable: 该项值是否可编辑,默认为 false, 当为 true 时,obj.prodField 可赋值;否则只读;

enumerable: 可枚举; 

confirurable: 可配置;
还可以包含 set, get 访问器方法;
其中,[set, get] 与 value 和 writable 不能同时出现;

1. 创建原型对象类:

function ProtoClass(){

   this.a = 'ProtoClass';

   this.c = {};

   this.b = function() {

   }

}

创建原型方法:
ProtoClass.prototype.aMethod = function() {

     //this.a;

     //this.b();
 return this.a;

}

使用方法

1. 以 ProtoClass.prototype 创建一个对象;

var obj1 = Object.create(ProtoClass.prototype, {

    foo:{value: 'obj1', writable: true}

})

obj1 就具有 ProtoClass 原型方法 aMethod 的方法;
obj1.aMethod();

//就会输出 undefined 方法可访问,ProtoClass 成员无法访问

但是这种方法执行不到 ProtoClass 下 a, b, c 的成员属性:

2. 采用 实例化的 ProtoClass 做原型:

var proto = new ProtoClass();
var obj2 = Object.create(proto, {

    foo:{value:'obj2'}

});

这样创建的 obj2 就具有 ProtoClass 的所有的成员属性 a, b, c 以及 aMethod 原型方法; 并添加了一个 foo 只读 数据属性;
obj2.a; //ProtoClass

obj2.c: //[Object]

obj2.b(); //
obj2.aMethod(); //ProtoClass

obj2.foo; //obj2

3. 子类继承:

function SubClass() {

    

}

SubClass.prototype = Object.create(ProtoClass.prototype ,{

    foo:{value: 'subclass'}

});
SubClass.prototype.subMethod = function() {

     return this.a || this.foo;

}

这种方法可以继承 到 ProtoClass 的 aMethod 方法,执行;

var func = new SubClass();

func.aMethod() ;//undefined,读不到 ProtoClass 的成员属性,a,b,c

func.subMethod();//subclass

要让 SubClass 能读取到 ProtoClass 的成员属性,SubClass 要改下:

function SubClass()

{

    ProtoClass.call(this);

}
//其他代码;

这种方法就可以获取 ProtoClass 的成员属性及原型方法;:

var func = new SubClass();

func.aMethod() ;//ProtoClass

func.subMethod();//ProtoClass

还有一种方法,就是使用 实例化的 ProtoClass 对象,做为 SubClass 的原型;

var proto = new ProtoClass();
function SubClass() {

}
SubClass.prototype = Object.create(proto, {

    foo:{value: 'subclass'}

});

这样 SubClass 实例化后,就可以获取到 ProtoClass 所有的属性及原型方法,以及创建一个只读数据属性 foo;

var func = new SubClass();

func.foo; //subclass

func.a; //ProtoClass

func.b(); //

func.c; //[Object]

func.aMethod(); //ProtoClass

4. 另外的创建继承方法,跟 Object.create 使用 实例化的ProtoClass 做原型 效果一样:

function SubClass() {
this.foo = 'subclass'; //不过这边可读写

}

SubClass.prototype = new ProtoClass();

Object.create 相关说明

Object.create 用于创建一个新的对象,当为 Object 时 prototype 为 null, 作用与 new Object(); 或 {} 一致;

当为 function 时,作用与 new FunctionName 一样;

//1 Object

var o = {}

//等同于

var o2 = Object.create({});

//两者 constructor 一样;
//-----------------------------------------

function func() {

    this.a = 'func';

}

func.prototype.method = function() {

    return this.a;

}
var newfunc = new func();

//等同于[效果一样]

var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {

   a: {value:'func', writable:true},

   method: {value: function() {return this.a;} }

});

但是 newfunc 与 newfunc2 在创建它们的对象的函数引用是不一样的.

newfunc 为 function func() {...},newfunc2 为 function Function { Native }

Object.create(proto[, propertiesField]):

proto 说明,该值为必须,可以为 null, 如果没设定,将会抛出异常;

proto 为非 null, 即为已 实例化的值,即已经 new 过的值;javaScript 中的 对象大多有 constructor 属性,这个属性说明 此对象是通过哪个函数实例化后的对象;

propertiesField 为可选项,设定新创建对象可能需要的成员属性或方法;

Javascript 相关文章推荐
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
javascript中定义类的方法汇总
Dec 28 #Javascript
js数组的操作指南
Dec 28 #Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 #Javascript
javascript+canvas制作九宫格小程序
Dec 28 #Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 #Javascript
浅谈Javascript Base64 加密解密
Dec 28 #Javascript
JavaScript设计模式之代理模式介绍
Dec 28 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python 切换root 执行命令的方法
2019/01/19 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
如何强制垃圾回收
2015/10/06 面试题
国庆节文艺活动方案
2014/02/03 职场文书
心理健康活动总结
2014/04/30 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
简爱读书笔记
2015/06/26 职场文书