Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Arrow function is a new expression method of function in ES6, which looks very simple. I used it often before, but I didn’t have the overall learning. Today, I decided to further learn arrow function on a whim

start

We used to do this when we were writing functions

function fun() {
    return 100;
}

console.log(fun());     / / 100
Copy the code

I’ll write it this way

const fun = function() {
    return 100;
}

console.log(fun());     / / 100
Copy the code

In ES6, we simplified the code

const fun1 = () = > {
    return 100;
}
console.log(fun1());     / / 100
Copy the code

To simplify the again

const fun2 = x= > x;
console.log(fun2(100));     / / 100
Copy the code
  • () defines arguments in (). If there is only one argument, () can be omitted
  • Write the function body in {}. If the function body contains only the return value, do not write the return

The difference between arrow functions and ordinary functions

For example

let obj = {
    name: 'Ming'.age: 3.sayName() {
        setTimeout(function() {
            console.log("I am" + this.name);
        }, 500)
    }
}
obj.sayName();
Copy the code

When this string of code is executed, it will print “I am undefined”, so why can’t “Xiao Ming” be printed?

let obj = {
    name: 'Ming'.age: 3.sayName() {
        setTimeout(function() {
            console.log(this);
        }, 500)
    }
}
obj.sayName();
Copy the code

So we print this, and it prints the window object, so this refers to the window object, which is the global object. Because the code here is a function inside the sayName function. The “this” in the inner function cannot refer to Ming, but the “this” in the sayName function can refer to Ming. The solution is to define a variable in the sayName function with the value of “this”, and the inner function points to Ming through the variable

let obj = {
    name: 'Ming'.age: 3.sayName() {
        let self = this;
        setTimeout(function() {
            console.log("I am" + self.name);
        }, 500)
    }
}
obj.sayName();
Copy the code

So I can print out that I am Xiao Ming

Using the arrow function

Look at the following line of code that uses the arrow function

let obj = {
    name: 'Ming'.age: 3.sayName() {
        setTimeout(() = > {
            console.log("I am" + this.name);
        }, 500)
    }
}
obj.sayName();
Copy the code

The printed result is that I am Xiao Ming

I think you have the same question as I do: why is it possible to use the arrow function?

The difference between arrow functions and ordinary functions

  • This points differently

    • Ordinary functions: Who calls this function,thisPoint to the who
    • Arrow functions: Where to define functions,thisPoint to the who

Until the end

Hee hee hee hee, small white temporarily used also so much (in fact, I will be so much), the follow-up I will continue to update this blog

  • Follow-up: Arguments, super, new.target