Basic usage

Arrow function

let sum = (a, b) => {
    return a + b;
}
Copy the code

Common function

var sum = function (a, b){
    return a + b;
}
Copy the code

The difference between

Before looking at ruan yifeng elder es6 article mentioned this knowledge point, but yesterday the interview was asked, only answered this, so quickly take time to sort out the knowledge point, check the missing, the following start the text.

1. This refers to the problem

This should be paid special attention to, and is also the interviewer’s most attention during the interview. The arrow function’s this refers to the parent scope’s this, and determines the value of this by looking up the scope chain, that is, looking at the context’s this refers to the object that defined it, not the object on which it was used; A normal function points to its direct caller.

When you say this, the interviewer will probably ask you some extended questions about this, such as how to change this reference, such as the bind method, and then ask you to implement the bind method. Anyway, there’s a lot to ask. (2) Arrow function this

let obj = {
        a: 1,
        b: () => {
            console.log(this.a); // undefined
        },
        c: function() { console.log(this.a); / / 1}}; obj.b(); obj.c();Copy the code

The arrow function does not have this; its this is inherited and by default points to the object at which it was defined, that is, the host object, not the object executing it. Here we pass obj.b(), and the window object that this points to has no A on it, so we return undefined. By obj.c(),this refers to its direct caller, which is obj, so returns 1.

var obj = {
        a:1, 
        print() {setTimeout(
               function(){console.log(this.a);},
               1000
           );
        }
    };
obj.print();//undefined
Copy the code

The timer function has no default host object, and the setTimeout function is not called by any object. Its this refers to the window object by default, and undefined is output naturally.

var obj = {
        a:1,
        print() {setTimeout(
               () => { console.log(this.a); },
               1000
            );
        }
    };
    obj.print();// 1
Copy the code

The arrow function’s this refers to the object that defines it, so this refers to an obj object, so obj.a should really print 1. ⚠️ Finally, note that arrow functions don’t have this, so we can’t use call(), apply(), or bind() to change the direction of this.

2. Cannot be treated as a constructor

Cannot be used as a constructor. Using the new command as a constructor returns an error. There is no prototype construction, prototype properties are not available, and new target is not available.

You can never use the arguments object. This object does not exist in the function body. Use rest arguments instead.

functionf1(arr) { console.log(arguments); } f1 ([1, 2, 3]); / / [1, 2, 3]letf2 = (arr) => { console.log(arguments); } f2 (,3,9 [1]); //Uncaught ReferenceError: arguments is not definedletf3 = (... arr) => { console.log(arr); } f3 (].enlighened); / /].enlighenedCopy the code

4. Arrow functions cannot be used as Generator functions because yield cannot be used.

Afterword.

Recently because of preparing for the interview, so I plan to sort out the knowledge points, convenient for knowledge consolidation, if there is any incorrect place in the article, please kindly criticize and correct ~