Welcome to pay attention to my public account “Life Code”

Interviewer: Tell me about your understanding of what this refers to

Let’s forget about the new arrow functions in ES6 and talk about the this orientation of our general functions. First of all, we must make it clear that this cannot be determined when ordinary functions are defined, and only when ordinary functions are executed can we determine that this refers to the problem.

To read this article, you need to take two questions with you:

  • Ordinary function definition
  • Ordinary function execution

Example 1

function a(){

    var user = "Life code";

    console.log(this.user); //undefined

    console.log(this); //Window

}

a();

Copy the code

In fact, the a function is a method defined on the window object, so the final execution is actually window.a(), so this refers to the window.

Example 2

var o = {

    user:"Life code".

    fn:function(){

        console.log(this.user);  // Life code

    }

}

o.fn();

Copy the code

Fn is called by an O object, so this refers to an O object.

Example 3

var o = {

    user:"Life code".

    fn:function(){

        console.log(this.user); // Life code

    }

}

window.o.fn();

Copy the code

This code is almost the same as the above code, but why does this not refer to the window? If we follow the above theory, eventually this refers to the object that called it. So we can use the window dot o object here.

Instead of explaining why this doesn’t point to the window, let’s look at one more piece of code.

var o = {

    a:10.

    b: {

        a:12.

        fn:function(){

            console.log(this.a); / / 12

        }

    }

}

o.b.fn();

Copy the code

This is also the object o, but again this does not execute it, so you would say that everything I said in the first place is wrong. In fact, it is not. What I said at the beginning was not accurate. Next, I will add a sentence, and I believe that you can thoroughly understand the problem of this.

  • Case 1: If a function has this, but it is not called by a higher level object, then this refers to window. It is important to note that this does not refer to Window in the strict version of JS, but we are not going to discuss the strict version here. You can look it up on the Internet.

  • Case 2: If a function has this and the function is called by a higher-level object, then this refers to the higher-level object.

  • Case 3: If a function has this, and it contains multiple objects, even though the function is called by the outermost object, this refers only to the object at the next level above it, as example 3 demonstrates. If you don’t believe me, let’s continue with a few more examples.

var o = {

    a:10.

    b: {

        // a:12,

        fn:function(){

            console.log(this.a); //undefined

        }

    }

}

o.b.fn();

Copy the code

Even though object B has no property A, this points to object B, because this only points to the object above it, regardless of whether this has anything in it.

There’s another special case, example 4

var o = {

    a:10.

    b: {

        a:12.

        fn:function(){

            console.log(this.a); //undefined

            console.log(this); //window

        }

    }

}

var j = o.b.fn;

j();

Copy the code

This refers to window, isn’t that confusing? It’s because you didn’t understand one sentence, which is equally important.

This always refers to the object is the last call it, is to see who is calling, when it executes example 4 although function fn were object referenced by b, but in the fn when assigned to the variable j did not perform so eventually points to the window, and this example is not the same as 3, example 3 is directly execute the fn.

In fact, this is the same thing, but in different situations, the direction will be different. In the above summary, there are some small mistakes in each place, not to say mistakes, but in different circumstances, the situation will be different, so I can not explain it clearly, you can only slowly experience.

Constructor version of this

function Fn(){

    this.user = "Life code";

}

var a = new Fn();

console.log(a.user); // Life code

Copy the code

The reason why object A can point to the user in function Fn is because the new keyword can change this to point to object A. Why I say a is an object, because using the new keyword is to create an instance of an object. To understand this, think of example 3, Here we use variable a creates an instance of Fn (equivalent to copy a copy of Fn to object inside a), at this time just created, and are not performed, and calls the function object a Fn, so this point to the nature is the object of a, so why there will be a of the object the user, because you have to copy a Fn function to the object a, Using the new keyword is equivalent to making a copy.

Updated a minor issue when this encounters a return

function fn()  

{  

    this.user = Chaser;  

    return {};  

}

var a = new fn;  

console.log(a.user); //undefined

Copy the code

Then look at one

function fn()  

{  

    this.user = 'Life Code';  

    return function(){};

}

var a = new fn;  

console.log(a.user); //undefined

Copy the code

Come again

function fn()  

{  

    this.user = 'Life Code';  

    return 1;

}

var a = new fn;  

console.log(a.user); // Life code

Copy the code

The last

function fn()  

{  

    this.user = 'Life Code';  

    return undefined;

}

var a = new fn;  

console.log(a.user); // Life code

Copy the code

What does that mean?

If the return value is an object, this refers to the returned object. If the return value is not an object, this refers to an instance of the function.

Another point is that even though null is an object, this still refers to an instance of that function in this case, because NULL is special.

function fn()  

{  

    this.user = 'Life Code';  

    return null;

}

var a = new fn;  

console.log(a.user); // Life code

Copy the code

Knowledge supplement

  • 1. In the strict version, the default “this” is no longer window, but undefined.

  • 2. The new operator changes the direction of the function this. Although we have explained this above, it is not discussed in depth and rarely discussed on the web, so it is worth mentioning here.

Why does this point to a?

The new keyword first creates an empty object, and then automatically calls a function apply that points this to the empty object, so that this inside the function is replaced by the empty object.

The arrow function this points to the problem

This in the arrow function refers to the context this where the function is defined (defining scope)

var obj = {

    age : 20.

    say : (a)= > {

        alert( this.age )

    }

}

obj.say();  // undefined since the obj object is not scoped, so the arrow function is defined in the global scope, this points to the global

Copy the code