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
    

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

  • 相关阅读:
    在线学习Java免费资源推荐
    pycharm控制台输出乱码
    服务器质检文件传输——scp
    git使用小结
    更换python依赖包的下载路径
    查看某一时间段的cpu使用情况,sar(监控系统性能)
    运行脚本:‘$’ ’: 未找到命令’错误
    bash脚本,获取当前日期或时间作为参数
    installing new crontab-添加调度任务成功
    Mysql-删除数据表-三种方式详解
  • 原文地址:https://www.cnblogs.com/yangrenmu/p/10585263.html
Copyright © 2011-2022 走看看