what is arrow function
Arrow functions are the new syntax of JavaScript6, also called ES6 for short. It allowed us to condense from eight characters to two characters with the short => instead of function.
const jsjiami1 = function(str){ alert(`I am a normal function jsjiami${str}`); } jsjiami1('.com'); const jsjiami2 = (str) => { alert(`i am arrow function jsjiami${str}`) } jsjiami2('.com'); // It can be clearly seen that we have omitted a lot of time for typing on the keyboard. One function is less than 6 characters, and 100 functions are less than 600 characters, haha.
So in addition to the shortened character length, what other features does it have? Today we will talk about one of the features of arrow functions, this .
what is this
This literally means, this, the current. It is a dynamic variable that points to different objects in different environments. What we need to figure out today is who does this of the arrow function point to under different circumstances? By the way, let's talk about the this of ordinary functions.
this of a normal function
It's not enough to knock the code light theory, we go directly to the experimental class.
var jajiami = function(){ console.log(this); // Windows can try F12 to lose the browser } jajiami('js Online one-key decryption jsjiami.com');
From the preliminary view of the above code, this in the ordinary function points to the window object, don't worry, let's look down.
var obj = { a: 'jsjiami.v6', b: 'sojson.v6', c: function(){ console.log(this); } } obj.c(); // obj object var temp = obj.c; temp(); // window object
Now we create an object that contains a method. Let's try calling it to see what the function's this is.
From the printed results, we can see that the this of obj.c() executed through the object variable is the obj object itself, while the this executed through temp() is the window object. Why?
In fact, it is not difficult to find that the this object here is actually the caller itself, that is, who calls the function, then who is the this of the function.
At this point, a small number of friends with weaker foundations may be curious, why temp() has no caller and his this object is indeed window? The official documentation says this: Because this is not set in this function, it defaults to the global/window object. (Because there is no caller, it defaults to window)
this summary of ordinary functions
whoever calls me is this
the this of the arrow function
The this of an arrow function is a bit different from the this of a normal function. Specifically, we are still directly experimenting.
var jsjiami = () => { console.log(this); // window } jsjiami();
At first glance, arrow functions are the same as ordinary functions, calling this directly is the window object, but let's not look down.
var obj = { a: 'jsjiami.v6', b: 'sojson.v6', c: () => { console.log(this); } } obj.c(); // window var temp = obj.c; temp(); // window
I believe that many people who don't understand will be very puzzled, why the c method is called with an object here. this also points to the window object.
Here is a sentence from the official document to answer: the syntax of arrow function expressions is more concise than function expressions, and it does not have its own this.
Can't see anything now, let's add another layer of nesting to see
var obj = { a: 'jsjiami.v6', b: 'sojson.v6', c: function(){ var d = () => { console.log(this); } d(); } } obj.c(); // obj var temp = obj.c; temp(); // window
After a layer of ordinary functions is nested in the outer layer, the this of obj.c() becomes the obj object, and here we can start to think about some of the details. as in the example below
var obj = { a: 'jsjiami.v6', b: 'sojson.v6', c: function(){ console.log(this); } } obj.c(); // obj var temp = obj.c; temp(); // window
In this example, obj.c() is also an obj object, so what's the difference from the above? By contrast, you can see whether or not it is wrapped in an arrow function, in obj. C() This is an obj object when executed, then combined with the sentence of the official document (the arrow function does not have its own this), it is concluded that the arrow function This is the in the outer scope of the arrow function.
Summarize
According to a large number of experiments we found that:
This => whoever calls me is this of ordinary functions, and the default is window if there is no caller
Arrow function this => what is this in my outer scope, what is my this
In the field of js security, js encryption and decryption It also requires strong js knowledge to support, among which this is also the top priority. The above is all my understanding of this arrow function. If there is any incorrect place, please help to supplement and correct it.