JavaScriptの中のcall、appyとbindの方法

JavaScriptのcall()、appy()とbind()はFunction.prototypeの方法で、いずれも関数実行時の文脈を変更するために用いられています.最終的な戻り値はあなたが呼び出した方法の戻り値です.この方法は戻り値がない場合、undefinedに戻ります.これらの方法はjs関数式言語の特性をよく表しています.jsでは関数式言語スタイルのコードを書くたびに、callとapplyが必要です.
1.コール()

は、指定されたcall()値と個別に与えられた1つまたは複数のパラメータを使用して関数を呼び出す方法を説明する.thisは、異なるオブジェクトのための関数／方法の割り当ておよび呼び出しを可能にする.call()は、現在呼び出されている関数／方法に新しいthis値を提供する.callを使って相続を実現することができます.方法を書いて、他の新しいオブジェクトにそれを引き継ぎます.

文法:

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

パラメータ:thisArg call()関数の実行時に指定されたfunction値.指定されたthis値は必ずしもこの関数が実行される時の真のthis値ではなく、この関数が［this］で実行されると、 およびnullに指定されたundefined値は自動的にグローバルオブジェクト(ブラウザではwindowオブジェクト)に向けられ、同時に元の値(数字、文字列、ブール値)になる.のthisは、元の値の自動包装対象を指す.arg 1,arg 2,…で指定されたパラメータリストです.

は、値を返します.この関数の戻り値は、使用者が提供するthis値とパラメータを使用して呼び出されます.この方法は戻り値がない場合、undefinedを返します.

例:

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

2.アプリ()

は、this方法が、与えられたapply()値の関数を呼び出し、1つの配列(または類似の配列オブジェクト)として提供されるパラメータを説明する.存在する関数を呼び出したとき、thisオブジェクトを作成してもいいです.thisは現在のオブジェクト、すなわちこの関数を呼び出しているオブジェクトを指します.thisを使用して、この方法を一度だけ書いて、他のオブジェクトに引き継ぐことができます.新しいオブジェクトにこの方法を繰り返し書き込む必要はありません.applyはapplyと非常に似ていますが、パラメータを提供する方法に違いがあります.call()は、パラメータのセットリストではなく、パラメータ配列を使用する.applyは、applyのような配列字面量、またはfun.apply(this, ['eat', 'bananas'])のような配列オブジェクトを使用することができる.fun.apply(this, new Array('eat', 'bananas'))パラメータとしてargumentsオブジェクトも使用できます.argsArrayは、関数の局所変数である.呼び出し対象の指定されていないすべてのパラメータとして使用できます.このように、アプリ関数を使うときは、呼び出し対象のパラメータをすべて知る必要がありません.アーグメンントを使って、呼び出し対象にすべてのパラメータを渡すことができます.コール対象は次にこれらのパラメータを処理します.ECMAScriptの第5版からは、任意の種類のクラスのオブジェクトが使用できます.つまり、arguments属性とlength範囲の整数属性があれば、ということです.例えば、(0..length-1)または自分で定義したNodeListのような形のオブジェクトを使用することができる.

注意が必要です.Chrome 14およびInternet Explorer 9はまだクラスの配列オブジェクトを受け入れていません.クラスの配列オブジェクトが入ってきたら、例外を投げます.

文法

function.apply(thisArg, [argsArray])

パラメータthisArgは任意です.{'length': 2, '0': 'eat', '1': 'bananas'}関数が動作するときに使用されるfunction値.thisは、本方法で見られる実際の値ではないかもしれません.この関数が非厳密モードである場合、thisまたはnullに指定されると、自動的にグローバルオブジェクトに置き換えられ、元の値が包装されます.argsArayオプションです.配列またはクラスの配列オブジェクトのうち、配列要素は別のパラメータとしてundefined関数に伝達される.パラメータを変更する値がfunctionまたはnullである場合、どのパラメータも着信する必要がないことを示す.ECMAScript 5からクラス配列オブジェクトが使用できます.

は、undefinedの値とパラメータを指定した関数が呼び出された結果を返します.

例

var numbers = [5, 6, 2, 3, 7];

var max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

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

console.log(min);
// expected output: 2

3.bind()

は、this方法が新たな関数を作成することを説明し、起動時には、thisキーワードを提供する値に設定する.そして、新しい関数を呼び出したとき、与えられたパラメータリストを元の関数のパラメータシーケンスの最初の項目とします.bind()関数は新しいbind()を作成します.バインディング関数は、元の関数オブジェクトを包装した （bound function，BF）(怪しい関数オブジェクト、ECMAScript 2015の用語)です.呼び出しexotic function objectは、一般的に実行 をもたらす. は、 −包装の関数オブジェクト[[BoundTargetFunction]]−包装関数の呼び出し時に常に[[BoundThis]]値として渡される値を有する.this−リストは、包装関数に対して任意の呼び出しを行うと、優先的にリスト要素でパラメータリストを満たします.[[BoundArguments]]-このオブジェクトに関連するコードを実行します.関数で式を呼び出します.内部法のパラメータはthis値であり、式を呼び出して関数に渡すパラメータを含むリストである.バインディング関数が起動されると、[[Call]]上の内部方法[[BoundTargetFunction]]を呼び出し、このように[[Call]].Call(boundThis, args)はboundThisであり、[[BoundThis]]はargsに関数によって呼び出されたパラメータリストである.バインディング関数はまた、ターゲット関数が構築されたかのように示される[[BoundArguments]]演算子構造を使用することができる.与えられたnew値は無視されますが、前置パラメータはまだアナログ関数に提供されます.

文法

function.bind(thisArg[, arg1[, arg2[, ...]]])

パラメータthisArgがバインディング関数を呼び出すとthisパラメータとしてターゲット関数に渡す値です.this演算子を使用してバインディング関数を構築すると、値は無視されます.newを使用してbindにおいて一つの関数(コールバックとして提供される)を作成すると、setTimeoutによって伝達される任意の元の値はthisArgに変換される.object関数のパラメータリストが空の場合、スコープを実行するbindは、新しい関数のthisと見なされるであろう.arg 1,arg 2,…ターゲット関数が呼び出されると、あらかじめバインディング関数のパラメータリストに追加されます.

は、元の関数のコピーを返し、指定されたthisArg値と初期パラメータを有する.

例

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42