Javascript原型链与范围链

Question

我创建了一个javascript代码片段，下面是指向形象化的链接

function Foo(name) {
  this.name = name
  this.speak = function() {
    console.log(this.name)
  }
}

function init() {
  function init_() {
    var foo = new Foo('foo')
    foo.hear = function() {
      console.log('i can hear')
    }
    var bar = new Foo('bar')
    bar.look = function() {
      console.log('i can look')
    }
    foo.speak()
    bar.speak()
  }
  
  init_()
}

init()

我有几个问题：

1. 原型对象(也称为Foo.prototype )是在哪个阶段创建的？当解释器将Foo加载到全局范围时，还是在第一次调用new Foo()时，还是在任何其他阶段？它的引用存储在哪个词法范围中？(因为形象化中没有这样的参考)
2. foo和bar是否应该共享属于Foo.prototype的方法speak()，而不是拥有自己的副本(如visualiser中所示)？
3. 原型链和范围链不相关吗？例如，当调用foo.speak()时，我们首先跟踪作用域链以获得foo的值，然后跟踪原型链以获得speak()

​

​

Answer 1

原型对象(也称为Foo.prototype )是在哪个阶段创建的？当解释器将Foo加载到全局范围时？

是的，原型对象是在创建Foo函数时创建的。

它的引用存储在哪个词法范围中？(因为形象化中没有这样的参考)

一点也没有。它只存储在Foo的一个属性中。

foo和bar是否应该共享属于Foo.prototype的方法speak()，而不是拥有自己的副本(如visualiser中所示)？

是。看起来，可视化器是为Python构建的，根本不支持原型链接。

原型链和范围链不相关吗？例如，当调用foo.speak()时，我们首先跟踪作用域链以获得foo的值，然后再跟踪原型链以获得speak()？

是的，是的。

但是，请注意，您发现的可视化器没有显示作用域链，它只显示调用堆栈，并且在正确可视化词法作用域和闭包方面做得非常糟糕。