Methods to change this pointer in JS (call, apply, bind)_javascript skills

This is a keyword in JavaScript. The value of this will change as the function is used in different situations. But there is always a principle, that is, this refers to the object that calls the function.

This generally points to the current callee, but it can also be changed in other ways. Three methods will be introduced below:

1. When used as inheritance:

function Parent(age){
this.name=['mike','jack','smith'];
this.age=age;
}
function Child(age){
Parent.call(this,age);//把this指向Parent,同时还可以传递参数
}
var test=new Child(21);
console.log(test.age);//21
console.log(test.name);
test.name.push('bill');
console.log(test.name);//mike,jack,smith,bill

2. Both call and apply can change this to point to , but the second parameter of apply is a hash distribution, and call can be an array

console.log(Math.max.apply(null,[1,2,3,4]));//4

The

apply() method receives two parameters: one is the scope in which to run the function, and the other is the parameter array. Among them, the second parameter can be an instance of Array or an arguments object. The call() method has the same effect as the apply() method, they only differ in the way they receive parameters. For call()
As far as methods are concerned, the first parameter's this value does not change. What changes is that the remaining parameters are passed directly to the function. In other words, when using the call() method, the parameters passed to the function must be enumerated one by one.

3.ES5 also defines a method : bind(), which will create an instance of a function, and its this value will be bound to the bind() function value. Such as

window.color='red';
var o={color:'blue'};

function sayColor(){
console.log(this.color);
}
var objectSaycolor=sayColor.bind(o);
//var objectSaycolor=sayColor.bind();
objectSaycolor();//blue

Here sayColor() calls bind() and passes in the object o, creating the objectSayColor() function. The this value of the objectSayColor() function is equal to o, so even if this function is called in the global scope, you will see blue.

The above is the method that the editor introduces to you to change this pointer in JS (call, apply, bind). I hope it will be helpful to you!

I still have some time to add some basic knowledge to you: the difference between call() and apply()

1. Definition of method

call method:

Syntax: call(thisObj, Object)

Definition: Call a method of an object to replace the current object with another object.

Instructions:

The call method can be used to call a method on behalf of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.

If no thisObj parameter is provided, the Global object is used as thisObj.

apply method:

Syntax: apply(thisObj, [argArray])

Definition: Apply a method of an object to replace the current object with another object.

Description:

If argArray is not a valid array or is not an arguments object, a TypeError will be caused.
If neither argArray nor thisObj are provided, the Global object will be used as thisObj and no parameters can be passed.

Code example:

function Animal(name) {
   this.name = name;
   this.showName = function() {
     console.log(this.name);
   };
 }
 function Cat(name) {
   Animal.call(this, name);
 }
 Cat.prototype = new Animal();
 function Dog(name) {
   Animal.apply(this, name);
 }
 Dog.prototype = new Animal();
 var cat = new Cat("Black Cat"); //call必须是object
 var dog = new Dog(["Black Dog"]); //apply必须是array
 cat.showName();
 dog.showName();
 console.log(cat instanceof Animal);
 console.log(dog instanceof Animal);

Simulate call, replace this with apply

 function Animal(name) {
   this.name = name;
   this.showName = function() {
     alert(this.name);
   };
 };
 function Cat(name) {
   this.superClass = Animal;
   this.superClass(name);
   delete superClass;
 }
 var cat = new Cat("Black Cat");
 cat.showName();