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

页面导航:首页 > 网络编程 > JavaScript > [设计模式] JavaScript 之 原型模式 : Object.create 与

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

来源: 作者: 时间:2016-02-05 11:06 【

1 Object create1 定义: 创建一个可指定原型对象的并可以包含可选自定义属性的对象;2 Object create(proto [, properties]); 可选,用于配置新对象的属性;复制代码1 proto: 要创建新对象的 原型
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(); //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 为可选项,设定新创建对象可能需要的成员属性或方法;
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<