The difference between call and apply their usage

The difference between call and apply their usage

ECMAScript specification for all functions are defined call with two methods apply, they are widely used, their role is exactly the same, but there are differences in the form of parameter passing it.

apply

apply () method passing two two parameters: a target as a function of context, is an array as a function of other parameters thereof.

  var obj = {
      name : 'linxin'
  }

  function func(firstName, lastName){ console.log(firstName + ' ' + this.name + ' ' + lastName); } func.apply(obj, ['A', 'B']); // A linxin B 复制代码

Can be seen that, as a function of obj is the object context, this refers to the function func the object obj. Parameters A and B are passed in an array of function func, func corresponding list element parameters.

call

The method call is the first parameter as a function of the object context, it is passed back a list of parameters, instead of a single array.

  var obj = {
    name: 'linxin'
  }

  function func(firstName, lastName) { console.log(firstName + ' ' + this.name + ' ' + lastName); } func.call(obj, 'C', 'D'); // C linxin D 复制代码

When using call or apply, and if we pass the first argument is null, the function of the body of this points to the default host object, it is in the browser window.

  var func = function( a, b, c ){ 
    console.log(this === window); // 输出:true }; func.apply( null, [ 1, 2, 3 ] ); 复制代码

But if it is in strict mode ( use strict), the function of this body or is null.

use

Change this point

 var obj = {
    name: 'linxin'
 }

 function func() { console.log(this.name); } func.call(obj); // linxin 复制代码

We know that the first argument of the method call as a function of the object context, where the obj passed as a parameter func, this time inside this function will point to the object obj. Here is the equivalent in function func

function func() {
     console.log(obj.name); } 复制代码

Borrow another object's methods

 var Person1  = function () {
     this.name = 'linxin'; } var Person2 = function () { this.getname = function () { console.log(this.name); } Person1.call(this); } var person = new Person2(); person.getname(); // linxin 复制代码

From the above we can see, Person2 instantiated objects person got out of the name by Person1 getname method. Because in Person2, the role of Person1.call (this) is to use Person1 objects instead of this object, Person2 have all the attributes and methods of Person1, which is equivalent Person2 inherits the properties and methods of Person1.

call function

function func() {
     console.log('linxin'); } func.call(); // linxin 复制代码

apply, call methods all functions executed immediately, so they may be used to invoke the function.

Difference call, apply and bind the

call and apply this function to change the context after execution of the function, and returns bind is a function of the changing context.

The return value is a function bind

  var obj = {
      name: 'linxin'
  }

  function func() { console.log(this.name); } var func1 = func.bind(obj); func1(); 复制代码

bind method is not performed immediately, but the function returns after a context change this. The original function func of this has not been changed, still points to the global object window.

Use parameters

  function func(a, b, c) {
      console.log(a, b, c); } var func1 = func.bind(null,'linxin'); func('A', 'B', 'C'); // A B C func1('A', 'B', 'C'); // linxin A B func1('B', 'C'); // linxin B C func.call(null, 'linxin'); // linxin undefined undefined 复制代码

is to call the second and subsequent arguments as arguments func pass in the method, the argument is actually func1 method then further back on the basis of the parameters in the bind.

to sum up

Many times we can not remember, because it is not often used in practice, we can use the following formulas to achieve the memory of the way:

    猫吃鱼，狗吃肉，奥特曼打小怪兽。

    有天狗想吃鱼了

    猫.吃鱼.call(狗，鱼)

    狗就吃到鱼了

    猫成精了，想打怪兽

    奥特曼.打小怪兽.call(猫，小怪兽)

Author: Write Sayoko
link: https: //juejin.im/post/5d64c7dfe51d456210163bc9
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.