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

 更新时间:2014年12月28日 10:02:19   投稿:junjie   我要评论

这篇文章主要介绍了JavaScript设计模式之原型模式(Object.create与prototype)介绍,原型模式指使用原型实例来拷贝、创建新的可定制的对象,新建的对象,不需要知道原对象创建的具体过程,需要的朋友可以参考下

原型模式说明

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

过程: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 为可选项,设定新创建对象可能需要的成员属性或方法;

相关文章

  • vsCode安装使用教程和插件安装方法

    vsCode安装使用教程和插件安装方法

    Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器。这篇文章主要介绍了vsCode安装使用教程和插件安装方法,需要的朋友可以参考下
    2018-11-11
  • javascript基本常用排序算法解析

    javascript基本常用排序算法解析

    这篇文章主要为大家详细介绍了javascript基本常用排序算法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JS验证邮件地址格式方法小结

    JS验证邮件地址格式方法小结

    这篇文章主要介绍了JS验证邮件地址格式方法,结合两个实例形式分析了JavaScript基于正则表达式进行邮件格式验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JS排序之快速排序详解

    JS排序之快速排序详解

    这篇文章主要为大家详细介绍了JS快速排序的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • 从阶乘函数对比Javascript和C#的异同

    从阶乘函数对比Javascript和C#的异同

    今天学习Javascript函数,发现这完全是一个神奇的东西。跟我们平常所见强类型语言中的函数有好多不同。下面我们就从C#和JavaScript的两个计算阶乘的函数中比较两者的异同
    2012-05-05
  • 屏蔽F1~F12的快捷键的js函数

    屏蔽F1~F12的快捷键的js函数

    keyCod从113-123分别禁用了F2-F12键,13禁用了回车键(Enter),8禁用了退格键(BackSpace)
    2010-05-05
  • JavaScript实现的贝塞尔曲线算法简单示例

    JavaScript实现的贝塞尔曲线算法简单示例

    这篇文章主要介绍了JavaScript实现的贝塞尔曲线算法,结合简单实例形式分析了基于javascript的贝塞尔曲线算法的相关实现技巧,需要的朋友可以参考下
    2018-01-01
  • 使用React实现轮播效果组件示例代码

    使用React实现轮播效果组件示例代码

    React刚出来不久,组件还比较少,不像jquery那样已经有很多现成的插件了,于是自己写了一个基于React的轮播效果组件,现在分享给大家,有需要的可以参考借鉴。
    2016-09-09
  • 微信小程序自定义导航教程(兼容各种手机)

    微信小程序自定义导航教程(兼容各种手机)

    这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容,文中通过示例代码介绍的非常详细,兼容各种手机,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • js 判断一个元素是否在页面中存在

    js 判断一个元素是否在页面中存在

    js 判断一个元素是否存在此功能在项目中很实用,本人搜集整理了一些常用技巧,需要了解的朋友可以参考下
    2012-12-12

最新评论