028.原型和原型鏈 · 每天一道面試題

JavaScript 是基于原型的語言，原型理解起來非常簡單，但卻特別重要，下面還是通過題目來理解下JavaScript 的原型概念。 > 題目：如何理解 JavaScript 的原型對于這個問題，可以從下面這幾個要點來理解和回答，**下面幾條必須記住并且理解** * **所有的引用類型（數組、對象、函數），都具有對象特性，即可自由擴展屬性（`null`除外）** * **所有的引用類型（數組、對象、函數），都有一個`__proto__`屬性，屬性值是一個普通的對象** * **所有的函數，都有一個`prototype`屬性，屬性值也是一個普通的對象** * **所有的引用類型（數組、對象、函數），`__proto__`屬性值指向它的構造函數的`prototype`屬性值** 通過代碼解釋一下，大家可自行運行以下代碼，看結果。 ~~~ // 要點一：自由擴展屬性 var obj = {}; obj.a = 100; var arr = []; arr.a = 100; function fn () {} fn.a = 100; // 要點二：__proto__ console.log(obj.__proto__); console.log(arr.__proto__); console.log(fn.__proto__); // 要點三：函數有 prototype console.log(fn.prototype) // 要點四：引用類型的 __proto__ 屬性值指向它的構造函數的 prototype 屬性值 console.log(obj.__proto__ === Object.prototype) ~~~ ![](https://img.kancloud.cn/26/60/2660947f02c2ac8218545af2487e61ce_705x393.png) ### 原型先寫一個簡單的代碼示例。 ~~~ // 構造函數 function Foo(name, age) { this.name = name } Foo.prototype.alertName = function () { alert(this.name) } // 創建示例 var f = new Foo('zhangsan') f.printName = function () { console.log(this.name) } // 測試 f.printName() f.alertName() ~~~ ![](https://img.kancloud.cn/47/b4/47b4c70457525b7930c3dc84e78b8858_482x264.png) 執行`printName`時很好理解，但是執行`alertName`時發生了什么？這里再記住一個重點**當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的`__proto__`（即它的構造函數的`prototype`）中尋找**，因此`f.alertName`就會找到`Foo.prototype.alertName`。那么如何判斷這個屬性是不是對象本身的屬性呢？使用`hasOwnProperty`，常用的地方是遍歷一個對象的時候。 ~~~ var item for (item in f) { // 高級瀏覽器已經在 for in 中屏蔽了來自原型的屬性，但是這里建議大家還是加上這個判斷，保證程序的健壯性 if (f.hasOwnProperty(item)) { console.log(item) } } ~~~ > 題目：如何理解 JS 的原型鏈 ### 原型鏈還是接著上面的示例，如果執行`f.toString()`時，又發生了什么？ ~~~ // 省略 N 行 // 測試 f.printName() f.alertName() f.toString() ~~~ 因為`f`本身沒有`toString()`，并且`f.__proto__`（即`Foo.prototype`）中也沒有`toString`。這個問題還是得拿出剛才那句話——**當試圖得到一個對象的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的`__proto__`（即它的構造函數的`prototype`）中尋找**。如果在`f.__proto__`中沒有找到`toString`，那么就繼續去`f.__proto__.__proto__`中尋找，因為`f.__proto__`就是一個普通的對象而已嘛！ * `f.__proto__`即`Foo.prototype`，沒有找到`toString`，繼續往上找 * `f.__proto__.__proto__`即`Foo.prototype.__proto__`。`Foo.prototype`就是一個普通的對象，因此`Foo.prototype.__proto__`就是`Object.prototype`，在這里可以找到`toString` * 因此`f.toString`最終對應到了`Object.prototype.toString` 這樣一直往上找，你會發現是一個鏈式的結構，所以叫做“原型鏈”。如果一直找到最上層都沒有找到，那么就宣告失敗，返回`undefined`。最上層是什么 ——`Object.prototype.__proto__ === null` ### 原型鏈中的`this` 所有從原型或更高級原型中得到、執行的方法，其中的`this`在執行時，就指向了當前這個觸發事件執行的對象。因此`printName`和`alertName`中的`this`都是`f`。