JavaScript設(shè)計(jì)模式之原型模式(Object.create與prototype)介紹
原型模式說(shuō)明
說(shuō)明:使用原型實(shí)例來(lái) 拷貝 創(chuàng)建新的可定制的對(duì)象;新建的對(duì)象,不需要知道原對(duì)象創(chuàng)建的具體過(guò)程;
過(guò)程:Prototype => new ProtoExam => clone to new Object;
使用相關(guān)代碼:
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)容:
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();
輸出返回:
個(gè)人信息, 姓名: 小明, 年齡: 35, 性別: 男
個(gè)人信息, 姓名: 小華, 年齡: 33, 性別: 女
原型模式,一般用于 抽象結(jié)構(gòu)復(fù)雜,但內(nèi)容組成差不多,抽象內(nèi)容可定制,新創(chuàng)建只需在原創(chuàng)建對(duì)象上稍微修改即可達(dá)到需求的情況;
Object.create 使用說(shuō)明
1>. 定義: 創(chuàng)建一個(gè)可指定原型對(duì)象的并可以包含可選自定義屬性的對(duì)象;
2> Object.create(proto [, properties]); 可選,用于配置新對(duì)象的屬性;
1. proto: 要?jiǎng)?chuàng)建新對(duì)象的 原型,必須,可為 null; 這個(gè) proto 要是已經(jīng)創(chuàng)建的[new過(guò)],或 對(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 訪問(wèn)器方法;
其中,[set, get] 與 value 和 writable 不能同時(shí)出現(xiàn);
1. 創(chuàng)建原型對(duì)象類:
function ProtoClass(){
this.a = 'ProtoClass';
this.c = {};
this.b = function() {
}
}
創(chuàng)建原型方法:
ProtoClass.prototype.aMethod = function() {
//this.a;
//this.b();
return this.a;
}
使用方法
1. 以 ProtoClass.prototype 創(chuàng)建一個(gè)對(duì)象;
var obj1 = Object.create(ProtoClass.prototype, {
foo:{value: 'obj1', writable: true}
})
obj1 就具有 ProtoClass 原型方法 aMethod 的方法;
obj1.aMethod();
//就會(huì)輸出 undefined 方法可訪問(wèn),ProtoClass 成員無(wú)法訪問(wèn)
但是這種方法執(zhí)行不到 ProtoClass 下 a, b, c 的成員屬性:
2. 采用 實(shí)例化的 ProtoClass 做原型:
var proto = new ProtoClass();
var obj2 = Object.create(proto, {
foo:{value:'obj2'}
});
這樣創(chuàng)建的 obj2 就具有 ProtoClass 的所有的成員屬性 a, b, c 以及 aMethod 原型方法; 并添加了一個(gè) foo 只讀 數(shù)據(jù)屬性;
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 方法,執(zhí)行;
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
還有一種方法,就是使用 實(shí)例化的 ProtoClass 對(duì)象,做為 SubClass 的原型;
var proto = new ProtoClass();
function SubClass() {
}
SubClass.prototype = Object.create(proto, {
foo:{value: 'subclass'}
});
這樣 SubClass 實(shí)例化后,就可以獲取到 ProtoClass 所有的屬性及原型方法,以及創(chuàng)建一個(gè)只讀數(shù)據(jù)屬性 foo;
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 做原型 效果一樣:
function SubClass() {
this.foo = 'subclass'; //不過(guò)這邊可讀寫
}
SubClass.prototype = new ProtoClass();
Object.create 相關(guān)說(shuō)明
Object.create 用于創(chuàng)建一個(gè)新的對(duì)象,當(dāng)為 Object 時(shí) prototype 為 null, 作用與 new Object(); 或 {} 一致;
當(dāng)為 function 時(shí),作用與 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 在創(chuàng)建它們的對(duì)象的函數(shù)引用是不一樣的.
newfunc 為 function func() {...},newfunc2 為 function Function { Native }
Object.create(proto[, propertiesField]):
proto 說(shuō)明,該值為必須,可以為 null, 如果沒(méi)設(shè)定,將會(huì)拋出異常;
proto 為非 null, 即為已 實(shí)例化的值,即已經(jīng) new 過(guò)的值;javaScript 中的 對(duì)象大多有 constructor 屬性,這個(gè)屬性說(shuō)明 此對(duì)象是通過(guò)哪個(gè)函數(shù)實(shí)例化后的對(duì)象;
propertiesField 為可選項(xiàng),設(shè)定新創(chuàng)建對(duì)象可能需要的成員屬性或方法;
相關(guān)文章
詳解weex默認(rèn)webpack.config.js改造
本篇文章主要介紹了詳解weex默認(rèn)webpack.config.js改造,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01js獲得地址欄?問(wèn)號(hào)后參數(shù)的方法
這篇文章介紹了js獲得地址欄?問(wèn)號(hào)后參數(shù)的方法,有需要的朋友可以參考一下2013-08-08javascript 正則替換 replace(regExp, function)用法
剛在弄網(wǎng)頁(yè)通過(guò)servlet返回的json數(shù)據(jù)來(lái)添加div元素,簡(jiǎn)單研究了下replace(regExp, function)方式的function參數(shù).2010-05-05javascript Array.prototype.slice使用說(shuō)明
slice 可以用來(lái)獲取數(shù)組片段,它返回新數(shù)組,不會(huì)修改原數(shù)組。2010-10-10用JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼
這篇文章介紹了JS將搜索的關(guān)鍵字高亮顯示實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-11-11javascript實(shí)現(xiàn)懸浮跟隨框緩動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)懸浮跟隨框緩動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度
在前端開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要處理多維嵌套的數(shù)據(jù)結(jié)構(gòu),并需要計(jì)算出它們的深度,本文就來(lái)講講如何使用JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度吧2023-06-06js實(shí)現(xiàn)文本框輸入文字個(gè)數(shù)限制代碼
這篇文章主要介紹了js實(shí)現(xiàn)文本框輸入文字個(gè)數(shù)限制代碼,文本框輸入的文字個(gè)數(shù)并不是無(wú)限制的,一般都會(huì)限定一個(gè)輸入最高上限,如何限制,請(qǐng)看本文2015-12-12js中將URL中的參數(shù)提取出來(lái)作為對(duì)象的實(shí)現(xiàn)代碼
將URL中的參數(shù)提取出來(lái)作為對(duì)象的實(shí)現(xiàn)代碼,適合希望獲取url參數(shù)的朋友。2011-08-08