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

This article introduces the relevant knowledge of "this pointing Analysis of JS Arrow function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The arrow function is a new feature in ES6. It doesn't have its own this, and its this points to inheritance from the outer code base.

There are a few points to note when using the arrow function:

The arrow function cannot be used as a constructor, and an error will be thrown if used

Cannot use the arguments parameter, use rest if you want to

The yield command cannot be used, so the arrow function cannot be used as a Generator function

Because you don't have your own this, you can't change the this direction through bind, call, or apply.

But this does not mean that the this direction of the arrow function is static. We can control it by changing the this direction of its outer code base.

The this of the arrow function inherits from the outer code base, so the this of the arrow function is bound at the time of definition, while the ordinary function makes sure that the this points to the

The this of the arrow function directly defined in the literal object does not bind the object, but looks for a layer outside, the easiest case is to bind to window

PS: in a real development environment, React can use the arrow function to solve a classic problem, which is not detailed here.

Give an example to take a look at the actual situation of the arrow function:

Const obj = {fun1: function () {console.log (this); return () = > {console.log (this);}}, fun2: function () {return function () {console.log (this); return () = > {console.log (this);}, fun3: () = > {console.log (this);}} let F1 = obj.fun1 () / / objf1 () / / objlet f2 = obj.fun2 (); let f2 = f2 (); / / windowf2_2 () / / windowobj.fun3 (); / / window

Analysis of each line output:

Let F1 = obj.fun1 () / / obj

What is obviously going on here is implicit binding, and the this of fun1 points to obj

F1 () / / obj

Here we execute the arrow function returned from the previous line. We analyze that the this of the code base above points to obj, so it inherits directly, and the arrow function this points to

Objlet f2 = obj.fun2 ()

When the first layer of fun2 executes, it does not print the code. Instead, it returns a function that assigns a value to f2. Here, binding loss occurs, and this points to window from the original obj (assignment occurs).

Let f2room2 = f2 () / / window

F2 () executes, prints out the rebound this--window, and then returns the arrow function, assigning a value to f2room2f

2. 2 () / / window

Execute the print out window. The this of the outer code just now points to window, so here we inherit window as the this.

Obj.fun3 () / / window

The arrow function directly defined in the literal quantity cannot inherit the this of the object, but looks one more layer out and finds the window, because the literal object cannot form its own layer of scope, but the constructor can.

So how do we manipulate the this direction of the arrow function:

The answer is to change the this direction of the outer code base and change the direction to this before the arrow function is defined.

Based on the above code:

Let fun4 = f2.bind (obj) () / / objfun4 () / / obj

We found that the this direction of the second-level method was modified, and the arrow function was inherited.

Fun2: function () {return function () {/ / We modified this console.log (this) here; return () = > {/ / then inherited console.log (this);}, "this pointing Analysis of JS Arrow function" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.