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)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()は、直ちに起動する.
その特性のために、さまざまな面白い使い方があります.また、私たちが掘り出すのを待っています.