What is this in JavaScript point by point series

Understand this

Perhaps you have seen this in other object-oriented programming languages, and you know that it refers to an object created by a constructor. But in fact, in JavaScript, this represents more than just the created object.

Let's first look at the definition of this in the ECMAScript standard specification:

「The this keyword evaluates to the value of the ThisBinding of the current execution context.」
"This keyword represents the value of the ThisBinding of the current execution context."

Then take a look at MDN's definition of this:

"In most cases, the value of this is determined by how a function is called."
"In most cases, the value of this depends on how the function is called."

Well, if you can understand the above two lines, then you don’t need to read on. Congratulations!

… I don’t think so. At least I still don’t understand it just by looking at these two lines.

Let's look at an example:

var getGender = function() {
    return people1.gender;
};

var people1 = {
    gender: 'female',
    getGender: getGender
};

var people2 = {
    gender: 'male',
    getGender: getGender
};

console.log(people1.getGender()); // female
console.log(people2.getGender()); // female

What? How come people2 changed his gender? This is not the result I want. Why?

Because getGender() returns people1.gender , the result is naturally 'female'.

So, if we change getGender slightly:

var getGender = function() {
    return this.gender;
};

At this point, you should get two results: female and male .

So back to the point mentioned earlier, from this example we can see that even though the getGender methods of people1 and people2 refer to the same getGender function, the execution results will be different because the objects called are different .

Now we know the first important point, **this is actually bound when the function is called, and what it points to depends entirely on how the function is called. **How ​​to distinguish this?

Who is this

After reading the above examples, you still feel confused, right? Next, let's take a look at the impact of different calling methods on this value.

Case 1: Global objects & calling normal functions

In the global environment, this refers to the global object, which in the browser is the window object. In the following example, this refers to the global object regardless of whether it is in strict mode or not.

var x = 1

console.log(this.x) // 1
console.log(this.x === x) // true
console.log(this === window) // true

If a normal function is called in the global environment, in non-strict mode, this in the normal function also refers to the global object; if it is in strict mode, this will be undefined. ES5 adds strict mode to make JavaScript run in a more restrictive environment. In order to eliminate security risks, strict mode prohibits the this keyword from pointing to the global object.

var x = 1

function fn() {
    console.log(this); // Window global object console.log(this.x); // 1
}

fn();

After using strict mode:

"use strict" // Use strict mode var x = 1

function fn() {
    console.log(this); // undefined
    console.log(this.x); // Reports "Cannot read property 'x' of undefined" because this is undefined
}

fn();

Case 2: Calling as an object method

We know that if the value in an object is a primitive type (for example, a string, a number, a Boolean value), we will call this newly created thing a " property "; if the value in the object is a function, we will call this newly created thing a " method" .

If a function is a method of an object and is called as a method of an object, this in the function points to the parent object .

var x = 1
var obj = {
    x: 2,
    fn: function() {
        console.log(this);    
        console.log(this.x);
    }
}

obj.fn()     

// obj.fn() prints out the result;
// Object {x: 2, fn: function}
// 2

var a = obj.fn
a()   

// a() prints out the result:   
// Window global object // 1

In the above example, we run obj.fn() directly. The parent object of the function is obj, so this points to obj, and the value of this.x is 2. Then we assign the fn method to the variable a first. a runs in the global environment, so this points to the global object Window, and the value of this.x is 1.

Let's look at another example. If a function is called by multiple objects nested, what will this point to?

var x = 1
var obj = {
  x: 2,
  y: {
    x: 3,
    fn: function() {
      console.log(this); // Object {x: 3, fn: function}
      console.log(this.x); // 3
    }
  }
}

obj.y.fn();

Why is the result not 2? Because in this case, remember one sentence: this will always point to the parent object that directly calls the function , that is, y. The above example actually executes the following code.

var y = {
  x: 3,
  fn: function() {
    console.log(this); // Object {x: 3, fn: function}
    console.log(this.x); // 3
  }
}

var x = 1
var obj = {
  x: 2,
  y: y
}

obj.y.fn();

Objects can be nested, and so can functions. If functions are nested, will this change? Let's explore this with the following code.

