Writing and understanding of arrow functions and this in JS

Preface

JavaScript added arrow functions in ES6 syntax. Compared with traditional functions, arrow functions are not only more concise, but also have improvements in this. This is a rather strange thing in JavaScript. Many articles have different interpretations of this. This article attempts to clarify the relationship between functions and this in JS.

1. How to write functions in JS

1. How to write a regular function

Before ES6 syntax, a function in JS consisted of the function keyword, params parameters, and a function body wrapped in curly braces. In order to distinguish it from the arrow function mentioned later, we first call such a function a regular function. Regular functions can be written in both declarative and assignment styles. example:

function test(name) { //Declarative writing console.log(name)
}
test('Jerry')

let test2 = function(name) { //Assignment writing console.log(name)
}
test2('Tom')

2. How to write arrow functions

The introduction of ES6 arrow functions makes the writing of functions more concise, but certain rules must be followed in writing.

Rule 1: Arrow functions can only be written in assignment style, not declarative style

example:

const test = (name) => {
 console.log(name)
}
test('Jerry')

Rule 2: If there is only one parameter, you don’t need to add brackets. If there is no parameter or there are more than one parameter, you need to add brackets.

example:

const test = name => {
 console.log(name)
}
test('Jerry')

const test2 = (name1, name2) => {
 console.log(name1 + ' and ' + name2)
}
test2('Tom', 'Jerry')

Rule 3: If the function body is only one sentence, you don’t need to use curly braces

example:

const test = name => console.log(name) 

Rule 4: If the function body has no parentheses, you don’t need to write return, the arrow function will help you return

example:

const add = (p1, p2) => p1 + p2
add(10, 25)

Remember: the curly braces of the function body go with the return keyword.

From the above examples, we can see that arrow functions simplify both parentheses and curly braces of regular functions. In addition to these simplifications, the biggest optimization of arrow functions over regular functions is this.

2. Understanding this in regular functions

Before discussing the optimization of arrow functions for this, we must first understand what this is and how it is used. this is the first parameter passed when calling a function using the call method. It can be modified when the function is called. When the function is not called, the value of this cannot be determined.

If you have never used the call method to call a function, the above definition of this may not be clear. Then we need to understand the two methods of function calling first.

1. Pure function call

The first method is the most common, and the following is an example:

function test(name) {
 console.log(name)
 console.log(this)
}
test('Jerry') //Call function

This method is the one we use the most, but this function call method is just a shorthand. Its complete writing is as follows:

function test(name) {
 console.log(name)
 console.log(this)
}
test.call(undefined, 'Tom')

Did you notice the call method above that calls the function? The first parameter received by the call method is this, and here we pass undefined. So, according to the definition, will the this typed out after the function is executed be undefined? Not really.

If the context you pass is null or undefined, then the window object is the default context (the default context in strict mode is undefined).

So the this we typed here is the Window object.

2. Calling functions in objects

Let’s look at the example directly:

const obj = {
 name: 'Jerry',
 greet: function() {
 console.log(this.name)
 }
}
obj.greet() //The first calling method obj.greet.call(obj) //The second calling method

In the example, the first calling method is just the syntax sugar of the second calling method. The second one is the complete calling method, and the power of the second method lies in that it can manually specify this.

Example of manually specifying this:

const obj = {
 name: 'Jerry',
 greet: function() {
 console.log(this.name)
 }
}
obj.greet.call({name: 'Spike'}) //The output is Spike

From the above example, we can see that this has been changed when the greet function is executed.

3. this in the constructor

The this in the constructor is a little special. Each constructor will return an object after new. This object is this, which is the context.

example:

function Test() {
 this.name = 'Tom'
}
let p = new Test()
console.log(typeof p) //object
console.log(p.name) // Tom

4. Calling functions in window.setTimeout() and window.setInterval()

The this in the window.setTimeout() and window.setInterval() functions is somewhat special. The this inside defaults to the window object.

To summarize briefly: the complete function calling method is to use the call method, including test.call(context, name) and obj.greet.call(context,name), where context is the context when the function is called, that is, this, but this this can be modified through the call method; the constructor is a little special, its this directly points to the object returned after new; window.setTimeout() and window.setInterval() default this to the window object.

3. Understanding this in arrow functions

We have talked a lot about this above. this is the first parameter passed when a function is called with the call method, and it can be changed manually, so it is too troublesome to determine the value of this. However, the emergence of arrow functions helps us determine this.

1. Feature 1 of arrow function: default binding to outer this

As mentioned above: the value of this can be modified using the call method, and we can only determine the value of this when calling it. When we use arrow functions, the arrow function will bind the value of the outer this for us by default, so the value of this in the arrow function is the same as the outer this.

Example without arrow function:

const obj = {
	a: function() { console.log(this) } 
}
obj.a() //The output is the obj object

Examples of using arrow functions:

const obj = {
 a: () => {
 console.log(this)
 }
}
obj.a() //The output is window

In the example of using arrow functions, because the arrow function does not use its own this by default, but will be consistent with the outer this, the outermost this is the window object.

2. The second feature of arrow function: you cannot use the call method to modify this inside

This is also easy to understand. We have been saying before that the this of a function can be manually specified using the call method. In order to reduce the complexity of this, arrow functions cannot use the call method to specify this.

example:

const obj = {
 a: () => {
 console.log(this)
 }
}
obj.a.call('123') //The result is still the window object

Because we mentioned above that the default this in the window.setTimeout() function is window, we can also use the arrow function to make its this consistent with the outer this:

Example of window.setTimeout():

const obj = {
 a: function() {
 console.log(this)
 window.setTimeout(() => { 
  console.log(this) 
 }, 1000)
 }
}
obj.a.call(obj) //The first this is the obj object, the second this is also the obj object

I think everyone understands that the function obj.a does not use the arrow function, because its this is still obj, and the function in setTimeout uses the arrow function, so it will be consistent with the outer this, which is also obj; if the function in setTimeout does not use the arrow function, then it should be typed out as the window object.

4. This of functions in multi-layer object nesting

Here is a little confusion I encountered while studying. The this in the arrow function is consistent with the outer layer, but if this outer layer has many layers, which layer is it consistent with?

Let’s take an example directly:

const obj = {
 a: function() { console.log(this) },
 b: {
 	c: function() {console.log(this)}
	}
}
obj.a() // prints the obj object, equivalent to obj.a.call(obj)
obj.bc() // prints the obj.b object, equivalent to obj.bccall(obj.b)

The above code is all in line with intuition. Next, replace the function corresponding to obj.bc with an arrow function, and the result is as follows:

const obj = {
 a: function() { console.log(this) },
 b: {
 	c: () => {console.log(this)}
	}
}
obj.a() //The output without arrow function is obj
obj.bc() //What is printed is the window object! !

After calling obj.a, the obj object is printed out, while after calling obj.bc, the window object is printed out instead of obj. This means that in multi-layer object nesting, this in the arrow function is consistent with the outermost layer.

The above content is the knowledge points that the author has sorted out when learning arrow functions. If there are any errors, please criticize and correct them! This is the third article I have written on Nuggets, thank you for reading!

Reference to this article: What is the value of this? Make it clear once

Summarize

This concludes this article about how to write and understand arrow functions and this in JS. For more relevant JS arrow functions and this content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!