In-depth understanding of this mechanism series third--arrow function

xTable of Contents [1] pain point [2] settlement [3] Basic usage [4] callback function [5] precautions before

The This mechanism is related to function calls, while scopes are related to function definitions. Is there anything that can be linked to this mechanism and scope? This article describes what's new in ES6-arrow functions

Pain Point

The pain point for closures is that the this of the closure is bound to the Window object by default, but often requires access to the this of the nested function, so it is often used in nested functions with the var = this and then in the closure that replaces this. Use the scope lookup method to find the this value of a nested function

 var  a = 0;  function   Foo () {  Test () {Console.log ( this  .a);  return   test;};  var  obj = {a:  2, Foo:foo}obj.foo () ();  // 0  

var a = 0; function foo () {    varthis;     function Test () {        console.log (THAT.A);    }     return test;}; var obj = {    2,    Foo:foo}obj.foo () (); // 2

Solve

The presence of the arrow functions can be a good solution to the problem. The arrow function determines this based on the current lexical scope rather than the order of the This mechanism, so the arrow function inherits the this binding of the outer function call, regardless of what the this binds to

 var  test = () => {Console.log ( Span style= "color: #0000ff;" >this  .a);}  //  formal equivalent to  var  test =  () {Console.log ( this  .a);}  //  function   FN () { var  that = this  ;  var  test = function   () {console.log (THAT.A); }}

var a = 0; function foo () {    var test = () = {        Console.log (this. a);    }     return test;}; var obj = {    2,    Foo:foo}obj.foo () (); // 2

Basic usage

ES6 allows you to define functions using arrows (= =), commonly called fat Arrows

var f = v = V;console.log (f (1)); // 1 // equivalent to var function (v) {  return  v;}; Console.log (f (1)); // 1

If the arrow functions do not require arguments or require multiple arguments, use a parenthesis 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 the arrow functions have more than one statement of code block, enclose them in curly braces.

var sum = (NUM1, num2) = {     var restult = num1 + num2;     return result;}

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"});

callback function

The arrow functions are most commonly used in callback functions, such as in an event handler or timer

 function   Foo () {setTimeout (()  = > {Console.log ( this  .A); },  100 var  obj = {a:  2};foo.call (obj);  //  2  

// equivalent to function foo () {    varthis;      function () {        console.log (that.a);     );} var obj = {    2//  2

Precautions

"1" This is bound in the arrow function, and no matter which of the 4 binding rules can change its binding

varA = 0;functionfoo () {varTest = () ={Console.log ( This. a); }    returntest;};varObj1 ={A:1, Foo:foo}varObj2 ={A:2, Foo:foo}obj1.foo () ();//1varBar =Foo.call (obj1);//since the previous statement has bound this to obj1, it cannot be modified. So this clause call (OBJ2) is invalid, the value returned is obj1.a 1Bar.call (OBJ2);//1

The "2" arrow function cannot be used as a constructor, that is, you cannot use the new command, or you will get an error

var foo = () =>{return 1;} Foo (); // 1 var New foo (); // uncaught Typeerror:foo is not a constructor

Arguments object does not exist in "3" arrow function

var foo = () ={    console.log (arguments); // uncaught referenceerror:arguments is not defined    return 1;} Foo ();

At last

Although the arrow function can link the scope and this mechanism, it is easy to confuse and make the code difficult to maintain. You should choose one of two in the scope and this mechanism, or they will really sink into porridge. Either use lexical scopes only, or use the This mechanism only, and bind () if necessary. Try to avoid using that=this and arrow functions

This mechanism series is finished. The most important is the first article of the binding principle of this mechanism, the second this mechanism is the priority of the main points, and this is the expansion of the chapter. If there are any irregularities, please contact

Above

In-depth understanding of this mechanism series third--arrow function