原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念,為什麼?因為JavaScript是一門基於原型的語言。 怎麼理解“JavaScript是一門基於原型的語言”?在軟體設計模式中,有一種模式叫做原型模式,JavaScript正是利用這種模式而被創建出來。先來瞭解下原型模式的概念... ...
原型與原型鏈是學習JavaScript這門語言不能不理解的兩個重要概念,為什麼?因為JavaScript是一門基於原型的語言。
怎麼理解“JavaScript是一門基於原型的語言”?在軟體設計模式中,有一種模式叫做原型模式,JavaScript正是利用這種模式而被創建出來。先來瞭解下原型模式的概念:原型模式是用於創建重覆的對象,同時又能保證性能。這種類型的設計模式屬於創建型模式,它提供了一種創建對象的最佳方式。這種模式是實現了一個原型介面,該介面用於創建當前對象的克隆。原型模式的目的是用原型實例指定創建對象的種類,並且通過拷貝這些原型創建新的對象。也就是說利用已有的一個原型對象,可以快速地生成和原型對象一樣的新對象實例。
原型:
原型到底是什麼?原型是一個可以被覆制(或者叫克隆)的一個類,通過複製原型可以創建一個一模一樣的新對象。通俗的說,原型就是一個模板,在設計語言中更準確的說是一個對象模板。
看下麵一段代碼來理解原型:
var Person = function(name){ this.name = name; } Person.prototype.sayHi = function(){ console.log("Hello! I am " + this.name + "."); } var joe = new Person("joe"); var john = new Person("john"); joe.sayHi(); //Hello! I am joe. john.sayHi(); //Hello! I am john.
從上面的代碼可以看出來,原型(Person)定義了一些公用的屬性和方法;利用原型(Person)創建出來的新對象實例(joe和john對象)會共用原型(Person)的所有屬性和方法。
把代碼修改一下:
"use strict"; var Person = function(name){ this.name = name; } var joe = new Person("joe"); var john = new Person("john"); Person.prototype.sayHi = function(){ console.log("Hello! I am " + this.name + "."); } joe.sayHi(); //Hello! I am joe. john.sayHi(); //Hello! I am john.
這次把新創建的對象(joe和John)提前到原型(Person)的sayHi方法定義之前,並使用嚴格模式。原型(Person)的sayHi方法依然會被共用出去,所以原型(Person)的屬性和方法總是被原型實例所共用。
再來修改下代碼:
var Person = function(name){ this.name = name; } Person.prototype.sayHi = function(){ console.log("Hello! I am " + this.name + "."); } var joe = new Person("joe"); var john = new Person("john"); joe.sayHi(); //Hello! I am joe. john.sayHi(); //Hello! I am john. joe.getName = function(){ console.log(this.name); } joe.getName(); //joe john.getName(); //undefined
這次為新對象實例(joe)添加getName方法,最後只有實例(joe)擁有該方法,而另一個實例(john)並沒有getName方法,這說明:通過原型創建的新對象實例是相互獨立的。
也正是因為這樣對象的使用才能更加靈活、更加易於擴展。
原型鏈:
在javascript中,所有的對象都擁有一個__proto__屬性指向該對象的原型(prototype)。在上面的代碼中,執行console.log(joe.__proto__)後在控制台可以看到輸出了原型(Person),然後繼續執行console.log(Person.__proto__),控制台列印的結果是function(){},為什麼Person的原型是function呢?這是因為Person是一個構造函數,它的本質就是一個函數。在javascript中函數是一等對象。
現在用箭頭符號來表示上面原型創建的過程:
joe.__proto__ => Person, Person.__proto__ => function(){}
由此可見,原型鏈記錄了原型對象創建的整個過程,因此,我給原型鏈添加一個概念:原型鏈是原型對象創建過程的歷史記錄。
原型設計帶來的問題:
當查找一個對象的屬性時,JavaScript 會根據原型鏈向上遍歷對象的原型,直到找到給定名稱的屬性為止。直到到達原型鏈的頂部仍然沒有找到指定的屬性,就會返回 undefined。
使用 for in 迴圈可以遍歷對象所有的屬性,包括該對象在原型鏈中的屬性,如:
var A = { a:1, b:2 }; var B = Object.create(A); var C = Object.create(B); B.c = 3; C.d = 4; console.log(c) //{d:4} for(var key in c){ console.log(c[key]) } //會在控制臺中依次列印出4 3 1 2
註意在控制臺中列印的順序是 4 3 1 2,而不是 1 2 3 4。為什麼?因為C的原型是B,B的原型是A。C對象只有一個d屬性,執行for...in時先返回C.d,然後在從C的原型(B)中查找到並返回B.c,再從B的原型(A)中查找到並返回A.a和A.b,最後從A的原型(Object)中查找,發現Object中沒有任何屬性,於是結束for...in。所以最後的結果是 4 3 1 2。這就解釋了原型鏈繼承時查找屬性的過程是先查找自身屬性,當自身屬性不存在時,會在原型鏈中逐級查找。
有時只需檢查對象自身的屬性,那麼,這種消耗就是一種浪費,怎麼解決呢?
hasOwnProperty 函數:
hasOwnProperty 函數可以用來檢查對象自身是否含有某個屬性,返回值是布爾值,當屬性不存在時不會向上查找對象原型鏈。
在上面的代碼中添加下麵的代碼,看看 hasOwnProperty 和 for in 的區別:
... if(var "a" in C){ console.log(c["a"]) //屬性 a 是原型鏈上的屬性, 輸出 1 } if(C.hasOwnProperty("a")){ console.log(c["a"]) //屬性 a 不是自身屬性,不會執行這一步 }
hasOwnProperty 函數只能檢查對象是否擁有某個屬性,那如何遍歷對象的自身屬性?
getOwnPropertyNames 函數:
getOwnPropertyNames 函數可以獲取對象所有的自身屬性,返回值是由對象自身屬性名稱組成的數組,同樣不會向上查找對象原型鏈。
如:
console.log(Object.getOwnPropertyNames(C)) //輸出 ["d"]
利用getOwnPropertyNames 函數遍歷所有對象所有自身屬性,例:
(fucntion(){ var o = {a:1, b:2}, propertys = Object.getOwnPropertyNames(o), len = propertys.length; for(var i = 0; i < len; i++){ var key = propertys[i]; console.log(o[key]) //輸出 1, 2 } })();