関数の使用callとapply呼び出しの違いは何ですか？

var func = function() {
  alert('hello!');
};

func.apply(); 対 func.call();

前述の2つの方法の間にパフォーマンスの違いはありますか？いつからcall、applyまたはその逆に使用するのが最適ですか？

違いは、配列としてapply関数を呼び出すことができることですarguments。callパラメータを明示的にリストする必要があります。有用なニーモニックは、" A用rrayおよびCのためのC有するoMMA。"

適用と呼び出しについては、MDNのドキュメントを参照してください。

疑似構文：

theFunction.apply(valueForThis, arrayOfArgs)

theFunction.call(valueForThis, arg1, arg2, ...)

ES6ではspread、call関数で使用する配列の可能性もあります。互換性についてはこちらをご覧ください。

サンプルコード：

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession +".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");
theFunction.call(undefined, ...["Matthew", "physicist"]); // used with the spread operator

K.スコットアレンは、この問題について素晴らしい記事を書いています。

基本的に、関数の引数の処理方法が異なります。

apply（）メソッドはcall（）と同じですが、apply（）では2番目のパラメータとして配列が必要です。配列はターゲットメソッドの引数を表します。」

そう：

// assuming you have f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);

各関数をいつ使用するかという部分に答えるには、apply渡す引数の数がわからない場合、またはそれらがすでに配列または配列のようなオブジェクト（arguments独自の引数を転送するオブジェクトのように）にある場合に使用します。call引数を配列でラップする必要がないため、それ以外の場合に使用します。

f.call(thisObject, a, b, c); // Fixed number of arguments

f.apply(thisObject, arguments); // Forward this function's arguments

var args = [];
while (...) {
    args.push(some_value());
}
f.apply(thisObject, args); // Unknown number of arguments

（例のように）引数を渡さないときは、関数を呼び出すcallので、私は好みます。（存在しない）引数に関数を適用していることを意味します。apply

apply引数を（たとえばのf.apply(thisObject, [a, b, c])代わりにf.call(thisObject, a, b, c)）使用してラップする場合を除いて、パフォーマンスに違いはありません。私はそれをテストしていないので、違いがあるかもしれませんが、それは非常にブラウザ固有です。それはその可能性がありますcallあなたは既に配列内の引数を持っていない場合は高速ですapply、あなたがしなければ高速です。

ここに良いニーモニックがあります。 pplyは使用していますrraysとAの lways 1つのまたは2つの引数を取ります。Cを使用する場合は、引数の数をCに数える必要があります。

これは古いトピックですが、.callは.applyよりもわずかに高速であることを指摘したいと思います。理由は正確には言えません。

jsPerf、http： //jsperf.com/test-call-vs-apply/3を参照してください

[ UPDATE!]

Douglas Crockfordが2つの違いを簡単に述べていますが、これはパフォーマンスの違いを説明するのに役立ちます... http://youtu.be/ya4UHuXNygM?t=15m52s

Applyは引数の配列を取りますが、Callは0個以上の個別のパラメータを取ります！ああ！

.apply(this, [...])

.call(this, param1, param2, param3, param4...)

Closure：Michael BolinによるThe Definitive Guideの抜粋に従います。少し長く見えるかもしれませんが、多くの洞察で飽和しています。「付録B.よく誤解されているJavaScriptの概念」から：

this関数が呼び出されたときの意味

フォームの関数を呼び出すときfoo.bar.baz()、オブジェクトfoo.barはレシーバーと呼ばれます。関数が呼び出されると、次の値として使用されるのはレシーバですthis。

var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.
obj.addValues(20);

関数が呼び出されたときに明示的なレシーバーがない場合、グローバルオブジェクトがレシーバーになります。47ページの「goog.global」で説明されているように、JavaScriptがWebブラウザーで実行されるときのwindowはグローバルオブジェクトです。これはいくつかの驚くべき動作につながります：

var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
f(20);
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN

