[JS]JavaScript中級教程(feat.コード鞍馬)-call、apply、bind
17059 ワード
1. call
callメソッドは、すべての関数に使用でき、特定の値として指定できます.
const mike = {
name: 'Mike'
}
const tom = {
name: 'Tom'
}
function showThisName() {
console.log(this.name); // 여기서의 this는 window를 가리킴.
}
showThisName(); // ""
showThisName.call(mike); // Mike -> function에서 this가 mike가 된 것.
showThisName.call(tom); // Tom
この目的で使用するオブジェクトをcallメソッドに渡す場合は、関数を指定したオブジェクトのメソッドとして使用できます.const mike = {
name: 'Mike'
}
const tom = {
name: 'Tom'
}
function showThisName() {
console.log(this.name);
}
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
update.call(mike, 1999, 'singer');
console.log(mike); // { name: 'Mike', birthYear: 1999, occupation: singer }
関数がパラメータの受信形式である場合、callメソッドはオブジェクトとその後に使用されるパラメータ値を提供します.2. apply
applyはcallと全く同じで,関数パラメータを処理する方法を除く.callは通常の関数と同様にパラメータを直接受信するがapplyはパラメータを配列として受信する.
以上のコードはcallからapplyに変更され、以下のようになります.
update.apply(mike, [1999, 'singer']);
update.apply(tom, [2003, 'teacher']);
例を見てみましょう.const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(nums);
const maxNum = Math.max(nums);
console.log(minNum, maxNum); // NaN, NaN
上記の場合、Mathのminとmaxは、良い値を出力するために非配列の形で入れなければならない.したがって、スプレッドシートを使用して文を展開するのは簡単です.const nums = [3, 10, 1, 6, 4];
const minNum = Math.min(...nums);
const maxNum = Math.max(...nums);
console.log(minNum, maxNum); // 1 10
以下に示すように、出力が良好であることがわかります.このように書くこともできますが、applyも使えます.const nums = [3, 10, 1, 6, 4];
// const minNum = Math.min(...nums);
// const maxNum = Math.max(...nums);
const minNum = Math.min.apply(null, nums);
const maxNum = Math.max.apply(null, nums);
console.log(minNum, maxNum); // 1 10
applyメソッドthisとして指定するオブジェクトをnullにするのは、Mathメソッドが使用されているため不要です.また、上記のコードでcallを使用したい場合は、スプレッドシートを使用できます.(Math.min.apply(null, ...nums))
3. bind
bindは関数のこの値を永久に変えることができる.
const mike = {
name: 'Mike'
}
function update(birthYear, occupation) {
this.birthYear = birthYear;
this.occupation = occupation;
}
const updateMike = update.bind(mike); // 이 함수는 mike를 항상 this로 받는다.
updateMike(1980, 'police'); // { name: Mike, birthYear: 1980, occu: police }
bindを使用してmikeにいつもこれを受け取ってもらう.実際の例を見てみましょう.const user = {
name: 'Mike',
showName: function () {
console.log(`hello, ${this.name}`);
}
};
user.showName(); // hello, Mike
let fn = user.showName();
fn(); // hello,
上記のように、fnの割り当て時にthisが失われます.(方法は点の前にあるのはthis)
この場合call,apply,bindを用いて解決できる.
let fn = user.showName();
fn.call(user); // hello, Mike
fn.apply(user); // hello, Mike
let boundFn = fn.bind(user);
boundFn(); // hello, Mike
(このポスターの内容はyoutube coding anmaのビデオを参考にしています)Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4
Reference
この問題について([JS]JavaScript中級教程(feat.コード鞍馬)-call、apply、bind), 我々は、より多くの情報をここで見つけました https://velog.io/@iamkanguk/JS-자바스크립트-중급강좌-feat.-코딩앙마-call-apply-bindテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol