JavaScript編程中實現對象封裝特性的執行個體講解，javascript執行個體講解

JavaScript編程中實現對象封裝特性的執行個體講解，javascript執行個體講解

1.prototype對象
1.1建構函式的缺點
JavaScript通過建構函式產生新對象，因此建構函式可以視為對象的模板。執行個體對象的屬性和方法，可以定義在建構函式內部。

function Cat (name, color) { this.name = name; this.color = color;}var cat1 = new Cat('大毛', '白色');cat1.name // '大毛'cat1.color // '白色'

上面代碼的Cat函數是一個建構函式，函數內部定義了name屬性和color屬性，所有執行個體對象都會產生這兩個屬性。但是，這樣做是對系統資源的浪費，因為同一個建構函式的對象執行個體之間，無法共用屬性。

function Cat(name, color) { this.name = name; this.color = color; this.meow = function () { console.log('mew, mew, mew...'); };}var cat1 = new Cat('大毛', '白色');var cat2 = new Cat('二毛', '黑色');cat1.meow === cat2.meow// false

上面代碼中，cat1和cat2是同一個建構函式的執行個體。但是，它們的meow方法是不一樣的，就是說每建立一個執行個體，就會建立一個meow方法。這既沒有必要，又浪費系統資源，因為所有meow方法都是同樣的行為，完全應該共用。

1.2 prototype屬性的作用
在JavaScript語言中，每一個對象都有一個對應的原型對象，被稱為prototype對象。定義在原型對象上的所有屬性和方法，都能被派生對象繼承。這就是JavaScript繼承機制的基本設計。

除了這種方法，JavaScript還提供了另一種定義執行個體對象的方法。我們知道，建構函式是一個函數，同時也是一個對象，也有自己的屬性和方法，其中有一個prototype屬性指向另一個對象，一般稱為prototype對象。該對象非常特別，只要定義在它上面的屬性和方法，能被所有執行個體對象共用。也就是說，建構函式產生執行個體對象時，自動為執行個體對象分配了一個prototype屬性。

function Animal (name) { this.name = name;}Animal.prototype.color = "white";var cat1 = new Animal('大毛');var cat2 = new Animal('二毛');cat1.color // 'white'cat2.color // 'white'

上面代碼對建構函式Animal的prototype對象，添加了一個color屬性。結果，執行個體對象cat1和cat2都帶有該屬性。

更特別的是，只要修改prototype對象，變動就立刻會體現在執行個體對象。

Animal.prototype.color = "yellow";cat1.color // 'yellow'cat2.color // 'yellow'

上面代碼將prototype對象的color屬性的值改為yellow，兩個執行個體對象的color屬性的值立刻就跟著變了。這是因為執行個體對象其實沒有color屬性，都是讀取prototype對象的color屬性。也就是說，當執行個體對象本身沒有某個屬性或方法的時候，它會到建構函式的prototype對象去尋找該屬性或方法。這就是prototype對象的特殊之處。

如果執行個體對象自身就有某個屬性或方法，它就不會再去prototype對象尋找這個屬性或方法。

cat1.color = 'black';cat2.color // 'yellow'Animal.prototype.color // "yellow";

上面代碼將執行個體對象cat1的color屬性改為black，就使得它不用再去prototype對象讀取color屬性，後者的值依然為yellow。

總而言之，prototype對象的作用，就是定義所有執行個體對象共用的屬性和方法，所以它也被稱為執行個體對象的原型，而執行個體對象可以視作從prototype對象衍生出來的。

Animal.prototype.walk = function () { console.log(this.name + ' is walking.');};

上面代碼在Animal.protype對象上面定義了一個walk方法，這個方法將可以在所有Animal執行個體對象上面調用。

1.3原型鏈
由於JavaScript的所有對象都有建構函式，而所有建構函式都有prototype屬性（其實是所有函數都有prototype屬性），所以所有對象都有自己的prototype原型對象。

因此，一個對象的屬性和方法，有可能是定義它自身上面，也有可能定義在它的原型對象上面（就像上面代碼中的walk方法）。由於原型本身也是對象，又有自己的原型，所以形成了一條原型鏈（prototype chain）。比如，a對象是b對象的原型，b對象是c對象的原型，以此類推。因為追根溯源，最源頭的對象都是從Object建構函式產生（使用new Object()命令），所以如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype。那麼，Object.prototype有沒有原型呢？回答可以是有，也可以是沒有，因為Object.prototype的原型是沒有任何屬性和方法的null。

Object.getPrototypeOf(Object.prototype)// null

上面代碼錶示Object.prototype對象的原型是null，由於null沒有任何屬性，所以原型鏈到此為止。

“原型鏈”的作用在於，當讀取對象的某個屬性時，JavaScript引擎先尋找對象本身的屬性，如果找不到，就到它的原型去找，如果還是找不到，就到原型的原型去找。以此類推，如果直到最頂層的Object.prototype還是找不到，則返回undefined。

舉例來說，如果讓某個函數的prototype屬性指向一個數組，就意味著該函數可以用作數組的建構函式，因為它產生的執行個體對象都可以通過prototype屬性調用數組方法。

function MyArray (){}MyArray.prototype = new Array();MyArray.prototype.constructor = MyArray;var mine = new MyArray();mine.push(1, 2, 3);mine.length // 3mine instanceof Array // true

