Detailed explanation of the usage of apply and call in js

Preface

call and apply both exist to change the context , that is, the context, when a function is run. In other words, it is to change the direction of this inside the function body .

The function of call and apply is exactly the same, but the way of accepting parameters is different.

Method definition

apply

Function.apply(obj,args) method can receive two parameters:

obj: This object will replace this object in the Function class

args: This is an array or class array. The apply method passes the elements in this collection as parameters to the called function.

call

The first parameter of the call method is the same as the apply method , except that the second parameter is a parameter list

In non-strict mode, when our first parameter is passed as null or undefined, this in the function body will point to the default host object, and in the browser it is window

 var test = function(){ console.log(this===window);}test.apply(null);//truetest.call(undefined);//true

usage

How to "hijack" others

At this time, the logName method in foo will be referenced by bar, this points to bar

 var foo = { name:"mingming", logName:function(){ console.log(this.name); }}var bar={ name:"xiaowang"};foo.logName.call(bar);//xiaowang

Realize inheritance

 function Animal(name){ this.name = name; this.showName = function(){ console.log(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName(); //Black Cat

In actual development, this is often encountered inadvertently changing scenarios.

There is a local fun method. When fun is called as a normal function, this inside fun points to window , but we often want it to point to the #test node, see the following code:

 window.id="window";document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun();//window}

Using call, apply we can easily solve this problem

 window.id="window";document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun.call(this);//test}

Of course you can do this, but in ECMAScript 5 strict mode, this in this case has been specified that it will not point to the global object, but is undefined:

 window.id="window";document.querySelector('#test').onclick = function(){ var that = this; console.log(this.id);//test var fun = function(){ console.log(that.id); } fun();//test}

 function func(){ "use strict" alert ( this ); // Output: undefined}func();

Other usages

Class array

Here, objects that meet the following conditions are called class arrays

1. Have length attribute

2. Store data according to index

3. Push, pop and other methods that do not have arrays

Common arrays of classes include arguments and NodeList!

 (function(){ Array.prototype.push.call(arguments,4); console.log(arguments);//[1, 2, 3, 4]})(1,2,3)

In this way, push a 4 into the arguments

Array.prototype.push page can implement the combination of two arrays

The push method does not provide push an array, but it provides push(param1,param,…paramN) so you can also install and replace the array by applying, that is:

 var arr1=new Array("1","2","3"); var arr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2); console.log(arr1);//["1", "2", "3", "4", "5", "6"]

It can also be understood in this way, arr1 calls the push method, and the parameters are replaced by applying the array assembly into a set of parameter lists.

For example, I want to find the maximum value in the class array

 (function(){ var maxNum = Math.max.apply(null,arguments); console.log(maxNum);//56})(34,2,56);

Judge type

 console.log(Object.prototype.toString.call(123)) //[object Number]console.log(Object.prototype.toString.call('123')) //[object String]console.log(Object.prototype.toString.call(undefined)) //[object Undefined]console.log(Object.prototype.toString.call(true)) //[object Boolean]console.log(Object.prototype.toString.call({})) //[object Object]console.log(Object.prototype.toString.call([])) //[object Array]console.log(Object.prototype.toString.call(function(){})) //[object Function]

The above is the full content of the summary of the usage of apply and call. Everyone is welcome to leave a message to participate in the discussion. I also hope that this article will be helpful to everyone in learning JavaScript.