The pointing of this in JS and the functions of call and apply (graphic tutorial)

In specific practical applications, the point of this cannot be determined when the function is defined, but is determined when the function is executed. According to the execution environment, it can be roughly divided into the following three types:

1. When the function is called as a normal function, this points to the global object

2. When the function is called as a method of the object, this points to the object

3. When the function is called as a constructor , this points to the newly created object

Example one:

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname

Example two:

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob

Example three:

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

For example three, there is another The special case is that when the constructor returns an object through "return", the final result of this operation is the object returned instead of the newly created object, so this is of no use in this case.

Example 4:

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

Example 5:

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

The role of call and apply

apply accepts two parameters, the first parameter specifies the function The second parameter is an array or array-like pointer to the point of this in the body, which is used to pass the parameter list of the called function.

Example 1:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

call The number of parameters passed in is not fixed. Same as apply, the first parameter is also used to specify the point of this in the function body. From the second Starting with the parameters, each parameter is passed to the called function in turn.

Example 2:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

In addition, most advanced browsers also implement the bind method. The difference between it and call and apply is that bind only changes the pointer of this inside the function, but does not immediately To execute, you need to explicitly call it.

Example 3: Simulate the browser's bind method

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');

Lost this

In some cases, the pointer to this will be lost. At this time, we need to use call , apply and bind to change the pointing problem of this.

Example 1: When the "getName" method is called as a property of the "boy" object, this points to the "boy" object. When another variable refers to the "getName" method, because it is called as an ordinary function, So this points to the global object window

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined

Example 2: Even if the function is defined inside the function, if it is called as a normal object, this also points to the window object

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined

The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of resource sharing steps between NodeJS parent process and child process

Concept and concept of JS anonymous self-executing function Instructions for use

JS analysis of the method of generating a QR code image from a link

The above is the detailed content of The pointing of this in JS and the functions of call and apply (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!