In the recent distinction between arrow functions and normal functions, one important difference is that this refers to the problem. The author is stupid, so I understand the following, the whole network programmers should be no problem. Get to the point…

This of a normal function

First of all, let’s understand the this pointing problem of ordinary functions:

const obj = {
    bg:function(){
        console.log(this)    
    }
}
obj.bg() //obj
var dbl = obj.bg
dbj() //windows
Copy the code

In the above code, the obj object has a normal function property for bg. The first line calls obj.bg(), and this points to obj. Var DBL = obj. Bg; DBL = obj. Bg; DBL = obj; So the above summary:

  • 1. Ordinary functions end up pointing to the object on which they are called.
  • 2. Functions not called by an object point to window by default
function test(){
    console.log(this)
}
test()     //windows
new test() / / the test object
test.call({id:1}) / / {id: 1} object
Copy the code

Test is a normal constructor. The first line is executed and this in the normal function points to the window. The second line is a new instance and this points to the object of test. What happened? We didn’t know enough about what New was doing. New keyword: 1. Create a new object. 2. Redirect this new object’s __proto__ to the prototype constructor object. 3. Point the constructor’s this to the new object and execute, for example: test.call(newobj). 4. Return a new object. We can see why instantiating a constructor new test() points to the test object. Test. call({id:1}); test.call({id:1}); So if the same constructor is called differently, this will refer to a different object. So the above summary:

  • 3. The direction of this cannot be determined when the function is not called, that is, the this of ordinary functions is determined during execution.

Arrow function this

Moving on to the clipping function, the arrow function doesn’t have this, so you have to find the value by looking up the scope chain.

const obj = {
    bg:(a)= > {
        console.log(this)    
    }
}
obj.bg() //windows
Copy the code

The bg function in this example when OBj calls the function, this has no binding on the obj object and it goes up the scope chain, and then the upper scope is window so the output is window; That is, the arrow function does not have this; its this depends on the this in the scope chain. Here I have a mistake: I always think that the upper scope of bg arrow function is the block-level scope of obj. In fact, bg is an attribute of OBj. They should be the same level scope. Const obj.bg = ()=> {} and the upper scope is window.

function test1(){
    return function(){
    console.log(this)}}var Test1 = new test1();  Test1() //windows

function test2(){
    return (a)= >{
    console.log(this)}}var Test2 = new test2();  Test2() //Test2
Copy the code

The special nature of the clipping function is that the function has no binding to this, or rather: the this in the clipping function always refers to this when the function was defined, not when it was executed.