同じ関数obj.addValuesをf参照していても、レシーバーの値は呼び出しごとに異なるため、呼び出されたときの動作は異なります。このため、を参照する関数を呼び出すときは、が呼び出されたときにが正しい値になるthisようにすることが重要thisです。明確にするためthisに、関数本体で参照されていない場合、f(20)およびの動作はobj.addValues(20)同じになります。

関数はJavaScriptのファーストクラスオブジェクトであるため、独自のメソッドを持つことができます。すべての関数にはメソッドがcall()あり、関数を呼び出すときにapply()レシーバー（つまり、参照するオブジェクトthis）を再定義することができます。メソッドのシグネチャは次のとおりです。

/**
* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
*/
Function.prototype.call;
/**
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function
*/
Function.prototype.apply;

なお、唯一の違いcall()とapply()つまりcall()、一方、個々の引数として関数パラメータを受信するapply()単一のアレイとしてそれらを受信します。

// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);

次の呼び出しは同等でfありobj.addValues、同じ関数を参照しています。

obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);

しかしながら、どちらcall()もapply()それが指定されていない受信機の引数の代わりに独自の受信機の値を使用して、次の意志ではない作品。

// Both statements evaluate to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);

値はthis缶がなることはありませんnullか、undefined関数が呼び出されたとき。場合null又はundefined受信機として供給されるcall()、またはapply()、グローバルオブジェクトではなく、受信機のための値として使用されます。したがって、前のコードにはvalue、グローバルオブジェクトに名前が付けられたプロパティを追加するのと同じ望ましくない副作用があります。

関数は、それが割り当てられている変数を認識していないものと考えると役に立ちます。これは、関数の定義時ではなく、関数が呼び出されたときに、この値がバインドされるという考えを強化するのに役立ちます。

抽出の終わり。

あるオブジェクトが別のオブジェクトの機能を借用すると便利な場合があります。つまり、借用オブジェクトは、貸し出された機能を、あたかも独自のものであるかのように実行するだけです。

小さなコード例：

var friend = {
    car: false,
    lendCar: function ( canLend ){
      this.car = canLend;
 }

}; 

var me = {
    car: false,
    gotCar: function(){
      return this.car === true;
  }
};

console.log(me.gotCar()); // false

friend.lendCar.call(me, true); 

console.log(me.gotCar()); // true

friend.lendCar.apply(me, [false]);

console.log(me.gotCar()); // false

これらのメソッドは、オブジェクトに一時的な機能を与えるのに非常に役立ちます。

呼び出し、適用、バインドの別の例。CallとApplyの違いは明らかですが、Bindは次のように機能します。

1. バインドは実行可能な関数のインスタンスを返します
2. 最初のパラメータは「これ」です
3. 2番目のパラメータは、カンマで区切られた引数のリストです（Callなど）。

}

function Person(name) {
    this.name = name; 
}
Person.prototype.getName = function(a,b) { 
     return this.name + " " + a + " " + b; 
}

var reader = new Person('John Smith');

reader.getName = function() {
   // Apply and Call executes the function and returns value

   // Also notice the different ways of extracting 'getName' prototype
   var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
   console.log("Apply: " + baseName);

   var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy"); 
   console.log("Call: " + baseName);

   // Bind returns function which can be invoked
   var baseName = Person.prototype.getName.bind(this, "is a", "boy"); 
   console.log("Bind: " + baseName());
}

reader.getName();
/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy
*/

'valueForThis'引数が使用されている例を示します。

Array.prototype.push = function(element) {
   /*
   Native code*, that uses 'this'       
   this.put(element);
   */
}
var array = [];
array.push(1);
array.push.apply(array,[2,3]);
Array.prototype.push.apply(array,[4,5]);
array.push.call(array,6,7);
Array.prototype.push.call(array,8,9);
//[1, 2, 3, 4, 5, 6, 7, 8, 9] 

**詳細：http : //es5.github.io/#x15.4.4.7 *

Call（）はコンマで区切られた引数を取ります。例：

.call(scope, arg1, arg2, arg3)

そして、apply（）は引数の配列をとります、例：

.apply(scope, [arg1, arg2, arg3])

ここにいくつかの使用例があります：http : //blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/

Function.prototype.apply（）のMDNドキュメントから：

