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函数
May 27 Javascript
JsDom 编程小结
Aug 09 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
理解JS绑定事件
Jan 19 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
js实现简单的倒计时
Jan 28 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
JavaScript中的数学运算介绍
2014/12/29 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
房屋租赁授权委托书范本
2014/09/20 职场文书
批评与自我批评总结
2014/10/17 职场文书
员工工作表扬信
2015/05/05 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
速龙x4-860k处理器相当于i几
2022/04/20 数码科技