"Re-learn front end" study notes (5)

JavaScript execution (C): function

In JavaScript, the most important scene is the context switching function call.

function

In the ES2018, the function is already a very complex system of.

• Ordinary functions: a function defined with the function keyword

  function foo () {
   // code
  }
  

• Arrow functions: with => operator-defined function

   foo = () => {
   // code
  }
  
  

• Method: functions defined in the class

  class C {
   foo(){
   //code
   }
  }
  

• Generator function: a function definition function *

• Class: The classclass definition, and indeed function

  class Foo {
   constructor(){
   //code
   }
  }
  

• Six / seven / eight kinds asynchronous function: an ordinary function, arrow and function generator function plus asynckeyword.

  async function foo(){
   // code
  }
  const foo = async () => {
   // code
  }
  async function foo*(){
   // code
  }
  

Ordinary variables, these functions and there is no essential difference, is to follow the rules "is defined to inherit environment", one of their behavioral differences that thiskeyword.

Behavior this keyword

thisIs a keyword in JavaScript, its use is similar to a variable. But thisnow there are many different behavioral variables.

this is a very important part of the implementation of context. With a different function call, this value are different because

Normal function thisis determined by the "reference used to call it" the mystery lies: we get the expression function, which actually returns is not the function itself, but a Referencetype. ReferenceType consists of two parts: an object and an attribute value.

Reference used when calling the function, this value determines the execution time of the function.

From the perspective of the runtime view, thisexpression uses no connection with the object-oriented, which is associated with a function call when.

Generator function, asynchronous induction generator function and a normal function like an ordinary function behavior is consistent asynchronous function arrow arrow function and behavior are consistent

Mechanisms for this keyword

Function can reference variables definition above analysis, the function also can remember when definitions this, therefore, there must be a function of the internal mechanism to hold this information.
In JavaScript standard, predetermined as a function of time to save the context of the definition of private property [[Environment]].

When a function is executed, creates an execution environment of the new recording, the recording layer of the lexical environment (outer lexical environment) is arranged to function [[Environment]]. This action is context switching

JavaScript with a stack to manage the execution context, this stack each also contains a list. As shown below:

When the function is called, will push a new execution context, at the end of the function call, execution context is popped.
And thisit is a more complex mechanism, JavaScript standard defines [[thisMode]]private property.

[[thisMode]] private property has three values :

• lexical: Get this represents from the context, this corresponds to the function arrow.
  - global: indicates when this is undefined, taking global object, corresponding to the ordinary function.
  - strict: When strict mode use, this time in strict accordance with the value of the incoming call, which may be null or undefined.

Interestingly enough, behavioral approach with the regular functions are different, it is precisely because the classdesign has become by default strictexecution mode

When the function to create the lexical environment record a new execution context, it will be based [[thisMode]]to mark a new record of [[ThisBindingStatus]]private property.
Code execution encountered thiswhen, layer by layer would check the current lexical environment record [[ThisBindingStatus]]，has to find when thisacquired when environmental record thisvalues.

The operation of this built-in functions

Function.prototype.callAnd Function.prototype.applycan be passed in a function call is specified thisvalue

function foo(a, b, c){
 console.log(this);
 console.log(a, b, c);
}
foo.call({}, 1, 2, 3);// {}  1 2 3
foo.apply({}, [1, 2, 3]);// {}  1 2 3

Here calland applyeffect is the same, but are different ways of mass participation