欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹

 更新時(shí)間：2014年12月28日 10:02:19   投稿：junjie  
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹,原型模式指使用原型實(shí)例來拷貝、創(chuàng)建新的可定制的對(duì)象,新建的對(duì)象,不需要知道原對(duì)象創(chuàng)建的具體過程,需要的朋友可以參考下

原型模式說明

說明：使用原型實(shí)例來 拷貝 創(chuàng)建新的可定制的對(duì)象；新建的對(duì)象，不需要知道原對(duì)象創(chuàng)建的具體過程；

過程：Prototype => new ProtoExam => clone to new Object;

使用相關(guān)代碼:

復(fù)制代碼 代碼如下:

function Prototype() {
    this.name = '';
    this.age = '';
    this.sex = '';
}

Prototype.prototype.userInfo = function() {
    return '個(gè)人信息, 姓名: '+this.name+', 年齡: '+this.age+', 性別:'+this.sex+'<br />';
}

現(xiàn)在需要兩個(gè)或以上的個(gè)人信息內(nèi)容:


復(fù)制代碼 代碼如下:

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();

輸出返回:


復(fù)制代碼 代碼如下:

個(gè)人信息, 姓名: 小明, 年齡: 35, 性別: 男
個(gè)人信息, 姓名: 小華, 年齡: 33, 性別: 女


原型模式，一般用于 抽象結(jié)構(gòu)復(fù)雜，但內(nèi)容組成差不多，抽象內(nèi)容可定制，新創(chuàng)建只需在原創(chuàng)建對(duì)象上稍微修改即可達(dá)到需求的情況；

Object.create 使用說明

1>. 定義: 創(chuàng)建一個(gè)可指定原型對(duì)象的并可以包含可選自定義屬性的對(duì)象；
2> Object.create(proto [, properties]);  可選，用于配置新對(duì)象的屬性;

復(fù)制代碼 代碼如下:

1. proto: 要?jiǎng)?chuàng)建新對(duì)象的 原型，必須，可為 null; 這個(gè) proto 要是已經(jīng)創(chuàng)建的[new過]，或 對(duì)象.prototype 才有價(jià)值;
2. properties: 可選，結(jié)構(gòu)為:
{
     propField: {
           value: 'val'|{}|function(){},
           writable: true|false,
           enumerable: true|false,
           configurable: true|false,
           get:function(){return 10},
           set:function(value){}
     }
}
自定的屬性有以下的四種本置屬性：
value: 自定義屬性值;
writable: 該項(xiàng)值是否可編輯，默認(rèn)為 false, 當(dāng)為 true 時(shí)，obj.prodField 可賦值；否則只讀;
enumerable: 可枚舉;
confirurable: 可配置;

還可以包含 set, get 訪問器方法；

其中，[set, get] 與 value 和 writable 不能同時(shí)出現(xiàn)；

1. 創(chuàng)建原型對(duì)象類:

復(fù)制代碼 代碼如下:

function ProtoClass(){
   this.a = 'ProtoClass';
   this.c = {};
   this.b = function() {
   }
}

創(chuàng)建原型方法:
復(fù)制代碼 代碼如下:

ProtoClass.prototype.aMethod = function() {
     //this.a;
     //this.b();
　　 return this.a;
}

使用方法

1. 以 ProtoClass.prototype 創(chuàng)建一個(gè)對(duì)象;

復(fù)制代碼 代碼如下:

var obj1 = Object.create(ProtoClass.prototype, {
    foo:{value: 'obj1', writable: true}
})

obj1 就具有 ProtoClass 原型方法 aMethod 的方法;
復(fù)制代碼 代碼如下:

obj1.aMethod();
//就會(huì)輸出 undefined 方法可訪問，ProtoClass 成員無法訪問

但是這種方法執(zhí)行不到 ProtoClass 下 a, b, c 的成員屬性:

2. 采用 實(shí)例化的 ProtoClass 做原型:

