This pointing and binding rules in JavaScript

In JavaScript, this is a special keyword used to represent the context object of function execution, that is, the object where the current function is called. Due to the various ways of calling JavaScript functions, the pointing of this also changes accordingly. This article will introduce the pointing and binding rules of this in JavaScript, including default binding, implicit binding, new binding, explicit binding and this rules in arrow functions.

1. Default binding

The default binding means that in the case of an independent function call, this will point to the global object (window object in browser environment, undefined in strict mode). For example:

function foo() {
  console.log(this);
}

foo(); // 在浏览器环境下输出window对象，在严格模式下输出undefined

Regardless of the multi-layer call, as long as the default call method is used, the point of this will be the global object.

2. Implicit binding

Implicit binding means that when calling through an object, this will point to the object that called the function. For example:

function foo() {
  console.log(this);
}

var obj = {
  name: "sss",
  foo: foo
};

obj.foo(); // this指向obj对象

 

 

No matter how many layers are called, as long as the called method is initiated through an object, this points to the object that called the function.

3. new binding

In JavaScript, a function can be used as a constructor. When a function is called with the new keyword, the following operations will be performed:

1. Create a brand new object;
2. This new object will be executed prototype connection;
3. This new object will be bound to the this of the function call (the binding of this is done in this step);
4. If the function returns no other object, the expression returns this new object.

For example:

function Person(name) {
  console.log(this);
  this.name = name;
}

var p = new Person("aaa");
console.log(p); // p为新创建的Person对象

 

 

4. Explicit Binding

If you don't want to include a function reference inside the object, but you want to make a mandatory call on an object at the same time, you can use the call, apply, and bindmethods.

4.1 applyMethod

applyThe method is used to bind thisthe object of the function, which will be thisbound to the object passed in. The parameters passed in by this method are an object and an array of parameters.

function foo(name, age, height) {
  console.log(this);
  console.log("打印参数：", name, age, height);
}

var obj = {
  name: "zzz"
};

foo.apply(obj, ["aaa", 30, 1.98]); // this指向obj对象

4.2 callMethod

callMethods are also used to bind function thisobjects, but the parameters need to be passed in one by one.

function foo(name, age, height) {
  console.log(this);
  console.log("打印参数：", name, age, height);
}

var obj = {
  name: "zzz"
};

foo.call(obj, "aaa", 30, 1.98); // this指向obj对象

4.3 The first parameter of the applysumcall

applycallThe first parameter of and is used to bind thisthe object, which can be any object, even window, Number, Stringobject.

function foo(name, age, height) {
  console.log(this);
}

var obj = {
  name: "zzz"
};

foo.apply(obj, "aaa", 30, 1.98); // this指向obj对象
foo.call(window); // this指向window对象
foo.call(123); // this指向Number对象
foo.call("string"); // this指向String对象

 

 

4.4 bindMethod

bindMethods are also used on objects to which functions are bound this, but instead of executing the function immediately, a new function is returned.