The method of changing this point in JS (call and apply, bind) _javascript tips

This is a keyword for JavaScript, and the value of this is changed as the function is used differently. 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 you can also change its point of reference in other ways, as described in the following three ways:

1.call when used as inheritance:

function Parent (age) {
this.name=[' Mike ', ' Jack ', ' Smith '];
this.age=age;
}
function Child (age) {
parent.call (this,age);//point this to Parent, while also passing parameters
}
var test=new child.
Console.log (test.age);//21
Console.log (test.name)
; Test.name.push (' bill ');
Console.log (test.name);//mike,jack,smith,bill

2.call and apply can all change this point , but the second parameter to apply is the 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 the function is run, and the other is an array of arguments. Where the second argument can be an instance of an Array, or it can be a arguments object. The call () method works the same as the Apply () method, which differs only in the way that the parameters are received. For Call ()
method, the first argument is that the this value does not change, and that the rest of the parameters are passed directly to the function. In other words, when using the call () method, the arguments passed to the function must be enumerated individually.

3.es5 also defines a method : Bind (), which creates an instance of a function whose this value is bound to the value passed to the bind () function. 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 object o, creating the Objectsaycolor () function. The This value of the Objectsaycolor () function is equal to O, so you will see blue even if you call this function in the global scope.

The above is a small set of JS to introduce you to change this point of the method (call and apply, bind), I hope that the above help!

Here's a little time to add some basic knowledge about: Call () and apply () difference

Definition of a method

Call Method:

Syntax: Call (Thisobj,object)

Definition: Invokes one method of an object, replacing the current object with another object.

Description

The call method can be used to invoke a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by Thisobj.

If the thisobj parameter is not supplied, the Global object is used as a thisobj.

Apply method:

Syntax: Apply (Thisobj,[argarray])

Definition: Applies one method of an object and replaces the current object with another object.

Description

If Argarray is not a valid array or is not a arguments object, it will result in a typeerror.
If you do not supply any of the Argarray and thisobj parameters, the Global object will be used as a thisobj and cannot be passed any parameters.

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 must be an object
 var dog = new Dog (["Black Dog"]);//apply must be array
 cat.showname ();
 Dog.showname ();
 Console.log (cat instanceof Animal);
 Console.log (dog instanceof Animal);

Simulate call, apply the This replacement

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