Detailed explanation of method examples of changing this keyword in javascript

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 through other methods. The following three methods will be introduced:

1. When call is 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 one of apply The parameter is a hash distribution, and call can be an array. The

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

apply() method receives two parameters: one is the scope in which the function is run, 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 the call()
method, the first parameter is the this value which 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 the function and its this value will be bound to The value passed to the bind() function. For example,

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.

call method:

Syntax: call(thisObj, Object)

Definition: Call a method of an object, Replaces the current object with another object.

Description:

The call method can be used to call a method instead 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 the thisObj parameter is not provided, the Global object is used as thisObj.

apply method:

Syntax: apply(thisObj, [argArray])

Definition: Apply one method of a certain object, use another Object replaces the current object.

Note:

If argArray is not a valid array or is not an arguments object, a TypeError will be caused.
If neither argArray nor thisObj is 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);

The above is the detailed content of Detailed explanation of method examples of changing this keyword in javascript. For more information, please follow other related articles on the PHP Chinese website!