上面代碼的mine是MyArray的執行個體對象，由於MyArray的prototype屬性指向一個數組，使得mine可以調用數組方法（這些方法其實定義在數組的prototype對象上面）。至於最後那行instanceof運算式，我們知道instanceof運算子用來比較一個對象是否為某個建構函式的執行個體，最後一行表示mine為Array的執行個體。

mine instanceof Array// 等同於(Array === MyArray.prototype.constructor) ||(Array === Array.prototype.constructor) ||(Array === Object.prototype.constructor )

上面代碼說明了instanceof運算子的實質，它依次與執行個體對象的所有原型對象的constructor屬性（關於該屬性的介紹，請看下一節）進行比較，只要有一個符合就返回true，否則返回false。

1.4 constructor屬性
prototype對象有一個constructor屬性，預設指向prototype對象所在的建構函式。

function P() {}P.prototype.constructor === P// true

由於constructor屬性定義在prototype對象上面，意味著可以被所有執行個體對象繼承。

function P() {}var p = new P();p.constructor// function P() {}p.constructor === P.prototype.constructor// truep.hasOwnProperty('constructor')// false

上面代碼錶示p是建構函式P的執行個體對象，但是p自身沒有contructor屬性，該屬性其實是讀取原型鏈上面的P.prototype.constructor屬性。

constructor屬性的作用是分辨prototype對象到底定義在哪個建構函式上面。

function F(){};var f = new F();f.constructor === F // truef.constructor === RegExp // false

上面代碼錶示，使用constructor屬性，確定變數f的建構函式是F，而不是RegExp。

2.Object.getPrototypeOf方法
Object.getPrototypeOf方法返回一個對象的原型。

// Null 物件的原型是Object.prototypeObject.getPrototypeOf({}) === Object.prototype// true// 函數的原型是Function.prototypefunction f() {}Object.getPrototypeOf(f) === Function.prototype// true// 假定F為建構函式，f為F的執行個體對象// 那麼，f的原型是F.prototypevar f = new F();Object.getPrototypeOf(f) === F.prototype// true

3.Object.create方法
Object.create方法用於產生新的對象，可以替代new命令。它接受一個對象作為參數，返回一個新對象，後者完全繼承前者的屬性，即前者成為後者的原型。

var o1 = { p: 1 };var o2 = Object.create(o1);o2.p // 1

上面代碼中，Object.create方法在o1的基礎上產生了o2。此時，o1成了o2的原型，也就是說，o2繼承了o1所有的屬性的方法。

Object.create方法基本等同於下面的代碼，如果老式瀏覽器不支援Object.create方法，可以用下面代碼自己部署。

if (typeof Object.create !== "function") { Object.create = function (o) { function F() {} F.prototype = o; return new F(); };}

上面代碼錶示，Object.create方法實質是建立一個建構函式F，然後讓F的prototype屬性指向作為原型的對象o，最後返回一個F的執行個體，從而實現讓執行個體繼承o的屬性。

下面三種方式產生的新對象是等價的。

var o1 = Object.create({});var o2 = Object.create(Object.prototype);var o3 = new Object();

如果想要產生一個不繼承任何屬性（比如toString和valueOf方法）的對象，可以將Object.create的參數設為null。

var o = Object.create(null);o.valueOf()// TypeError: Object [object Object] has no method 'valueOf'

上面代碼錶示，如果對象o的原型是null，它就不具備一些定義在Object.prototype對象上面的屬性，比如valueOf方法。

使用Object.create方法的時候，必須提供對象原型，否則會報錯。

Object.create()// TypeError: Object prototype may only be an Object or null

Object.create方法產生的新對象，動態繼承了原型。在原型上添加或修改任何方法，會立刻反映在新對象之上。

var o1 = { p: 1 };var o2 = Object.create(o1);o1.p = 2;o2.p// 2

上面代碼錶示，修改對象原型會影響到新產生的對象。

除了對象的原型，Object.create方法還可以接受第二個參數，表示描述屬性的attributes對象，跟用在Object.defineProperties方法的格式是一樣的。它所描述的對象屬性，會添加到新對象。

var o = Object.create(Object.prototype, { p1: { value: 123, enumerable: true }, p2: { value: "abc", enumerable: true }});o.p1 // 123o.p2 // "abc"

由於Object.create方法不使用建構函式，所以不能用instanceof運算子判斷，對象是哪一個建構函式的執行個體。這時，可以使用下面的isPrototypeOf方法，判讀原型是哪一個對象。

4.isPrototypeOf方法
isPrototypeOf方法用來判斷一個對象是否是另一個對象的原型。

var o1 = {};var o2 = Object.create(o1);var o3 = Object.create(o2);o2.isPrototypeOf(o3) // trueo1.isPrototypeOf(o3) // true

上面代碼錶明，只要某個對象處在原型鏈上，isProtypeOf都返回true。

5.一個簡單樣本

var ClassDemo = function () { //靜態private變數 var private_static_var = 'aaaa'; //靜態private方法 var private_static_func = function (key) {   return key + private_static_var; } //private方法，關鍵就是第一參數self要傳入this var private_func = function (self, key) {   return private_static_func(key + self.id); } var _class = function (id) { //建構函式  this.id = id; //public變數 } //public方法 _class.prototype.public_func = function (key) {   return private_func(this, key); } return _class;}();var a = new ClassDemo('hello world');alert(a.public_func('world hello'));

沒有簡單的辦法實現private變數和public靜態變數/方法，不過封裝到這個程度夠用了