復(fù)制代碼 代碼如下:

var proto = new ProtoClass();

var obj2 = Object.create(proto, {
    foo:{value:'obj2'}
});


這樣創(chuàng)建的 obj2 就具有 ProtoClass 的所有的成員屬性 a, b, c 以及 aMethod 原型方法; 并添加了一個(gè) foo 只讀 數(shù)據(jù)屬性；
復(fù)制代碼 代碼如下:

obj2.a; //ProtoClass
obj2.c: //[Object]
obj2.b(); //

obj2.aMethod(); //ProtoClass
obj2.foo; //obj2

3. 子類繼承:

復(fù)制代碼 代碼如下:

function SubClass() {
   
}
SubClass.prototype = Object.create(ProtoClass.prototype ,{
    foo:{value: 'subclass'}
});

SubClass.prototype.subMethod = function() {
     return this.a || this.foo;
}

這種方法可以繼承 到 ProtoClass 的 aMethod 方法，執(zhí)行;

復(fù)制代碼 代碼如下:

var func = new SubClass();
func.aMethod() ;//undefined,讀不到 ProtoClass 的成員屬性,a,b,c
func.subMethod();//subclass

要讓 SubClass 能讀取到 ProtoClass 的成員屬性，SubClass 要改下:

復(fù)制代碼 代碼如下:

function SubClass()
{
    ProtoClass.call(this);
}

//其他代碼;

這種方法就可以獲取 ProtoClass 的成員屬性及原型方法;:

復(fù)制代碼 代碼如下:

var func = new SubClass();
func.aMethod() ;//ProtoClass
func.subMethod();//ProtoClass

還有一種方法，就是使用 實(shí)例化的 ProtoClass 對(duì)象，做為 SubClass 的原型;

復(fù)制代碼 代碼如下:

var proto = new ProtoClass();

function SubClass() {
}

SubClass.prototype = Object.create(proto, {
    foo:{value: 'subclass'}
});

這樣 SubClass 實(shí)例化后，就可以獲取到 ProtoClass 所有的屬性及原型方法，以及創(chuàng)建一個(gè)只讀數(shù)據(jù)屬性 foo;

復(fù)制代碼 代碼如下:

var func = new SubClass();
func.foo; //subclass
func.a; //ProtoClass
func.b(); //
func.c; //[Object]
func.aMethod(); //ProtoClass

4. 另外的創(chuàng)建繼承方法，跟 Object.create 使用 實(shí)例化的ProtoClass 做原型 效果一樣:

復(fù)制代碼 代碼如下:

function SubClass() {
　　this.foo = 'subclass'; //不過這邊可讀寫
}

SubClass.prototype = new ProtoClass();

Object.create 相關(guān)說明

Object.create 用于創(chuàng)建一個(gè)新的對(duì)象，當(dāng)為 Object 時(shí) prototype 為 null, 作用與 new Object(); 或 {} 一致;

當(dāng)為 function 時(shí)，作用與 new FunctionName 一樣;

復(fù)制代碼 代碼如下:

//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 在創(chuàng)建它們的對(duì)象的函數(shù)引用是不一樣的.

newfunc 為 function func() {...}，newfunc2 為 function Function { Native }

復(fù)制代碼 代碼如下:

Object.create(proto[, propertiesField]):

proto 說明，該值為必須，可以為 null, 如果沒設(shè)定，將會(huì)拋出異常;

proto 為非 null, 即為已 實(shí)例化的值，即已經(jīng) new 過的值；javaScript 中的 對(duì)象大多有 constructor 屬性，這個(gè)屬性說明 此對(duì)象是通過哪個(gè)函數(shù)實(shí)例化后的對(duì)象；

propertiesField 為可選項(xiàng)，設(shè)定新創(chuàng)建對(duì)象可能需要的成員屬性或方法；

相關(guān)文章

最新評(píng)論