1. This refers to the scope in which the arrow function is defined (cannot be changed).

let person = {
    name:'jike'.init:function(){
        document.body.onclick = () = >{// Arrow function
            alert(this.name);
        }
    }
}
person.init();// This points to the Person object


let person = {
    name:'jike'.init:() = >{// Arrow function
        document.body.onclick = () = >{// Arrow function
            alert(this.name);                
        }
    }
}
person.init();// This points to window
Copy the code

Arrow functions cannot be constructors. New cannot be used

  • The arrow function cannot change this through call() apply() bind(), so it cannot create an instance as a constructor
  • The arrow function has no instance, where this points elsewhere
  • Cannot generate a Person instance, paradoxical

// The constructor is as follows:
function Person(p){
    this.name = p.name;
}
// If the arrow function is used as the constructor, it looks like this
var Person = (p) = > {
    this.name = p.name;
}
Copy the code

3, Arrow functions have no arguments, caller, callee

  • Arrow functions have no arguments of their own (from parent scope)
  • To accept indefinite arguments in arrow functions, use rest arguments… To solve

let B = (b) = >{
  console.log(arguments);
}
B(2.92.32.32);   // Uncaught ReferenceError: arguments is not defined

let C = (. c) = > {
  console.log(c);
}
C(3.82.32.11323);  // [3, 82, 32, 11323]
Copy the code

4. The arrow function is called by call and apply and does not change the this pointer

  • So you can’t create an instance with new

let obj2 = {
    a: 10.b: function(n) {
        let f = (n) = > n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) = > n + this.a;
        let m = {
            a: 20
        };
        returnf.call(m,n); }};console.log(obj2.b(1));  / / 11
console.log(obj2.c(1)); / / 11

Copy the code

5. Arrow functions have no stereotype attributes

var a = () = >{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   / / {constructor: ƒ}
Copy the code

Arrow functions are not Generator functions and cannot use the yield keyword

7. When the arrow function returns an object, add a parenthesis

var func = () = > ({ foo: 1 }); / / right
var func = () = > { foo: 1 };   / / error
Copy the code

Arrow functions are declared as instance methods in ES6 class, not prototype methods

inclassTo minimize the use of arrow function declarationsdeom1
class Super{
    sayName(){
        //do some thing here}}var a = new Super()
var b = new Super()
a.sayName === b.sayName //true


//demo2
class Super{
    sayName =() = >{// The arrow function has an instance method
        //do some thing here}}// The sayName method cannot be accessed through super. prototype because it is not defined on prototype
var a = new Super()
var b = new Super()

// Instantiated objects each have their own sayName method and require more memory than Demo1
a.sayName === b.sayName //false
Copy the code

9. The multiple arrow function is a higher-order function, equivalent to an embedded function

const add = x= > y= > y + x;
/ / equivalent to
function add(x){
    return function(y){
        return y + x;
    };
}
Copy the code

Common error with arrow function

let a = {
  foo: 1.bar: () = > console.log(this.foo)// point to the parent scope
}

a.bar()  //undefined


function A() {
  this.foo = 1
}

A.prototype.bar = () = > console.log(this.foo)// point to the parent scope

let a = new A()
a.bar()  //undefined
Copy the code