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

基础教程