zoukankan      html  css  js  c++  java
  • JavaScript中的原型和原型链

    先上张图

    wer

    构造函数

    上面的图看懂了么,没懂不要紧。先看个栗子:

    function Foo() { }
    Foo.prototype.name = 'haha'
    const foo = new Foo()
    const bar = new Foo()
    console.log(foo.name) // haha
    console.log(bar.name) // haha
    

    没错,这个Foo是构造函数,foo是实例对象。嗯,继续往下看。

    原型

    • prototype(原型对象)

      prototype:是一个对象,这个对象包含了所有实例对象共享的属性和方法。每个函数都有prototype属性(除了bind、箭头函数、Function.prototype),但也只有函数才拥有这个属性。
      我们把Foo.prototype打印出来,可以看出它包含了实例对象foo 和 bar共同的属性name = 'haha'
      Foo.prototype
      constructor__proto__当作没看到。哈哈,开玩笑,既然看到了,就分析下这两妖孽是啥。

    • __proto__(原型指针)

      __proto__:每个js对象都有这个属性(除了null),顾名思义,它指向的是该实例对象的原型对象。比如说,栗子中实例对象foo__proto__就是Foo.prototype

      console.log(foo.__proto__ === Foo.prototype) // true
      
    • constructor

      constructor:每个prototype原型都有个constructor,它指向的是构造函数。上面栗子中Foo.prototypeconstructor就是构造函数Foo

      console.log(Foo.prototype.constructor === Foo) // true
      

    原型链

    以上,我们可以看出构造函数、原型对象、实例之间的关系。每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针(constructor),而每个实例都包含一个指向原型对象的指针(__proto__)。
    如果原型对象(prototype)是个实例呢,这样我们通过Foo.prototype.__proto__又会找到另一个原型对象(Object.prototype)。如此层层递进,实例与原型就形成了一个链条,这就是原型链。

    console.log(Foo.prototype.__proto__ === Object.prototype) // true
    

    来自于生命起源的问题,先有鸡还是先有蛋

    console.log(Function.__proto__ === Function.prototype) // true
    console.log(Function.__proto__.__proto__ === Object.prototype) // true
    console.log(Object.__proto__ === Function.prototype) // true
    

    有兴趣的可以看看知乎上的讨论

  • 相关阅读:
    2030
    2019
    2018
    在 《检验反相能力, 一题不会者 不配反相》 里 的 回复
    我转载了 历史吧 的 一个 帖 《为什么很多人说中国古代没有科学?这不扯淡嘛》 到 反相吧
    在 简单的数学题也不会做了。做一算术题,看看是否老年痴呆! 里 的 回复
    谈谈 光速
    相对论 的 时空观 本身 就会 导致 一个 绝对 的 参照系
    对 薛定谔 波函数, 我 关心 它的 推导依据, 不太关心 数学形式
    霍奇猜想 (二)
  • 原文地址:https://www.cnblogs.com/yangrenmu/p/10585263.html
Copyright © 2011-2022 走看看