Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the this of the JavaScript arrow function". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to use the this of the JavaScript arrow function" can help you solve the problem.

/ / Arrow function is used inside the constructor

Function Person (a) {

This.a = a

This.b = () = > {

Console.log (this.a)

}

}

New Person (10) .b () / / output 10

/ / the this of the arrow function is inherited from the outer layer. In this example, this in the arrow function is equal to the this outside the arrow function, which is correct.

/ / use the arrow function when customizing the class

Var a = "1"

Class A {

Constructor (a) {

This.a = a

}

GetName = () = > {

Console.log (this)

}

}

New A ("2"). GetName () / / output 2

/ / the this of the arrow function is inherited from the outer layer. My understanding is that this in the arrow function inherits the this in the class, which is correct

/ / use constructors in objects

Var a = 1

Var obj = {

A: 2

Say1: () = > {

Console.log (this.a)

}

Say2: function () {

Console.log (this.a)

}

B: {

A: 3

Say5: () = > {

Console.log (this.a)

}

}

}

Obj.say1 (); / / 1

Obj.say2 (); / / 2

Obj.b.say5 () / / 1

Let say3 = obj.say1

Let say4 = obj.say2

Say3 (); / / 1

Say4 (); / / 1

/ / if the this of the arrow function is inherited from the outer layer, then the this in say1 should point to obj, but the result points to window, and no matter how many layers of objects are nested, the this of the arrow function always points to window (as you can see from the say5 output 1). The reason why say3 outputs 1 is because let say3=obj.say1 only assigns the function to the owner of say3,say3 is window, so this points to window.

Conclusion: I think the sentence "the this of the arrow function is inherited from the outer layer" can not summarize the direction of this, but should be discussed on a case-by-case basis, of course, it is also possible that I do not understand this sentence thoroughly enough.

Finally, there is one last piece of knowledge: the this in the arrow function points to the this at definition, not the this at execution time.

First, let's take a look at the ordinary function. The th value of the ordinary function will change due to the change of the object that called the function.

Var axi1

Var obj = {

A:2

Say () {

SetTimeout (

Function () {console.log (this.a);}

one thousand

);

}

}

Obj.say (); / / output 1

/ / because setTimeout is the method of window object, when console.log (this.a) is executed after a delay of 1 second, the this has changed from pointing to obj to pointing to window, so output 1

/ / similarly, apply,call,bind can also change the direction of this in ordinary functions

Var obj = {

A: 2

Say: function () {

Console.log (this.a)

}

}

Var obj2 = {

A: 3

}

Obj.say () / / output 2

Obj.say.call (obj2) / / output 3

Obj.say.apply (obj2) / / output 3

Var say2=obj.say.bind (obj2)

Say2 () / / output 3

By contrast, the this of the arrow function is determined when the function is defined and will not be changed (see the example below)

Var a = 1

Var obj = {

A: 2

Say () {

SetTimeout (

() = > {console.log (this.a);}

one thousand

);

}

}

Obj.say (); / / output 2

Var a = 1

Var obj = {

A: 2

Say: () = > {

Console.log (this.a) / / as mentioned earlier, this refers to window

}

}

Var obj2 = {

A: 3

}

Obj.say () / / output 1

Obj.say.call (obj2) / / output 1

Obj.say.apply (obj2) / / output 1

Var say2=obj.say.bind (obj2)

Say2 () / / output 1

This is the end of the introduction on "how to use the this of the JavaScript Arrow function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.