Recently, I was asked a question about the features of the arrow function. At that time, I thought, I am familiar with this, and I came up with it at random. I don’t have my own “this”, which is the same as the function defined recently. So let’s look at the down arrow function today.

Summary version

Save time can see here!! Different from traditional JS functions

  • Cannot be called by the new keyword, there is no prototype
  • You cannot change the this binding, which is determined by the outer non-arrow functions, so using call, apply, and bind will not affect it
  • Arguments is not supported, so depending on the scope chain, you get the arguments of the outer function
  • Duplicate named parameters are not supported
  • Implicit return

Arrow functions are a syntax introduced in ES6. Unlike previous functions defined using function, arrow functions are more concise, even requiring only one () =>.

For example

(a, b) => a + b
/ / equivalent to the
funtion(a, b){
  return a + b
}
Copy the code

So you see, they don’t look alike, and of course there are a lot of differences. Let’s take a look at the differences

Implicit return

Look at our example, why can we return a + b without using return in the arrow function?

There is always a hidden return value inside the function. If you use function to define nothing, undefined is returned by default.

function noReturn() {
  console.log('aaa')
  return // Do not write this manually, default is not written
}
Copy the code

That is, if you don’t have a return in the function, it will automatically add one to you

What’s different about the arrow function function?

The arrow function saves you a return, which is appropriate for a function that has only one line of code in it

Note, however, that if return is a value, you do not need {}

One caveat, though, is that if you return a literal you need to add (), see the following example

const add = (a, b) = > a + b
const obj = (a)= > ({ a: 1 })
Copy the code

This

Well, this is what impressed me most.

We know that this is determined at runtime due to the special nature of JS, which can often lead to confusing behavior in code.

If we call this inside a function or inside a nested function, the result is different. This is summarized in ordinary functions as the following behavior

  1. Use the new keyword when calling a function, where this is a brand new object.
  2. If the apply, call, or bind methods are used to call and create a function, this is the object passed to those methods as an argument.
  3. When a function is called as a method in an object, this in the function is the object on which the function is called.
  4. If the calling function does not conform to the above rules, then the value of this refers to the global object.
  5. The value of this points to the window object in the browser environment, but in strict mode'use strict', the value of this is undefined.

Priority is ordered from highest to lowest. This is a bit more complicated, but that’s another topic, I won’t go into it here, but we’ll focus on the difference between arrow functions

How or where is executed inside the arrow functionthisThe value is always equal to the nearest external functionthisValue. In other words, arrow functions are lexically parsedthisArrow functions do not define their own execution context.

What’s the benefit of that? Let’s give you an example

const obj = {
	value: 2.callback: function(arr) {
		var self = this
		function showThis() {
			console.log(self.value)
		}
    showThis()
	}
}

const obj2 = {
	value: 2.callback: function(arr) {
		showThis = (a)= > {
			console.log(this.value)
		}
		showThis()
	}
}
obj.callback() / / 2
obj2.callback() / / 2
Copy the code

This improves the case where we had to define variables to use this outside of a nested function.

It’s also used in classes. If you’re familiar with React, you’ll need to bind this if you want to use a method in a class.

So the arrow function’s this is written, so call, apply, and bind cannot change it

arguments

We know with conventional function, an array of the arguments of the type of object, contains all the parameters of the function, is often used in the case of we don’t have a specific definition parameters, and the arrow function is not support the object, so if you use in arrow function, according to the scope chain lookup rules, would have been a query to the nearest the arrow function, Then you actually use arguments from the non-arrow function

For this reason, ES6 also provides parameters in this indeterminate case if operated, see the following example

const add = (. args) = > {
	return args.reduce((cur, i) = > cur + i, 0)
}
add(5.10.15)
Copy the code

. Args converts undecided arguments to an array, but use this only once and at the end of all arguments

Can’t use new & no prototype

Since you can’t use new, the arrow function doesn’t have a prototype, nor does ES6’s new. Target, which naturally doesn’t have access to prototype properties through super

var Foo = (a)= > {};
console.log(Foo.prototype); // undefined
Copy the code

Well, that’s the difference between arrow functions and normal functions, and it feels like a new world