JS (= =) Arrow Function detailed explanation case Daquan

Source: Internet
Author: User

The ES6 standard adds a new function: arrow function.

Why is it called Arrow Function? Because it's defined by an arrow:

x = x * x

The above arrow functions are equivalent to:

function (x) {    return x * x;}

The arrow function is equivalent to an anonymous function and simplifies the function definition. The arrow functions have two formats, one like the above, containing only one expression, { ... } and return both are omitted. There is one more statement that can contain multiple statements, and it is not possible to omit { ... } and return :

x = {    if0) {        return x * x;    }     Else {        return -X * x;    }}

If the arguments are not one, you need to () enclose them in parentheses:

// two parameters: (x, y) = x * x + y * y//  no parameter:3.14//  variable parameter:(x, y, ... rest) =>
   
     {    
    var i, sum = x +
     y;     
     for (i=
    0; i<rest.length; i++
    ) {        + =
     rest[i]    ;    } 
    return 
    sum;}
   

If you want to return an object, be aware that if it is a single expression, you will get an error if you write this:

// syntaxerror:x = {foo:x}
因为和函数体的{ ... }有语法冲突,所以要改为:
// OK:x = ({foo:x})
This

The arrow function appears to be a shorthand for anonymous functions, but in fact, there is an obvious difference between an arrow function and an anonymous function: The lexical scope inside the arrow function this is determined by the context.

Looking back at the previous example, this The following example does not get the expected result due to the JavaScript function's error handling of the binding:

 var  obj = {birth:  1990   var< /span> B = this . Birth; //   1990  var  fn = function () { return  new  Date () . getFullYear ()-this . Birth; //  This points to window or undefined         };     return   FN (); }};

Now, the arrow function completely fixes this the point, this always pointing to the lexical scope, that is, the outer caller obj :

var obj = {    1990,    getage:function () {        varthis  //  1990        varnewthis//  This points to the Obj object        return  fn (    ); //  -

If you use the arrow function, the previous type of hack notation:

var this;

It's no longer necessary.

Because the this lexical scope has been bound in the arrow function, it is call() apply() not possible to bind when using or invoking an arrow function, that is, this the first parameter passed in is ignored:

var obj = {    1990,    getage:function (year) {        varthis  //  1990        varThis//  This.birth is still 1990        return fn.call ({birth:$}, year);    }};o Bj.getage (//   )

 

JS (= =) Arrow Function detailed explanation of case Daquan

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.