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