JavaScriptのappy、call、bindについて話します.
3206 ワード
apply、call、bineの3兄弟は初心者をよく困らせます.先日面接の準備をした時、わざわざ比較しましたが、理解するのはそんなに難しくないです.
appy
MDN上の定義:The appy()method cars a function with a given this value and argments provided as an array(or an array-like oject)
apply()メソッドは、関数のthis値を指定し、行列(またはクラスの配列オブジェクト)をその関数のパラメータとして呼び出す関数を呼び出します.
文法(Syntax)
コール
文法(Syntax)
文法(Syntax)
コードを見る
理由は、argmentsは本物の配列オブジェクトではなく、array-like objectだけなので、sliceという方法はないからです.
以下の例は上の二つの規則に関連して、この例はMDNによるものです.
私たちの印象では、
締め括りをつける
その特性のために、さまざまな面白い使い方があります.また、私たちが掘り出すのを待っています.
appy
MDN上の定義:The appy()method cars a function with a given this value and argments provided as an array(or an array-like oject)
apply()メソッドは、関数のthis値を指定し、行列(またはクラスの配列オブジェクト)をその関数のパラメータとして呼び出す関数を呼び出します.
文法(Syntax)
fun.apply(thisArg,[argsArray])
直接コードfunction sayColor(arg) {
var color = "red";
console.log(arg + this.color);
}
var obj = {color: "blue"};
sayColor.apply(obj, ["The color is"]); // "The color is blue"
このときthisはobjを指し、this.co lorはobjのカラー属性であると、Theカラーブルーが出力される.コール
call()
はapply()
と同様で、apply()
の第二のパラメータは配列であり、call()
はパラメータを第一のパラメータの後に付け、複数のパラメータと一緒にすることができる.文法(Syntax)
fun.call(thisArg, arg1, arg2, arg3 ...)
コードを見るfunction sayClothe(arg1,arg2) {
console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
sayClothe.call(obj, "This is a ", " clothe" ); // "This is a blue clothe"
ビッドbind()
はcall()
と同様で、bind()
が新しい関数(new function)を返すので、いつでもこの関数を呼び出すことができます.文法(Syntax)
fun.bind(thisArg, arg1, arg2, arg3 ...)
戻り値this
と初期パラメータを指定した関数のコピーを返します.コードを見る
function sayClothe(arg1, arg2) {
console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
var sayClothe2 = sayClothe.bind(obj, "This is a ", " clothe");
sayClothe2(); // "This is a blue clothe"
使用Array.prototype.slice.call(arguments)
という使い方に出くわすことがあります.多くの人が疑問に思って、直接arguments.slice()
を使えばいいじゃないですか?なぜ余計なことをするのですか?理由は、argmentsは本物の配列オブジェクトではなく、array-like objectだけなので、sliceという方法はないからです.
Array.prototype.slice.call(arguments)
は、sliceのオブジェクトをargmentsに向けて指すと理解でき、したがって、argmentsがslice方法を使用することができる.arguments.slice()
をそのまま使うとエラーが発生します.bind()
のもう一つの使用法則は、関数に予め設定されたパラメータを持たせることであり、予め設定されたパラメータとは異なる.以下の例は上の二つの規則に関連して、この例はMDNによるものです.
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); //[1, 2, 3]
//Create a function with a preset leading arguments
var leadingThirtysevenList = list.bind(null, 37);
var list2 = leadingThirtysevenList();
//[37]
var list3 = leadingThirtysevenList(1, 2, 3);
//[37, 1, 2, 3]
私たちはプリセットパラメータを考えると、当然のことながら、「この関数にパラメータがないなら、プリセットパラメータを使って、パラメータがあれば提供されたパラメータを使う」と考えています.しかし、bind()
によって提供されるプリセットパラメータ機能はこれとは異なる.私たちの印象では、
list3
は[1, 2, 3]
を出力すべきですが、実際の出力は[37, 1, 2, 3]
です.bind()
の特徴のため、leadingThirtysevenList(1, 2, 3)
はlist.bind(null, 37, 1, 2, 3)
と書くことができる.締め括りをつける
apply() call() bind()
の3つの違いは大きくなく、関数を変えるためのthis指向です.apply()
は、1つの配列にthisに必要なパラメータを入れ、apply()
の2番目のパラメータとして入ってきた.パラメータが不定時には,argmentsに入ることができます.call()
およびbind()
は、パラメータを順番に入力する.bind()
は、対応関数に戻り、後で起動するのに便利であり、apply()
、call()
は、直ちに起動する.その特性のために、さまざまな面白い使い方があります.また、私たちが掘り出すのを待っています.