Javascript topics covered in the document include prototypes, functions, scope, and "this". Prototypes act like blueprints for objects to inherit properties from. Functions are objects that have a prototype property pointing to their prototype object. Scope is determined by execution contexts and activation objects. The "this" keyword refers to different objects depending on how a function is invoked, such as the containing object for method calls or the global object for regular function calls.

1. Javascript

2. Sources
Javascript: The Good Parts by Douglas Crockford
High performance Javascript by Nicholas C Zakas

3. Topics
• Prototypes
• Functions
• Scope
• “this”

4. Prototypes

5. What is a prototype?
Prototypes are objects which act like a blueprint, much
like base classes in other languages like Java and
C++
Javascript is prototypal — objects clone from other
objects (prototypes)

6. All objects of a type share the internal reference to the base
object’s “prototype” object.
foo2
Prototype(Foo) Prototype(Object)
foo1
__proto__
__proto__
__proto__
An object’s “prototype” object can be accessed* using the
hidden __proto__ property of that object.

7. Functions

8. Functions are also objects in Javascript. They are
instances of the “Function” object which itself extends
from “Object”
They have a special property called “prototype” (in
addition to __proto__) which objects of non-Function
types do not have
“prototype” points to the function object’s prototype
object. Where as __proto__ points to “Function”
object’s prototype because a function inherits from
Function.prototype object

9. What happens when you
define a function?
function foo() {}
When a function is defined, we are actually creating an
instance of type “Function”
The constructor of the “Function” object does a few
things behind the scenes

10. It first creates the “prototype” object. Then it will add a
property to this newly created object called
“constructor” and sets the reference to the function
object as this property’s value.
This object is called the function’s “prototype” object or
in our example foo.prototype object.
It then adds a property called “prototype” to the
function object and then sets the value it to the
function’s prototype object from above.
http://jsbin.com/sevuba/5/watch?js,console

11. foo prototype
prototype
constructor

12. Constructor functions
In Javascript any function you define with the intent of
creating objects of that type is called a constructor
function

13. Example

14. “new” operator
The “new” operator when prepended to a function call
triggers creation of new objects of that type.
Without the “new” operator calling the constructor
function is just like any other function call

15. So what happens when
“new” operator is used?
First a new object is created
Then that object’s __proto__ property is set to the
constructor function’s prototype object*
The “this” inside the newly created object will be bound
to the object
And the newly created object is returned

16. Scope

17. Types of scopes in
Javascript
Global scope
Functional scope

18. How does Javascript
manage scope?
Let’s start by defining a function:
function foo() {}

19. This foo function object is assigned a internal property
called [[scope]] which is not accessible to scripts.
The value of this property is a collection of objects
which represents the scope in which the function was
defined.
So in the case of foo, the collection would be made up
just the Global scope because we defined the function
outside another function.

20. What happens when I call
foo()?
A new object called “Execution context” is created.
This object will have its own [[scope]] property.
Javascript then copies the [[scope]] from foo onto the
“Execution context” [[scope]]

21. Next another object called “Activation object” is
created for the “Execution context” object.
This “Activation object” has properties for the named
arguments passed to the function when it was called,
the local variables defined with in the function, a
reference to the “this” object, and the special
“arguments” object.

22. Javascript then pushes the “Activation object” on to the
top of the “Execution context” [[scope]] collection.

23. Now with all these objects setup, when Javascript
needs to lookup a symbol, it will look that up in the
“Execution context” scope collection.

24. How is this all useful to
understand closures?
Closures are usually defined thus: “The inner function
defined within an outer function continues to have
access to the outer function’s scope even after the
outer function has returned”
How do we make sense of that with the knowledge of
“Execution context” and “Activation object”?

26. What happend there?
1) When outer function was created, it will get a [[scope]] property with the "Global"
object in the scope chain collection.
2) When outer function was called on line 10, the Execution context object was
created and the corresponding Activation object was created and pushed to the front
of the Execution context's scope chain.
3) The outer function's Activation object will have entries for some_var and inner.
4) When the inner function is created while in the process of executing outer function,
it’s [[scope]] collection will contain the activation object of outer and the “Global”
object. Why? because those were in the outer’s “Execution context” scope
5) When the inner function is executed, the Execution context's scope chain will have
references to the outer function's Activation object, the "Global" object and obviously
the inner function's "Activation object" and thus it's able to resolve some_var even
after outer function has returned.

27. “this”

28. What is “this”?
“this” is special in Javascript. The value of “this”
changes per scenario.
What are these scenarios?

29. Method invocation
A method in Javascript is any function which is a
property of a function
The “this” inside a method is set to the containing
object

30. Function invocation
The value of “this” inside a function that has been
invoked would be set to the “Global” object

31. Constructor invocation
When a new object is created using a constructor
function,“this” inside the new object would be set to the
object itself

32. Apply invocation
Javascript has a few methods “apply”, “call”, and “bind”
which allow changing the value of “this” inside the
called function
Both “apply” and “call” take as the first argument the
object which should be set as the “this” inside the
called function.
Calling “bind” on a function will return a new function
object with the “this” set to the first argument passed to
bind.

33. Example:

34. Questions?