ES6 Learning notes 10--arrow functions

Basic usage

ES6 allows you to define functions using the arrows ( => ).

var f = v + V;

The above arrow functions are equivalent to:

var function (v) {  return  v;};

If the arrow function does not require arguments or requires more than one argument, a parenthesis is used to represent the parameter part.

var f = () = 5; // equivalent to var function return 5 }; var sum = (NUM1, num2) = Num1 + num2; // equivalent to var function (NUM1, num2) {  return num1 + num2;};

If there are more than one statement in the block of code for the arrow function, enclose them in curly braces and return return using the statement.

var return NUM1 + num2; }

Because curly braces are interpreted as blocks of code, if an arrow function returns an object directly, you must enclose the object in parentheses.

var gettempitem = id = = ({id:id, Name: "Temp"});

The arrow functions can be used in conjunction with variable deconstruction.

Const FULL = ({first, last}) = + first + "+ Last ; // equivalent to function Full (person) {  return Person.first + ' + person.last;}

Use note points

The arrow functions have several points of note to use.

(1) The object in the body of the function is the object this that is defined, not the object in which it is used.

(2) can not be used as a constructor, that is, you can not use new the command, or you will throw an error.

(3) An object cannot be used arguments , and the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

(4) yield commands cannot be used, so an arrow function cannot be used as a generator function.

  Code class= "Pcalibre3 pcalibre4 calibre14" >this  points to the invariant  , not because the arrow letter this  within a number, and the actual  reason is the arrow Span style= "color: #000000;" The function does not have its own this ,  resulting in internal < Code class= "Pcalibre3 pcalibre4 calibre14" >this  is the outer code block of this  . It is because it does not have this , so it cannot be used as a constructor. 
 
 

In addition this , the following three variables are not present in the arrow functions, pointing to the corresponding variables of the outer function: arguments ,, super new.target .

function foo () {  = = {    console.log (' args: ', arguments)  ; );} Foo (2, 4, 6, 8)//  args: [2, 4, 6, 8]

In the above code, the variables inside the arrow functions arguments are actually foo variables of the function arguments .

In addition, because the arrow functions do not own this , so of course, it can not be used call() , apply() and bind() These methods to change this the point.

(function() {  return  [    this. x]. Bind ({x: ' inner' }) ()  ' outer ' }); // [' outer ']

In the above code, the arrow function does not have its own this , so the bind method is invalid, the internal point of the this external this .

For a long time, the object of JavaScript language this has been a headache, and it this must be very careful to use it in object methods. The arrow function "binding" largely this solves this obsession.

function bindings

The arrow function can bind the this object, greatly reducing the writing this ( call , apply , bind ) of the explicit bound object. However, the arrow function is not suitable for all occasions, so ES7 proposes a function bind operator to replace call , apply bind invoke. Although this syntax is still a ES7 proposal, the Babel transcoding device has been supported.

The function-binding operator is a two double-colon (::)-side, double-colon-to-left is an object, and the right is a function. The operator automatically binds the left object, which is the context (the This object), to the function on the right.

Foo::bar; // equivalent to Bar.bind (foo); Foo::bar (... arguments); // equivalent to  = Object.prototype.hasOwnProperty; function Hasown (obj, key) {  return  obj::hasownproperty (key);}

If the left side of the double colon is empty and the right side is a method of an object, it is equal to binding the method on top of the object.

var method = Obj::obj.foo; // equivalent to var method == :: console.log; // equivalent to var log = Console.log.bind (console);

Because the double-colon operator Returns or is the original object, you can use chained notation.

Tail call optimization What is a tail call?

The Tail call is an important concept of functional programming, which is very simple in one sentence, meaning that the last step of a function is to invoke another function.

function f (x) {  return  g (x);}

In the above code, the last step of function f is to call the function g, which is called the tail call.

Tail Call Optimization(Tail called optimization), which preserves only the call frame of the inner layer function. If all of the functions are tail calls, then there is only one entry for each execution of the call frame, which greatly saves memory. This is the meaning of "tail call optimization".

Strict mode

ES6 the tail call optimization is only enabled in strict mode, the normal mode is invalid.

This is because in normal mode, there are two variables inside the function that can track the call stack of a function.

• func.arguments: Returns the arguments of the function when called.
• func.caller: Returns the function that called the current function.

When the tail call optimization occurs, the function's call stack is overwritten, so the above two variables will be distorted. Strict mode disables these two variables, so the tail call mode only takes effect in strict mode.

function restricted () {  "use strict";  Restricted.caller;     // Error  // Error }restricted ();

ES6 Learning notes 10--arrow functions