javascript原型物件與原型鏈
阿新 • • 發佈:2018-11-11
三張圖搞懂JavaScript的原型物件與原型鏈
對於新人來 說,JavaScript的原型是一個很讓人頭疼的事情,一來prototype容易與__proto__混淆,二來它們之間的各種指向實在有些複雜,其 實市面上已經有非常多的文章在嘗試說清楚,有一張所謂很經典的圖,上面畫了各種線條,一會連線這個一會連線那個,說實話我自己看得就非常頭暈,更談不上完 全理解了。所以我自己也想嘗試一下,看看能不能把原型中的重要知識點拆分出來,用最簡單的圖表形式說清楚。
我們知道原型是一個物件,其他物件可以通過它實現屬性繼承。但是尼瑪除了prototype,又有一個__proto__是用來幹嘛的?長那麼像, 讓人怎麼區分呢?它們都指向誰,那麼混亂怎麼記啊?原型鏈又是什麼鬼?相信不少初學者甚至有一定經驗的老鳥都不一定能完全說清楚,下面用三張簡單的圖,配 合一些示例程式碼來理解一下。
一、prototype和__proto__的區別
var a = {}; console.log(a.prototype); //undefined console.log(a.__proto__); //Object {} var b = function(){} console.log(b.prototype); //b {} console.log(b.__proto__); //function() {}
/*1、字面量方式*/ var a = {}; console.log(a.__proto__); //Object {} console.log(a.__proto__ === a.constructor.prototype); //true /*2、構造器方式*/ var A = function(){}; var a = new A(); console.log(a.__proto__); //A {} console.log(a.__proto__ === a.constructor.prototype); //true /*3、Object.create()方式*/ var a1 = {a:1} var a2 = Object.create(a1); console.log(a2.__proto__); //Object {a: 1} console.log(a.__proto__ === a.constructor.prototype); //false(此處即為圖1中的例外情況)
var A = function(){}; var a = new A(); console.log(a.__proto__); //A {}(即構造器function A 的原型物件) console.log(a.__proto__.__proto__); //Object {}(即構造器function Object 的原型物件) console.log(a.__proto__.__proto__.__proto__); //null
轉自:https://www.cnblogs.com/shuiyi/p/5305435.html