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.