var obj = {
    y: function() {
        console.log(this === obj); // true
        console.log(this); // Object {y: function}
        fn();

        function fn() {
            console.log(this === obj); // false
            console.log(this); // Window global object}
    }
}

obj.y();

In function y, this points to the parent object obj that calls it, which is fine. But in the nested function fn, this does not point to obj. A nested function does not inherit this from the function that calls it. When a nested function is called as a function, its this value points to the global object in non-strict mode and is undefined in strict mode. Therefore, the above example actually executes the following code.

function fn() {
    console.log(this === obj); // false
    console.log(this); // Window global object}

var obj = {
    y: function() {
        console.log(this === obj); // true
        console.log(this); // Object {y: function}
        fn();
    }
}

obj.y();

Case 3: Called as a constructor

We can use the new keyword to generate an instance object through the constructor. At this point, this refers to the new object .

var x = 1;

function Fn() {
 this.x = 2;
    console.log(this); // Fn {x: 2}
}

var obj = new Fn(); // bind obj to this in the Fn(..) call console.log(obj.x) // 2

When calling Fn(..) with new , a new object is constructed and bound to it (obj) to this in Fn(..) call. It is also worth mentioning that if the constructor returns a non-reference type (string, number, boolean, null, undefined), this still points to the instantiated new object.

var x = 1

function Fn() {
  this.x = 2

  return {
    x: 3
  }
}

var a = new Fn()

console.log(ax) // 3

Because Fn() returns an object (reference type), this will point to the returned object. What if the return value is a non-reference type?

var x = 1

function Fn() {
  this.x = 2

  return 3
}

var a = new Fn()

console.log(ax) // 2

Case 4: call and apply method calls

If you want to change what this refers to, you can use the call or apply method. Their first parameter is to specify where this points when the function is running . If the first parameter is not passed (the parameter is empty) or is passed null or undefined, the default this points to the global object (non-strict mode) or undefined (strict mode).

var x = 1;

var obj = {
  x: 2
}

function fn() {
    console.log(this);
    console.log(this.x);
}

fn.call(obj)
// Object {x: 2}
// 2

fn.apply(obj)     
// Object {x: 2}
// 2

fn.call()         
// Window global object // 1

fn.apply(null)    
// Window global object // 1

fn.call(undefined)    
// Window global object // 1

When using call and apply, if the value passed to this is not an object, JavaScript will use the relevant constructor to convert it into an object. For example, if a number type is passed, new Number() operation will be performed; if a string type is passed, new String() operation will be performed; if a boolean type is passed, the new Boolean() operation will be performed.

function fn() {
  console.log(Object.prototype.toString.call(this))
}

fn.call('love') // [object String]
fn.apply(1) // [object Number]
fn.call(true) // [object Boolean]

The difference between call and apply is that the second and subsequent parameters of call are a parameter list, while the second parameter of apply is an array. Both parameter lists and parameter arrays are executed as arguments to the function.

var x = 1

var obj = {
  x: 2
}

function Sum(y, z) {
  console.log(this.x + y + z)
}

Sum.call(obj, 3, 4) // 9
Sum.apply(obj, [3, 4]) // 9

Case 5: bind method call

Calling f.bind(someObject) creates a function with the same body and scope as f, but in this new function, the this of the new function will permanently point to the first argument passed in by bind , no matter how the function is called.

var x = 1

var obj1 = {
    x: 2
};
var obj2 = {
    x: 3
};

function fn() {
    console.log(this);
    console.log(this.x);
};

var a = fn.bind(obj1);
var b = a.bind(obj2);

fn();
// Window global object // 1

a();
// Object {x: 2}
// 2

b();
// Object {x: 2}
// 2

a.call(obj2);
// Object {x: 2}
// 2

In the above example, although we try to reassign the this pointer to function a, it still points to the object passed in by the first bind. Even using the call or apply method cannot change this fact, that is, it permanently points to the first parameter passed in by bind.

Case 6: this points to in the arrow function

It is worth mentioning that arrow functions have been added since ES6. Let’s take a look at the description of arrow functions on MDN.

An arrow function expression has a shorter syntax than a function expression and does notbind its own this , arguments , super , or new.target . Arrow functions are always anonymous. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

It has been clearly stated here that arrow functions do not have their own this binding. this used in the arrow function is actually this in the function or function expression that directly contains it . In the previous example of nested functions in case 2, the nested function does not inherit the this of the upper function. What changes will happen if arrow functions are used?

var obj = {
  y: function() {
        console.log(this === obj); // true
        console.log(this); // Object {y: function}

      var fn = () => {
          console.log(this === obj); // true
          console.log(this); // Object {y: function}
      }
      fn();
  }
}

obj.y()

Unlike ordinary functions, this in the arrow function points to obj. This is because it inherits this from the function in the previous layer. You can understand that the arrow function corrects the direction of this. Therefore, the this of the arrow function is not determined when it is called, but the object it is in when it is defined is its this .

In other words, the this of the arrow function depends on whether there is a function in the outer layer. If so, the this of the outer function is the this of the inner arrow function. If not, this is window .

var obj = {
  y: () => {
        console.log(this === obj); // false
        console.log(this); // Window global object var fn = () => {
          console.log(this === obj); // false
          console.log(this); // Window global object}
      fn();
  }
}

obj.y()

In the above example, although there are two arrow functions, this actually depends on the outermost arrow function. Since obj is an object rather than a function, this points to the Window global object.

Like bind, arrow functions are also very "stubborn". We cannot change the direction of this through call and apply, that is, the first parameter passed in is ignored .

var x = 1
var obj = {
    x: 2
}

var a = () => {
    console.log(this.x)
    console.log(this)
}

a.call(obj)       
// 1
// Window global object a.apply(obj)      
// 1
// Window global object

The above description may be a bit dry due to too much text, so let’s take a look at the following flowchart. I think this diagram summarizes it very well. The process in the diagram only applies to a single rule.

summary

This article introduces several situations where this points to. Different operating environments and calling methods will affect this. In general, the reference of a function's this depends on the object that is currently calling the function, that is, the object at the time of execution. In this section, you need to master:

• This refers to the global object;
• The difference between this in strict mode and non-strict mode;
• Several situations where this points to when a function is called as an object method;
• The difference between what this points to when used as a constructor, and whether it returns;
• Use call and apply to change the object that calls the function;
• The reference of this in the function created by bind;
• The this pointer in the arrow function.

This concludes the article on what is this in the JavaScript breakthrough series. For more relevant JavaScript this content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!