Arrow functions – ES6 series 4

The arrow function itself, in fact, is just trying to simplify the way functions are written, and in the past all functions had to have a function keyword, which was a little bit clunky and in my opinion, a little bit more streamlined for the code, but a little bit harder for us to read the code. But anyway, it’s pretty common, so let’s summarize a little bit about arrow functions.

So let’s just write it

There are different ways to simplify arrow functions for different situations, so it’s important to familiarize yourself with them, or else you might get a headache looking at the code later…

First, the return value of the parameter =>

  let fn = a= > a*2;
  console.log(fn(10));/ / 20
Copy the code

As you can see, the two lines of code is very simple, what does that mean The first row, declare a function fn this function with a parameter of a, then this function did not execute a statement, directly back to a * 2 the second row perform print we should be no problem, so when we are in fn call incoming parameters 10, get the result of the natural is 20

Second, (parameter, parameter)=> return value

  let fn = a,b= > a*b;
  console.log(fn(10.2));/ / 20
Copy the code

I’m sorry, I made a mistake. Look at the bottom

  let fn = (a,b) = > a*b;
  console.log(fn(10.2));/ / 20
Copy the code

As you can see, when the number of parameters is greater than one, you need to wrap it in parentheses, otherwise, the computer will look at you as an idiot if there is a comma in the middle for no reason

Third, ()=> return value

  let fn = () = > 'This is the return value.';
  console.log(fn());//' This is the return value '
Copy the code

This is relatively simple, but when the code is much, often easy to overlook the back of the return value, so we should pay attention to when encounter this kind of writing, there are some colleagues and old fevered most like to do such a thing, it is simply a piece of code, have to write you don’t know, such as ternary operators, comparison operators belong to this category.

Fourth, ()=>{execute statement}

  let fn = () = > {
    console.log('Have done something');
  };
  fn();//' do something '
Copy the code

In fact, the code is written here has been more clear, but also more rules, in short, the first three are special cases, we do an understanding, in the front is also to attract your attention, the normal code we encounter more is currently seen in this situation

Because it’s rare to have a function that just returns a value and does nothing else, it’s like a schoolgirl asking you to fix the computer when all you really did was fix it. Of course, pure repairmen are another word.

The fifth way is to write it completely

  let fn = (a,b) = > {
     console.log('Have done something');
     return 'Here's the return value.'
  };
  fn();//' do something '
Copy the code

When the function parameters, return values, execute the statement, about the long this appearance But also should pay attention to oh, in front of fn can’t omit, otherwise this function unless you since the execution, or binding upon an element of events, otherwise the function can not be performed, this function before and do not have what difference

parameter

1, indefinite parameter

Arguments: Normal arguments are the same, but there are two things to note. The first is that arrow functions don’t have the arguments literal

  function a(){
     console.log(arguments)
  }
  a(1.2.3.4.5.6);// 1,2,3,4,5,6
Copy the code

The arrow function doesn’t have the same thing. Instead, it has something a little more advanced called rest arguments. This is done using the expansion operator:

  let fn = (. arg) = > {
      console.log(arg);
      return 'Here's the return value.'
  };
  fn(1.2.3.4.5.6);/ / / a, 2,3,4,5,6
Copy the code

In this code… The three dots in front of arg are the expansion operator, which means to expand all the received parameters into the arG variable, so that arG contains all the parameters

But notice that arG is an array!

2. Default values

ES6 has made a more user-friendly change, that is, the parameters can be set to default values, we used to want to make the parameters error, that is simply too. To feel a wave:

  _this.point = option.point;
  _this.k = option.k || 0.6;
  _this.interval = option.interval || 1;
  _this.C1 = option.canvas;
  _this.C1.strokeStyle= option.strokeStyle || "# 899";
  _this.C1.fillStyle = option.fillStyle || '# 899';
  _this.isFull = option.isFull || false;
  _this.callBack = option.callBack || false;
  _this.drawFunction = option.drawFunction || false;
  _this.speed = option.speed || 2;
  _this.element = option.element;
Copy the code

This is actually not rigorous enough, like the inside_this.kIf the argument passed is a 0…

So to be even more rigorous, we even need typeof to determine the parameter type, which is amazing. With parameter defaults, things get a lot easier:

  let fn = (a=1,b=10) = > {
      console.log(a,b);
      return 'Here's the return value.'
  };
  fn(0.2);/ / 0, 2
Copy the code

Write the default value after the parameter. When the parameter is passed, the parameter is passed. When the parameter is not passed, the parameter is passed. That’s a relief

This points to the

A lot of people struggle with this question, but here’s a secret:

• The this pointer of a normal function is a straw in the wind
• The arrow function “this” points to a straight man

Ordinary functions:

  let obj = {
      fn:function(){
          console.log(this); }}let a = obj.fn;

  obj.fn();//obj
  a();//window
  document.onclick = obj.fn;//#document
Copy the code

As you can see, a normal function, in which this refers to the first undefined object, is called through the outer object, so it refers to the outer object, and in the second case, it assigns a function to another variable, calls it directly from the variable, and in the third case, calls it through the event, refers to the element that triggered the event

Let’s do the same thing with the arrow function

  let obj = {
      fn:() = >{
          console.log(this); }}let a = obj.fn;

  obj.fn();//window
  a();//window
  document.onclick = obj.fn;//window
Copy the code

And you can see that no matter how it’s called, this is always referring to window because the arrow function doesn’t have this itself, so this in the arrow function refers to this in the context in which this function is defined, okay

In the above code, the arrow function is defined in an environment where this refers to the window, so no matter how the function is called later, the this reference in the function will not change.

Even if you write:

  document.onclick = () = >{
      console.log(this);
  };//window
Copy the code

This, in this case, also refers to the window, so be very careful about that.

The last

If you think the article is helpful to you, welcome to like oh, after reading the text for so long, let us relax a wave of eyes, take a look at the following pictures ~