[JS]JavaScript中級教程(feat.コード鞍馬)-call、apply、bind

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