Javascript: Understanding the weird parts

6 min readNov 12, 2017

未來會將整篇文章補完，現階段就一部份一部分作筆記。

Execution Contexts and Lexical Environments

1. Object: just name and value pairs

2. Global: Not inside a function

3. 整個 js 的engine 會做兩件事情 1. create this 2. create global object 。如果在瀏覽器中，global object 就會是 window ，在node 就會是 global。

4. 當你在js檔案中創造了無論是function 或是變數，都將附著在 global object 下。ex: 創造了

var a = ‘hello world’;

則可以在 window 這個 object 中找到 a 這個 name，a 的 value 為 hello world

5. 在 execution context 中，有兩個階段 1. creation phase 2. execution phase

在creation phase, 每個變數與 function 都會保留記憶體空間，不同的是，function會整包被放入記憶體中，而變數的宣告，則要等到execution 執行到該行得時候，才會執行指派的動作。因此，

6. undefined v.s. not defined。

undefined 是一個值
not defined 是一個錯誤

在execution phase前，creation phase 會把所有的變數宣告做宣告，並將「undefined」這個 value 放進每個變數中。

因此，只要值是undefined，就知道是「已宣告但還沒有給值、或是沒有給值」的變數。所以，永遠不要自己定義變數為 undefined，否則將會失去這個邏輯。

7. Every execution context has their own local variable scope

Each of these execution context has own local variable scope

8. Every execution context has a reference to its outer environment

and lexical environment is important for javascript when it comes to outer reference.

9. asynchronous javascript is outside the javascript engine

It occurs inside the browser engine (DOM render, HTTP request), javascript is synchronized inside the javascript engine.

Types and Operators

1. Dynamic typing

2. six primitive type in javscript

1. undefined
2. NULL
3. boolean
4. number
5. string
6. symbol (used in ES6)

3.Operator

4. Coercion, precedents and associativity

When the result is not equal to your expectation. Check these three things.

5. Checking global naming space

Objects and functions

Object can contains…

2. Namespace

3. Switch between javascript object and JSON

4. First class function

functions are objects

5. Function statement and function expression

Statement just does work and an expression result in a value.

Different between

function greeting(){
  console.log('hi');
}andvar greeting = function(){
  console.log('hi');
}

function greet is run but not return anything in execution phase.

puts function inside the function

6. Pass by value. pass by reference

7.Object, function and this

Every time we invoke a function , the first thing it does is creating the execution context, and keyword this.

A primitive value inside the object called property, a function inside the object called methods.

function a() {
  console.log(this);
}a();

It will return window , this only changed when the function is inside the object like

var car = {
  name: 'Mazda 5',
  run: function(){
     console.log(this);
  }
}car.run();

this inside the car is pointing to object car

the this in line 25 reference to window object, because of hoisting.

8. arguments and spread

9. function statement and function expression

the greetFunc in line 8 is a function.

the greeting in line 14 is a string.

Javascript attach any function and variable name in the global object, so if we just run a function one time and do not want it to pollute the name space, we can use IIFE( Immediately Invoked Function Expression!)

10. closure

It will print 3 , three times. why? because it reference to the variable i , the variable i iterate 0 to 3 and stop at 3.

It can solve the problem by using IIFE

11. bind(), call(), apply

var functionName = functionA.bind(object)

it means we copy a function to another name, and when we use this keyword in functionA, it refers to the object we pass in.

functionA.call(object, args…)

It just like bind() , but it invoke the function immediately. We can decide what is referred by this keyword, pass arguments in the function , and invoke it.

functionA.apply(object,[args…])

It just like call(), just little different syntax.

Bind example:

12. Functional programming

Build up your own map

13. Prototype

when I call obj.prop2 ,first, it will find prop2 in obj itself. If it can’t find prop2 ian obj, it next goes to the prototype.

14. Reflection and extend

15. function constructor

It will crate an object with attribute(method) firstName and lastName

new is a operator in javascript!

When I use new, It will create an empty object, and put attributes and value inside the new object named function name.

In this case

16. Function constructor and Prototypes

When we create a constructor, we usually set up attributes in the function, because attributes would be different objects. But we usually puts methods in the prototype, because methods would be consistent between objects.

If we set methods in constructor function, every object has their own methods in the memory space. But if we use prototype to set up the methods, all object reference the same methods (inside the same prototype)

It’s very danger that missing new operator before constructor function. Some linter tool would detect the function with capital character without new operator.

17. Add methods to existing constructor function

String.prototype.isLongerThan(string){
  return this.length > string.length;
}

then we can use

'loooooooooong string'.isLongerThan('short string');
// It will return true

AND BTW

var 3 = new Number(3)
is not equal to
var 3 = Number('3')

the first one is an object, the second one is primitive value 3.

17. Pure prototypal inheritance and polyfill

pure prototypal inheritance

var person = {
  name: 'Yeng';
  gender: 'male;
  age: 30;
}var yeng = Object.create(person);yeng.name #=> 'Yeng'
yeng.name = 'Wow';
yeng.name #=> 'Wow'

polyfill