首頁  >  文章  >  web前端  >  JavaScript設計模式原型模式(Object.create與prototype)介紹_javascript技巧

JavaScript設計模式原型模式(Object.create與prototype)介紹_javascript技巧

WBOY
WBOY原創
2016-05-16 16:23:551000瀏覽

原型模式說明

說明:使用原型實例來 拷貝 建立新的可自訂的物件;新建的對象,不需要知道原始物件建立的具體流程;

過程: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 '
';
}

現在需要兩個或以上的個人資訊內容:


複製程式碼 程式碼如下:

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 為可選項,設定新建立物件可能需要的成員屬性或方法;

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn