【インタビュー質問】JavaScriptでのcall()、apply()、bind()の使い方

JavaScript を学習する過程で、これら 3 つの関数の使用法をよく目にしますが、それらの具体的な使用法や違いはわかりません。今回はメモを取って共有し、同時に記憶を深めましょう。

大昌面接の質問は面接の質問バンクを共有します

フロントエンドとバックエンドのインタビューの質問バンク (インタビューに必要) 推奨: ★★★★★

住所:フロントエンド面接問題バンク  Web フロントエンド面接問題バンク VS Java バックエンド面接問題バンク Daquan

電話

call()this メソッドは、指定された値と個別に与えられた 1 つ以上の引数を  使用して関数を呼び出します 。

文法：

// thisArg: 可选,在 function 函数运行时使用的 this 值
// arg1, arg2, ... :可选: 指定的参数列表
function.call(thisArg, arg1, arg2, ...)
复制代码

例：

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    // 在方法中，不改变this指向的情况下，this 表示该方法所属的对象，也就是person1
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result = person1.fullName.call(person2, 'a', 'b')
console.log(result) // Tom Liming a b
复制代码

申し込み

apply()this このメソッドは、指定された値と配列として提供される引数を使用し て関数を呼び出します 。 この関数の構文は の構文 call() とほとんど同じですが、基本的な違いは、call()引数のリストを受け入れる代わりに、 apply() 引数の単一の配列を受け入れることです。

文法：

// thisArg: 在 func 函数运行时使用的 this 值。
// argsArray: 可选，一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。
apply(thisArg, argsArray)
复制代码

例：

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
}
let result = person1.fullName.call(person2, ['a','b'])
console.log(result) // Tom Liming a b
复制代码

練る

bind()  このメソッドは新しい関数を作成します。 bind() 呼び出されると、新しい関数が  最初のパラメーターthis として指定され 、残りのパラメーターは呼び出し時に使用する新しい関数のパラメーターとして使用されます。bind()

文法：

bind(thisArg, arg1, arg2, /* …, */ argN)
复制代码

例：

let person1 = { 
  firstName: "John", 
  lastName : "Doe", 
  fullName: function (args1, args2) {
    return this.firstName + " " + this.lastName 
    + " " + args1 + " " + args2;
  },
  getfullName: function (args) {
    return this.firstName + " " + this.lastName 
    + " " + args[0] + " " + args[1];
  } 
}
var person2 = { 
  firstName:"Tom", 
  lastName: "Liming", 
} 
let result1 = person1.fullName.bind(person2, 'a', 'b')()
let result2 = person1.getfullName.bind(person2, ['a','b'])()
// 参数分两次传入例子
let func = person1.fullName.bind(person2, 'hello')
// 执行返回函数
let result3 = func(['world'])
console.log(result1) // Tom Liming a b
console.log(result2) // Tom Liming a b
console.log(result3) // Tom Liming hello world
复制代码

要約する

1. 3 つすべてが、関数本体内で this のポインターを変更できます。
2. 最初のパラメーターは this のポインティング オブジェクトです。そのようなパラメーターがない場合、またはパラメーターが未定義または null の場合、これはグローバル ウィンドウを指します。
3. パラメーターの受け渡しの形式が異なります. apply のパラメーターは配列で渡す必要があり, call のパラメーターはリスト形式 (カンマ区切り) であり, bind のパラメーターはリスト形式または配列の形式で、apply と call を一度に渡し、bind を 2 回渡すことができます
4. bind は、指定された値と初期パラメーターを持つ this元の関数のコピーを返します。これは後で呼び出すのに便利ですが、apply と call はすぐに呼び出されます。

大昌面接の質問は面接の質問バンクを共有します

フロントエンドとバックエンドのインタビューの質問バンク (インタビューに必要) 推奨: ★★★★★

住所:フロントエンド面接問題バンク  Web フロントエンド面接問題バンク VS Java バックエンド面接問題バンク Daquan