原型与原型链如何理解？

首先我们要知道浏览器中有哪些全局对象：

ECMAScript 规定全局对象叫做 global，但是浏览器把 window 作为全局对象（浏览器先存在的）

window 就是一个哈希表，有很多属性。

window 的属性就是全局变量。

这些全局变量分为两种：

1、是CEMAScript规定的

global.parseInt
global.parseFloat
global.Number
global.String
global.Boolean
global.Object

2、是浏览器自己加的属性

window.alert
window.prompt
window.comfirm
window.console.log
window.console.dir
window.document
window.document.createElement
window.document.getElementById

所有的API都可以在MDN里面找到详细的资料。

理解原型与原型链的知识就需要我们先了解global全局变量中全局函数的知识。

全局函数

例如：Number

var a = new Number(1)

1与new Number(1)有什么区别？

1指在stack内存中储存，而Number(1)指的是一个stack中存heap内存地址的一个对象，而只要是个对象便会有__proto__。

new String(x)、new boolean(x)都是一样的，而object与new object(x)则是指向的同一个内存地址，因为对象是复杂类型通过heap储存。

公用的属性

如上图所示，其实每个__proto__中的属性有许多都是一样的，如果每个对象都有这些属性，那么例如：{0 : ' 字符串'} 这么一个简单的对象岂不是都包含了许多东西，如果有几百个几千个对象那岂不是会消耗许多内存？显然这么做是不合理的。

JS 的做法是把 toString 和 valueOf 放在一个对象里（暂且叫做公用属性组成的对象），然后让每一个对象的 __proto__ 存储这个「公用属性组成的对象」的地址。

这就是所谓的原型。

记住下面这个公式：

var 对象 = new 函数( )

var 对象 = new 函数()
对象.__proto__ === 对象的构造函数.prototype

// 推论
var number = new Number()
number.__proto__ = Number.prototype


var object = new Object()
object.__proto__ = Object.prototype


var function = new Function()
function.__proto__ = Function.prototype

// 另外，所有函数都是由 Function 构造出来的，所以
Number.__proto__ = Function.prototype // 因为 Number 是函数，是 Function 的实例
Object.__proto__ = Function.prototype // 因为 Object 是函数，是 Function 的实例
Function.__proto__ == Function.prototye // 因为 Function 是函数，是 Function 的实例！

原型链就是对象.__proto__.__proto__ 这种链式的调用。本质上是向js中公用属性组成的对象的一种访问。

例如：

var a = new Number(1)

a.__proto__ === Number.prototype

//又等于
a.__proto__.__proto__ === Number.prototype.__proto__

//又等于
a.__proto__.__proto__  === Object.prototype

//又等于
Number.prototype.__proto__ === Object.prototype

Object.prototype.__proto__则就为null了。因为到顶了，也可以比喻理解为树杈的第一个起始节点，再不可往上找了。

Object.prototype.__proto__ === null

原型与原型链如何理解？

猜你喜欢