The pointer of this in JS and the functions of call and apply

This article shares with you the basic JS content this pointer and the related knowledge points of call and apply. Friends who are interested can learn and refer to it.

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

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

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

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

Example 1:

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

Example 2:

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

Example 3:

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

For Example 3, there is another special case, that is, when the constructor returns an object through "return" At that time, the final result of this operation returns this object, not the newly created object, so this is of no use in this case.

Example four:

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

Example five:

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

call and apply The role of

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

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. The same as apply, the first parameter is also used to specify The point of this in the function body, starting from the second parameter, 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 function Internal this points to, but it will not be executed immediately, you need to call it explicitly.

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');

Missing this

In some cases, the pointing of this will be lost. At this time, we need to use call, apply and bind to change the pointing 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 used as a normal function call, 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 the content of this chapter All content, for more related tutorials please visit JavaScript Video Tutorial!

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