Javascript

Sources

Javascript: The Good Parts by Douglas Crockford

High performance Javascript by Nicholas C Zakas

Topics

• Prototypes

• Functions

• Scope

• “this”

Prototypes

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)

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.

Functions

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

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

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

foo prototype

prototype

constructor

Constructor functions

In Javascript any function you define with the intent of

creating objects of that type is called a constructor

function

Example

“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

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

Scope

Types of scopes in

Javascript

Global scope

Functional scope

How does Javascript

manage scope?

Let’s start by defining a function:

function foo() {}

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.

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]]

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.

Javascript then pushes the “Activation object” on to the

top of the “Execution context” [[scope]] collection.

Now with all these objects setup, when Javascript

needs to lookup a symbol, it will look that up in the

“Execution context” scope collection.

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”?

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.

“this”

What is “this”?

“this” is special in Javascript. The value of “this”

changes per scenario.

What are these scenarios?

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

Function invocation

The value of “this” inside a function that has been

invoked would be set to the “Global” object

Constructor invocation

When a new object is created using a constructor

function,“this” inside the new object would be set to the

object itself

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.

Example:

Questions?