Object construction in JavaScript

Super Short History

Brendan Eich designed Mocha in 10 days, the language was officially called LiveScript, then was renamed JavaScript because of the spin-off of Java. (a marketing ploy)

JavaScript is noting like Java, but designed to syntaxly like Java.

Function Constructor

Use capital letter for function constructor: prevent missing “new” operator during construction

operator “new”

The “new” keyword is designed to make Java user feel comfortable. It is an operator in JavaScript.

  1. Create an empty object
  2. Invoke the function, point the keyword “this” to the empty object
  3. Pointing prototype to the function constructor
  4. Return the object

We can construct an object via function (function constructor) – just an regular function.

prototype extension
Build-in function constructors

Pure Prototypal Inheritance

Change the prototype along the way

Make object and create new objects by pointing prototype to this object using Object.create(), and override properties and methods.

Implement in newer browsers

Use polyfill, note the scenario of usage



ES6 Classes

JavaScript doesn’t have classes until ES6, even though class keyword been added, but it still an object not a definition in other programming language.

Just another syntactical way(syntactic sugar) to construct objects.


JavaScript Prototype

All object in JavaScript has a prototype property, the property is a simply reference to another object.


The modern browsers do provide a way to directly access the object’s prototype, but do not use it or set it, it will cause serious performance issue.

Object extend and reflection

Function constructor and “.prototype”

The prototype property on a function is NOT the prototype of the function, it’s the prototype of any objects that created via function constructors.

Using prototype chain to save more memory space



Function finished, Execution contexts are gone, why can I still access its variable?

Every execution context has a space in memory where the variables and functions that created inside of it lives. Under normal circumstances, the JavaScript engine will eventually clear this memory space out(garbage collection). But at this moment, that memory space still exist though execution context was gone(popped off the execution stack).

It means even though the function was finished, any function created inside of it still have the reference of the function’s memory space. Function is gone, its execution context is gone, but what’s in memory for that execution context isn’t, and the JavaScript engine make sure that we can still go down scope chain and find it.

As we can say, the execution context is closed in its outer variables. This phenomenon: a function closing in all the variables that it’s supposed to have access to, is called a closure.

The scope is intact

Closures are just a feature to make sure that functions has access to their outer variables, it doesn’t matter whether the outer functions have finished running or not.

They just happens. The JavaScript engine create the closures, and we just take advantages of it.

closure example:

create a function factory:




Automatic Semicolon Insertion

Anywhere the syntax parser expect that semicolon will be, it will put one for you, that why semicolons seems optional, as you’re writing the code, you should always put your own semicolons, also, automatic semicolon insertion could cause big problem

by avoid this mistake, you should always put curly brackets on the same line as functions, for loops and if statements etc. instead of put them one the newline.


Keyword “Arguments” and Spread

“arguments” is another keyword JavaScript engine create during the creation of execution context, arguments contains a list of all the values of all the parameters that passed to a function.

argument is an array-like object, it doesn’t has all the features of JavaScript array

“arguments” will become deprecated in the future, the new thing is called spread



Keyword “this”

JavaScript engine every time an execution context is created, that is every time a function is RUN, it gives a variable called “this” pointed to a different object depends on how the function is invoked(where the function is and how it been called)

Weird part



By Value v.s. By Reference

by value (primitive type)

copying the value into two separate spots in memory

by reference (all objects)

no copy of object is created, instead, two names or more point to same address


Function in JavaScript

JavaScript functions are objects that has other special properties:

  • Name: optional, can be anonymous
  • Code: invokable, you can RUN these code by ()
Function statement

Create a object with NAME attribute and point to memory in the creation of execution context

Function expression (anonymous)

Create a object without NAME(already have a variable knows where this object lives) attribute and point to memory in the creation of execution context, and assign this object to function when this line of code is execute

Immediately Invoked Function Expressions (IIFE)

Create the function object on the fly and invoke it immediately, and assign what it return to the variable.

Why use iife and why it is safe

Code wrapped in IIFE does not interfere with, crash into, or be interfered by any other code included in the application.


In one function’s execution context, we have 1. Variable Environment 2. Outer Environment 3. “this”.

Q: How to control “this” variable?

JavaScript functions also has these methods(can control “this”):

  • call()
  • apply()
  • bind()

Functional Programming

We should think and code in terms of functions


Type in JavaScript

primitive value
  • undefined
  • null
  • boolean
  • number (only one number type…)
  • string
  • symbol (ES6)


weird parts

loose equal vs strict equal

use === to prevent coercion and do not use == in 99% cases except you mean to coerce