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

ref:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill

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.

image

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

發表留言

Closures

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:

setTimeout:

callbacks

發表留言

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

 

發表留言