Detailed explanation of how to use this in JavaScript

If you want to determine what the rules are in this, the method is actually very simple. By checking its calling position, determine this when the function is called. Let’s follow the editor of Script House to learn through this article

Several rules determine what this is in a function.

It’s actually very simple to determine what this is. The general rule is to determine this when a function is called by checking where it was called. It follows these rules, described next in order of priority.

Rules

1. If you use the new keyword when calling a function, then this in the function is a brand new object.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. If you use apply, call or bind to call a function, then this in the function is the object passed in as a parameter.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. If the function is called as a method, that is, if the function is called using dot notation, then this is the object that has this function as an attribute. In other words, when a point is to the left of a function call, this is the object to the left of the point.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. If the function is called as a pure function, that is, it is called without any of the above conditions, then this is the global object. In a browser, this is the window object.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

Note that this rule is actually the same as the third rule. The difference is that functions not declared as methods will automatically become properties of the global object window. Therefore, this is actually an implicit method call. When we call fn(), it will actually be understood by the browser as window.fn(), so this is window.

console.log(fn === window.fn); // -> true

5. If multiple rules above apply, the one with higher priority will set this value.

6. If it is an arrow function in ES2015, it will ignore all the above rules and receive the scope containing it as the value of this when it is created. To determine what this is, just go up one line from where you created the arrow function and see what this is there. The value of this in an arrow function is the same.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

Looking back at the third rule, when we call obj.createArrowFn(), this in createArrowFn is obj, because this is a method call. Therefore, obj will be bound to this in arrowFn. If we create an arrow function in the global scope, then the this value will be window.

Applying the Rules

Let’s look at a code example and apply these rules. Try it and see if you can figure out what this is in different function calls.

Determine which rule is applied

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() belongs to the third rule, method call. On the other hand, print() falls under the fourth rule, a pure function call. For print(), we did not use new, bind/call/apply or dot notation when calling, so it corresponds to rule 4, this is the global object window.

When multiple rules are applied

When multiple rules are applied, the rule with higher priority in the list is used.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

If Rule 2 and Rule 3 apply at the same time, Rule 2 prevails.

obj1.print.call(obj2); // -> { value: 17 }

If Rule 1 and Rule 3 apply at the same time, Rule 1 prevails.

new obj1.print(); // -> {}

Library

Some libraries sometimes intentionally bind this value to certain functions inside. Usually the most useful value is bound to this in a function. For example, jQuery binds this to a DOM element and triggers an event in a callback. If a library has a this value that does not conform to the above rules, please read the documentation of the library carefully. It is likely to be bound using bind.

The above is the detailed content of Detailed explanation of how to use this in JavaScript. For more information, please follow other related articles on the PHP Chinese website!