原型与原型链

全局函数

  1. Number
    1
    2
    var n1 = 1
    var n2 = new Number(1) // 创建一个 Number 对象
  • 两者的区别是什么?
    前者将数据直接存在 Stack 里,后者实际上是一个哈希对象,把 Heap 地址存在 Stack 里。

  • 但是前者没有toString()属性,为什么n1.toString()的结果是'1'
    JS引擎会建立一个临时的对象,

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

    然后再把temp回收掉,所以几乎没人用第二种写法。

  1. String

    1
    2
    var s1 = 'hello'
    var s2 = new String('hello') // 创建一个 String 对象

    和Number同理。

  2. Boolean

    1
    2
    var b1 = true
    var b2 = new Boolean(true) // 创建一个 Boolean 对象

    和Number同理。

  3. Object

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

    o1 和 o2 没区别,不过ol === o2 // false,这是两个对象


原型

函数的原型对象

  • 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向这个对象( 即:prototype的属性的值是这个对象 )。
  • 这个对象B就是函数A的原型对象,简称函数的原型。
  • 这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:constructor属性的值是函数A )。

使用构造函数创建对象

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候,那么这个对象就会存在一个默认的不可见的属性,来指向构造函数的原型对象。
这个隐藏的属性在浏览器中用__proto__来表示。

举例:
例子1

例子2


__proto__ 和 prototype 的区别

  1. __proto__ 和 prototype 只是两个 key 而已
  2. 我们一般研究对象的 __proto__ 和函数的 prototype
  3. 对象.__proto__ === 某函数.prototype // true
  4. 如果把函数看成对象,那么函数.__proto__ === Function.prototype
  5. 如果把 Function 看成对象,那么 Function.__proto__ === Function.prototype

重要公式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var 对象 = new 函数()
对象.__proto__ === 对象的构造函数.prototype

// 推论
var number = new Number()
number.__proto__ = Number.prototype
Number.__proto__ = Function.prototype // 因为 NumberFunction 的实例

var object = new Object()
object.__proto__ = Object.prototype
Object.__proto__ = Function.prototype // 因为 Object 是 Function 的实例

var function = new Function()
function.__proto__ = Function.prototype
Function.__proto__ == Function.prototye // 因为 FunctionFunction 的实例!

原型链

通过__proto__形成原型链而非protrotype

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

原型链

把这个由__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链。


总结

记住这三句话

  1. 第一句话:prototype是函数的原型对象,即prototype是一个对象,它会被对应的__proto__引用。

  2. 第二句话:要知道自己的__proto__引用了哪个prototype,只需要看看是哪个构造函数构造了你,那你的__proto__就是那个构造函数的 prototype。

  3. 第三句话:所有的构造函数的原型链最后都会引用 Object构造函数的原型,即可以理解 Object构造函数的原型是所有原型链的最底层,即 Object.prototype.__proto===null

一图流:
总结


参考博客:
https://www.jianshu.com/p/7119f0ab67c0