apply（）メソッドはthis、配列（または配列のようなオブジェクト）として指定された値と引数を使用して関数を呼び出します。

構文

fun.apply(thisArg, [argsArray])

Function.prototype.call（）のMDNドキュメントから：

call（）メソッドは、特定のthis値と引数を個別に指定して関数を呼び出します。

構文

fun.call(thisArg[, arg1[, arg2[, ...]]])

JavaScriptのFunction.applyとFunction.callから：

apply（）メソッドはcall（）と同じですが、apply（）では2番目のパラメータとして配列が必要です。配列は、ターゲットメソッドの引数を表します。

コード例：

var doSomething = function() {
    var arr = [];
    for(i in arguments) {
        if(typeof this[arguments[i]] !== 'undefined') {
            arr.push(this[arguments[i]]);
        }
    }
    return arr;
}

var output = function(position, obj) {
    document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>';
}

output(1, doSomething(
    'one',
    'two',
    'two',
    'one'
));

output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [
    'one',
    'two',
    'two',
    'one'
]));

output(3, doSomething.call({one : 'Steven', two : 'Jane'},
    'one',
    'two',
    'two',
    'one'
));

このフィドルも参照してください。

基本的な違いはcall()、引数リストをapply()受け入れるのに対し、引数の単一の配列を受け入れることです。

これは小さめの投稿です、私はこれについて書きました：

http://sizeableidea.com/call-versus-apply-javascript/

var obj1 = { which : "obj1" },
obj2 = { which : "obj2" };

function execute(arg1, arg2){
    console.log(this.which, arg1, arg2);
}

//using call
execute.call(obj1, "dan", "stanhope");
//output: obj1 dan stanhope

//using apply
execute.apply(obj2, ["dan", "stanhope"]);
//output: obj2 dan stanhope

//using old school
execute("dan", "stanhope");
//output: undefined "dan" "stanhope"

違いはcall()、関数の引数を個別にapply()受け取り、関数の引数を配列で受け取ることです。

呼び出し方法と適用方法を以下のように区別できます

CALL：引数付きの関数が個別に提供します。渡す引数がわかっている場合、または渡す引数がない場合は、callを使用できます。

APPLY：配列として提供された引数を使用して関数を呼び出します。関数に渡す引数の数がわからない場合は、applyを使用できます。

apply over呼び出しを使用する利点があります。引数の数を変更する必要はなく、渡される配列を変更するだけです。

性能に大きな違いはありません。しかし、配列はapplyメソッドで評価する必要があるため、callはapplyに比べて少し速いと言えます。

これらのtoメソッドの違いは、パラメーターを渡す方法です。

「配列の場合はA、コンマの場合はC」は便利なニーモニックです。

this関数の実行時に値を強制するために、呼び出しと適用の両方が使用されます。唯一の違いは、あるcallかかるn+11は、引数thisとします'n' arguments。apply2つの引数のみを受け取り、1つthisは引数配列です。

私が見利点applyを超えるがcall、我々は簡単に多くの努力なしに、他の関数への関数呼び出しを委任することができるということです。

function sayHello() {
  console.log(this, arguments);
}

function hello() {
  sayHello.apply(this, arguments);
}

var obj = {name: 'my name'}
hello.call(obj, 'some', 'arguments');

helloをsayHello使用する方法を簡単に委任できますapplyが、callこれを実現するのは非常に困難です。

同じことcallをapply成し遂げても、少なくとも1か所は使えずcall、しか使えないところがあると思いますapply。これは、継承をサポートし、コンストラクターを呼び出したい場合です。

これは、他のクラスを拡張してクラスの作成もサポートするクラスを作成できる関数です。

function makeClass( properties ) {
    var ctor = properties['constructor'] || function(){}
    var Super = properties['extends'];
    var Class = function () {
                 // Here 'call' cannot work, only 'apply' can!!!
                 if(Super)
                    Super.apply(this,arguments);  
                 ctor.apply(this,arguments);
                }
     if(Super){
        Class.prototype = Object.create( Super.prototype );
        Class.prototype.constructor = Class;
     }
     Object.keys(properties).forEach( function(prop) {
           if(prop!=='constructor' && prop!=='extends')
            Class.prototype[prop] = properties[prop];
     });
   return Class; 
}

