JavaScript設計模式之原型模式(Object.create與prototype)介紹
原型模式說明
說明：使用原型實例來 拷貝 創(chuàng)建新的可定制的對象；新建的對象，不需要知道原對象創(chuàng)建的具體過程；
過程：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 />';
}
現(xiàn)在需要兩個或以上的個人信息內容:
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, 性別: 女
原型模式，一般用于 抽象結構復雜，但內容組成差不多，抽象內容可定制，新創(chuàng)建只需在原創(chuàng)建對象上稍微修改即可達到需求的情況；
Object.create 使用說明
1>. 定義: 創(chuàng)建一個可指定原型對象的并可以包含可選自定義屬性的對象；
2> Object.create(proto [, properties]); 可選，用于配置新對象的屬性;
1. proto: 要創(chuàng)建新對象的 原型，必須，可為 null; 這個 proto 要是已經創(chuàng)建的[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 不能同時出現(xiàn)；
1. 創(chuàng)建原型對象類:
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)建一個對象;
var obj1 = Object.create(ProtoClass.prototype, {
foo:{value: 'obj1', writable: true}
})
obj1 就具有 ProtoClass 原型方法 aMethod 的方法;
obj1.aMethod();
//就會輸出 undefined 方法可訪問，ProtoClass 成員無法訪問
但是這種方法執(zhí)行不到 ProtoClass 下 a, b, c 的成員屬性:
2. 采用 實例化的 ProtoClass 做原型:
var proto = new ProtoClass();
var obj2 = Object.create(proto, {
foo:{value:'obj2'}
});
這樣創(chuàng)建的 obj2 就具有 ProtoClass 的所有的成員屬性 a, b, c 以及 aMethod 原型方法; 并添加了一個 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
還有一種方法，就是使用 實例化的 ProtoClass 對象，做為 SubClass 的原型;
var proto = new ProtoClass();
function SubClass() {
}
SubClass.prototype = Object.create(proto, {
foo:{value: 'subclass'}
});
這樣 SubClass 實例化后，就可以獲取到 ProtoClass 所有的屬性及原型方法，以及創(chuàng)建一個只讀數(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 使用 實例化的ProtoClass 做原型 效果一樣:
function SubClass() {
this.foo = 'subclass'; //不過這邊可讀寫
}
SubClass.prototype = new ProtoClass();
Object.create 相關說明
Object.create 用于創(chuàng)建一個新的對象，當為 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 在創(chuàng)建它們的對象的函數(shù)引用是不一樣的.
newfunc 為 function func() {...}，newfunc2 為 function Function { Native }
Object.create(proto[, propertiesField]):
proto 說明，該值為必須，可以為 null, 如果沒設定，將會拋出異常;
proto 為非 null, 即為已 實例化的值，即已經 new 過的值；javaScript 中的 對象大多有 constructor 屬性，這個屬性說明 此對象是通過哪個函數(shù)實例化后的對象；
propertiesField 為可選項，設定新創(chuàng)建對象可能需要的成員屬性或方法；
相關文章
實際上，setTimeout和setInterval的語法相同。它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之后就將執(zhí)行那段代碼。不過這兩個函數(shù)還是有區(qū)別的2015-06-06
JavaScript實現(xiàn)背景圖像切換3D動畫效果示例詳解
這篇文章主要為大家介紹了JavaScript實現(xiàn)背景圖像切換3D動畫效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要是對判斷javascript的數(shù)據(jù)類型的判斷方式進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2015-10-10
下面小編就為大家?guī)硪黄獪\談JS繼承_借用構造函數(shù) & 組合式繼承。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了js模擬實現(xiàn)百度搜索，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
循環(huán)處理是最常見的編程模式之一，也是提升性能必須關注的要點之一。本文將對此進行介紹。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaScript格式化json和xml的方法,結合實例形式分析了javascript格式化json及格式化xml數(shù)據(jù)的具體操作技巧,需要的朋友可以參考下2019-01-01
相信不少同學在面試的時候經常在基礎上就掛掉了，當下行情實屬嚴峻，如果我們基礎都沒有打牢固的話，實屬有點面試浪費機會。本文就來和大家聊聊JavaScript中的原型&原型鏈，希望對大家有所幫助2023-02-02
深入理解JavaScript系列(13) This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關的更多細節(jié)。討論的主題就是this關鍵字。實踐證明，這個主題很難，在不同執(zhí)行上下文中this的確定經常會發(fā)生問題2012-01-01
用javascript實現(xiàn)的漢字簡繁轉換...2007-06-06