[设计模式] JavaScript 之 原型模式 : Object.create 与 prototype

1. 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(); //ProtoClassobj2.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 为可选项,设定新创建对象可能需要的成员属性或方法;

时间: 2024-08-04 23:52:50

[设计模式] JavaScript 之 原型模式 : Object.create 与 prototype的相关文章

JavaScript的原型模式

原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象. http://www.cnblogs.com/TomXu/archive/2012/04/16/2436460.html http://www.cnblogs.com/silymer/archive/2012/11/02/2751803.html JS原型对象:所有实例都会共享它里面的属性和方法 原型(prototype),是 JavaScript 特有的一个概念,通过使用原型,JavaScrip

设计模式学习05—原型模式

一.动机与定义 之前学习原型模式一直以为原型模式目的是为了方便的创建相同或相似对象,用复制对象的方式替换new的方式,还研究了深克隆和浅克隆.最近仔细看了GOF的设计模式,发现原型模式的本意并不仅仅是复制对象这么简单. 复制对象确实是一方面,当我们需要大量相似,甚至相同对象的时候,除了一个个的new之外,还可以根据一个原型,直接复制出更多的对象.但是如果把原型模式认为只是复制对象这么简单就错了. 创建型模式主要讲如何创建对象,通常包含何时创建,谁来创建,怎么创建等.GOF书里面写的意图是,用原型

Java描述设计模式(05):原型模式

一.原型模式简介 1.基础概念 原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象. 2.模式结构 原型模式要求对象实现一个可以"克隆"自身的接口,这样就可以通过复制一个实例对象本身来创建一个新的实例.这样一来,通过原型实例创建新的对象,就不再需要关心这个实例本身的类型,只要实现了克隆自身的方法,就可以通过这个方法来获取新的对象,而无须再去通过new来创建. 3.代码实现 1).UML关系图 Java描述设计模

《Java设计模式》之原型模式

原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象.这就是原型模式的用意. 原型模式的结构 原型模式要求对象实现一个可以"克隆"自身的接口,这样就可以通过复制一个实例对象本身来创建一个新的实例.这样一来,通过原型实例创建新的对象,就不再需要关心这个实例本身的类型,只要实现了克隆自身的方法,就可以通过这个方法来获取新的对象,而无须再去通过new来创建. 原型模式有两种表现形式:(1)简单形式.(2)登记形式,这两

从王者荣耀看设计模式(十七.原型模式)

从王者荣耀看设计模式(原型模式) 一.简介 王者荣耀包含有很多的玩法,其中有一种游戏模式只在周六和周日开放,那就是--克隆模式.与常规的游戏双方阵营只允许出现单一英雄不同,在克隆模式中,双方各选择一个英雄进行克隆,换句话说,一个阵营的五个人操作的五个相同的英雄 二.模式动机 在软件系统中,有些对象的创建过程比较复杂,而且有时候需要频繁创建,原型模式通过给出一个原型对象来指明所要创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象,这就是原型模式的意图所在. 三.原型模式 原型模式

java设计模式 GOF23 04 原型模式

一.原型模式介绍 因为java中new一个新对象比clone一个对象需要花费等多的资源,所以一般需要 在短时间内创建大量对象并且new对象的过程需要耗费比较多的资源使用原型模式. 想要clone一个类需要这个类实现Cloneable接口,重载clone方法,这个接口在底层 通过内存拷贝实现clone对象,因此效率很高. package com.lz.prototype; import java.util.Date; public class ShallowClone implements Clo

设计模式之六:原型模式(Prototype)

原型模式:使用原型实例来指定创建对象的种类,并通过拷贝这个对象的值来创建新的对象. Specify the kind of objects to create using a prototypical instance, and create new objects by copying this prototype. UML图: 主要包括 Prototype:定义了一个包含克隆自身的接口 ConcretePrototype:具体的原型类,实现了克隆自身函数的类 Client:通过一个具体的原型

设计模式6:原型模式

原型模式用于创建重复的对象,同时又能保证性能. 这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆.当直接创建对象的代价比较大时,则采用这种模式.例如,一个对象需要在一个高代价的数据库操作之后被创建.我们可以缓存该对象,在下一个请求时返回它的克隆,在需要的时候更新数据库,以此来减少数据库调用.(Django ORM) 实现克隆操作,在 JAVA 继承 Cloneable,重写 clone()方法. 使用场景: 1.资源优化场景. 2.类初始化需要消化非常多的资源,这个资源包括数据.硬件资

php设计模式 四 (观察者 原型模式 迭代器模式)

观察者模式 观察者模式(有时又被称为发布-订阅Subscribe>模式.模型-视图View>模式.源-收听者Listener>模式或从属者模式)是软件设计模式的一种.在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来实现事件处理系统. 当一个对象的状态发生改变时,依赖他的对象全部会接到通知,并自动更新.观察者模式实现了低耦合 非入侵式的通知与更新机制. 观察者模式示例: 首先创建一个事