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

原型模式说明

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

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

使用相关代码:

代码如下:

Prototype.prototype.userInfo = function() { return '个人信息,姓名: '+this.name+',年龄: '+this.age+',性别:'+this.sex+'
'; }

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

代码如下:

输出返回:

代码如下:

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

Object.create 使用说明

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

代码如下:

还可以包含 set,get 访问器方法;

其中,[set,get] 与 value 和 writable 不能同时出现;

1. 创建原型对象类:

代码如下:

创建原型方法:

代码如下:

使用方法

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

代码如下:
obj1 就具有 ProtoClass 原型方法 aMethod 的方法;
代码如下:
但是这种方法执行不到 ProtoClass 下 a,b,c 的成员属性:

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

代码如下:

var obj2 = Object.create(proto,{ foo:{value:'obj2'} });

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

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

3. 子类继承:

代码如下:
}
SubClass.prototype = Object.create(ProtoClass.prototype,{
foo:{value: 'subclass'}
});

SubClass.prototype.subMethod = function() { return this.a || this.foo; }

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

代码如下:

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

代码如下:

//其他代码;

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

代码如下:

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

代码如下:

function SubClass() { }

SubClass.prototype = Object.create(proto,{ foo:{value: 'subclass'} });

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

代码如下:

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

代码如下:

SubClass.prototype = new ProtoClass();

Object.create 相关说明

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

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

代码如下:

//----------------------------------------- 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 }

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)