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