//Usage
var Car = makeClass({
             constructor: function(name){
                         this.name=name;
                        },
             yourName: function() {
                     return this.name;
                   }
          });
//We have a Car class now
 var carInstance=new Car('Fiat');
carInstance.youName();// ReturnsFiat

var SuperCar = makeClass({
               constructor: function(ignore,power){
                     this.power=power;
                  },
               extends:Car,
               yourPower: function() {
                    return this.power;
                  }
              });
//We have a SuperCar class now, which is subclass of Car
var superCar=new SuperCar('BMW xy',2.6);
superCar.yourName();//Returns BMW xy
superCar.yourPower();// Returns 2.6

概要：

どちらも call()とapply()はにあるメソッドFunction.prototypeです。したがって、プロトタイプチェーンを介してすべての関数オブジェクトで使用できます。両方call()とapply()の指定された値を持つ関数を実行することができますthis。

主な違いは call()とapply()あなたがそれに引数を渡す必要があります方法です。両方のではcall()とapply()、あなたは、最初の引数としてあなたに値にしたいオブジェクトを渡しますthis。他の引数は次のように異なります。

• ではcall()、あなたが通常の引数に配置する必要があります（第二引数から始まります）
• ではapply()、あなたは、引数の配列を渡す必要があります。

例：

let obj = {
  val1: 5,
  val2: 10
}

const summation = function (val3, val4) {
  return  this.val1 + this.val2 + val3 + val4;
}

console.log(summation.apply(obj, [2 ,3]));
// first we assign we value of this in the first arg
// with apply we have to pass in an array


console.log(summation.call(obj, 2, 3));
// with call we can pass in each arg individually

これらの関数を使用する必要があるのはなぜですか？

this値は、JavaScriptでトリッキー時々することができます。関数が定義されているときではなく、関数が実行されたときにthis決定される値。私たちの機能が正しいthisバインディングに依存している場合、この動作を使用call()しapply()て強制することができます。例えば：

var name = 'unwantedGlobalName';

const obj =  {
  name: 'Willem',
  sayName () { console.log(this.name);}
}


let copiedMethod = obj.sayName;
// we store the function in the copiedmethod variable



copiedMethod();
// this is now window, unwantedGlobalName gets logged

copiedMethod.call(obj);
// we enforce this to be obj, Willem gets logged

主な違いは、callを使用すると、スコープを変更して引数を通常どおり渡すことができますが、applyを使用すると、引数を配列として使用して呼び出すことができます（配列として渡す）。しかし、コードで何をするかという点では、それらはかなり似ています。

この関数の構文は、apply（）の構文とほとんど同じですが、根本的な違いは、call（）が引数リストを受け入れるのに対し、apply（）は引数の単一の配列を受け入れることです。

ご覧のとおり、大きな違いはありませんが、それでも、call（）またはapply（）を使用したい場合があります。たとえば、applyメソッドを使用して、MDNから配列の最小値と最大値を見つける以下のコードを見てください。

// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers)

したがって、主な違いは、引数を渡す方法だけです。

呼び出し：

function.call(thisArg, arg1, arg2, ...);

適用：

function.apply(thisArg, [argsArray]);

これについて少し詳しく説明します。

これら2つの呼び出しはほぼ同等です。

func.call(context, ...args); // pass an array as list with spread operator

func.apply(context, args);   // is same as using apply

わずかな違いがあります：

• spreadオペレータは...渡すことができますが、反復可能 args呼び出しにリストとして。
• applyのみ受け付け配列のような引数を。

したがって、これらの呼び出しはお互いを補完します。我々は期待してどこに反復可能な、call我々が期待する作品は、配列のような、apply作品を。

そして、実際の配列のように反復可能で配列のようなオブジェクトの場合、技術的にはそれらのいずれかを使用できますが、ほとんどのJavaScriptエンジンが内部で最適化するため、適用はおそらくより高速になります。