Notes on "JavaScript You Don't Know" (1)

Both function declarations and variable declarations are hoisted, but function declarations are hoisted before ordinary variables, while

var foo = function bar(){};

Assignment operations are not hoisted.

 

Closure:

A corollary to writing code based on lexical scoping (scope is a set of rules for finding variables by name).

ReferenceError is related to scope discrimination failure.

TypeError means that the scope determination is successful, but the resulting operation is illegal.

An unsuccessful RHS reference throws a ReferenceError.

An unsuccessful LHR reference results in an automatic implicit creation of a global variable.

 

Code showing the closure effect:

function foo（）{
   var a =2;
   function bar(){
    console.log(a);
  }    
  return bar;    
}
var baz = foo(); // 2

Closures allow a function to continue accessing the lexical scope at the time of definition.

 

No matter what means the inner function is passed outside of its lexical scope, it will hold a reference to the original scope, and wherever the function is executed, the closure will be used.

By passing functions as values ​​and passing them around, you can see closures in action. In timers, event listeners, ajax, cross-window communication, web workers or other asynchronous (or synchronous) tasks, as long as callbacks are used, closures are actually used.

Neither the inner scope nor the closure can be created without executing the outer function.

 

Conditions for module mode:

1. There must be an external encapsulation function, which is called at least once.

2. The enclosing function must return at least one inner function, so that the inner function can form a closure in the private scope and can access or modify the private state.

 

Lexical scope is determined at definition time, and dynamic scope is determined at runtime (judging this).

 

this:

foo.call(foo,i); // use call(...) to make sure this points to the function object foo itself

this is in no way just like the lexical scope of a function.

The binding of this has nothing to do with where the function is declared, it only depends on how the function is called.

 

The default binding in non-strict mode can only bind to the global object.

 

When a function reference has a context object, the implicit binding rules bind this in the function call to the context object.

 

Show the methods of binding this: apply(...), call(...)

How it works: The first parameter is an object, bind this object to this, and specify this this when calling the function.

 

Hard binding: bind()

 

Use new to call a function or when a constructor call occurs: (new binding)

1. Create (or construct) a new object;

2. This object will be executed prototype link;

3. This object will be bound to this of the function call;

4. If the function has no other objects, the function call in the new expression will automatically return the heart object;

 

The basic method of judging this:

1. new binding: this points to the object created by the heart.

2. call()/apply() binding or hard binding, pointing to the binding object.

3. Context call (implicit binding) this points to the context object.

4. None of the above, use the default binding, undefined in strict mode, and global object in non-strict mode.

Arrow functions do not use the four standard rules of this, but determine this according to the outer (global or function) scope. The binding of arrow functions cannot be modified. It can ensure that the this of the function is bound like bind(). to the specified object, the same as the (self = this) mechanism.

(try to avoid self=this and arrow functions, use bind(...) instead)

 

 

Polyfill refers to the putty hanging on the wall. The polyfill code is mainly used for browser compatibility.

 

The easiest way to create an empty object in js:

Object.creat(null)

 Much like {} but does not create an Object.prototype delegate. Completely undisturbed by the prototype chain, ideal for storing data.

 

The reason why null will be judged as an object: Different objects are represented as binary at the bottom layer. In js, the first three digits of binary are 0 will be judged as an object, and null binary is all 0, so executing typeof will return "object"