I created a javascript code snippet and here's the link to visualiser
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()
I have several questions:
In which stage is prototype object aka
Foo.prototype
created? When the interpreter loadsFoo
to global scope or whennew Foo()
is been called for the first time, or in any other stage? In which lexical scope is its reference stored? (since there's no such ref in visualiser)Should
foo
andbar
share the methodspeak()
which belongs toFoo.prototype
rather than owning their own copies as shown in visualiser?Are prototype chain and scope chain unrelated? For example, when
foo.speak()
is called, first we trace scope chain to get value offoo
, then prototype chain to getspeak()
?
Yes, the prototype object is created when the
Foo
function is created.In none at all. It's stored only in a property of
Foo
.Yes. It seems like that visualiser was built for Python and does not support prototype links at all.
Yes, yes.
Notice however that the visualiser you found does not display the scope chain, it only does display the call stack, and does very bad at visualising lexical scope and closures correctly.