title: 原型與原型鏈
date: 2018-09-24 10:52:43
tags: [JavaScript]
categories: JavaScript

全局函數(shù)

1. Number

var n1 = 1
var n2 = new Number(1)  // 創(chuàng)建一個(gè) Number 對(duì)象

• 兩者的區(qū)別是什么？
  前者將數(shù)據(jù)直接存在 Stack 里，后者實(shí)際上是一個(gè)哈希對(duì)象，把 Heap 地址存在 Stack 里。

• 但是前者沒(méi)有toString()屬性，為什么n1.toString()的結(jié)果是'1'？
  JS引擎會(huì)建立一個(gè)臨時(shí)的對(duì)象，

temp = new Number(n1)
temp.toString()

然后再把temp回收掉，所以幾乎沒(méi)人用第二種寫(xiě)法。

2. String

var s1 = 'hello'
var s2 = new String('hello')  // 創(chuàng)建一個(gè) String 對(duì)象

和Number同理。

3. Boolean

var b1 = true
var b2 = new Boolean(true)  // 創(chuàng)建一個(gè) Boolean 對(duì)象

和Number同理。

4. Object

var o1 = {}
var o2 = new Object()

o1 和 o2 沒(méi)區(qū)別，不過(guò)`ol === o2  // false`，這是兩個(gè)對(duì)象

原型

函數(shù)的原型對(duì)象

• 在JavaScript中，我們創(chuàng)建一個(gè)函數(shù)A(就是聲明一個(gè)函數(shù)), 那么瀏覽器就會(huì)在內(nèi)存中創(chuàng)建一個(gè)對(duì)象B，而且每個(gè)函數(shù)都默認(rèn)會(huì)有一個(gè)屬性 prototype 指向這個(gè)對(duì)象( 即：prototype的屬性的值是這個(gè)對(duì)象 )。
• 這個(gè)對(duì)象B就是函數(shù)A的原型對(duì)象，簡(jiǎn)稱函數(shù)的原型。
• 這個(gè)原型對(duì)象B 默認(rèn)會(huì)有一個(gè)屬性 constructor 指向了這個(gè)函數(shù)A ( 意思就是說(shuō)：constructor屬性的值是函數(shù)A )。

使用構(gòu)造函數(shù)創(chuàng)建對(duì)象

當(dāng)把一個(gè)函數(shù)作為構(gòu)造函數(shù) (理論上任何函數(shù)都可以作為構(gòu)造函數(shù)) 使用new創(chuàng)建對(duì)象的時(shí)候，那么這個(gè)對(duì)象就會(huì)存在一個(gè)默認(rèn)的不可見(jiàn)的屬性，來(lái)指向構(gòu)造函數(shù)的原型對(duì)象。
這個(gè)隱藏的屬性在瀏覽器中用__proto__來(lái)表示。

舉例：

例子1

例子2

__proto__ 和 prototype 的區(qū)別

1. __proto__ 和 prototype 只是兩個(gè) key 而已
2. 我們一般研究對(duì)象的 __proto__ 和函數(shù)的 prototype
3. 對(duì)象.__proto__ === 某函數(shù).prototype // true
4. 如果把函數(shù)看成對(duì)象，那么函數(shù).__proto__ === Function.prototype
5. 如果把 Function 看成對(duì)象，那么 Function.__proto__ === Function.prototype

重要公式

var 對(duì)象 = new 函數(shù)()
對(duì)象.__proto__ === 對(duì)象的構(gòu)造函數(shù).prototype

// 推論
var number = new Number()
number.__proto__ = Number.prototype
Number.__proto__ = Function.prototype // 因?yàn)?Number 是 Function 的實(shí)例

var object = new Object()
object.__proto__ = Object.prototype
Object.__proto__ = Function.prototype // 因?yàn)?Object 是 Function 的實(shí)例

var function = new Function()
function.__proto__ = Function.prototype
Function.__proto__ == Function.prototye // 因?yàn)?Function 是 Function 的實(shí)例！

原型鏈

通過(guò)__proto__形成原型鏈而非protrotype

function fn(){};
var test = new fn();

原型鏈

把這個(gè)由__proto__串起來(lái)的直到Object.prototype.__proto__為null的鏈叫做原型鏈。

總結(jié)

記住這三句話

1. 第一句話：prototype是函數(shù)的原型對(duì)象，即prototype是一個(gè)對(duì)象，它會(huì)被對(duì)應(yīng)的__proto__引用。

2. 第二句話：要知道自己的__proto__引用了哪個(gè)prototype，只需要看看是哪個(gè)構(gòu)造函數(shù)構(gòu)造了你，那你的__proto__就是那個(gè)構(gòu)造函數(shù)的 prototype。

3. 第三句話：所有的構(gòu)造函數(shù)的原型鏈最后都會(huì)引用 Object構(gòu)造函數(shù)的原型，即可以理解 Object構(gòu)造函數(shù)的原型是所有原型鏈的最底層，即 Object.prototype.__proto===null

一圖流：

總結(jié).jpg

參考博客：
http://www.itdecent.cn/p/7119f0ab67c0