JavaScript関数におけるこのポイントの問題の詳細な説明

このキーワード

どのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクトを指していますか?

**厳密モード:** グローバル環境では、これは未定義を指します

**非厳密モード: **グローバル環境では、これはウィンドウを指します

グローバルに定義された関数は直接呼び出されます。これは => ウィンドウ

関数fn(){
	console.log(これを);
	// この時点ではウィンドウを指しています
}
関数fn();
// window.fn() と同等

オブジェクト内の関数呼び出し、this => 呼び出し元

var obj = {
	fn:関数(){
		console.log(これを);
	}
}
obj.fn();
// この時点では、これはobjを指しています

タイマー処理機能、これ => ウィンドウ

setTimeout(関数(){
	console.log(これを);	
},0)
// この時点で、タイマー処理関数内のthisはウィンドウを指しています

イベント処理関数、これ => イベントソース

div.onclick = 関数(){
	console.log(これを);
}
//divをクリックすると、divを指します

自己呼び出し関数、this => ウィンドウ

（関数 （） {
  console.log(これ)
})()
// この時点ではウィンドウを指しています

これを変更して

先ほど説明したのは、基本的な関数呼び出しメソッドの this ポインターです。関数自体の this ポインターを無視して、他の場所を指すようにする方法も 3 つあります。これら3つのメソッドはcall/apply/bindであり、thisのポインタを強制的に変更するメソッドです。

call/apply/bind は関数呼び出し後に使用され、関数自体の this ポインタは無視できます。
call と apply を使用すると、関数は自動的にすぐに呼び出されます。bind を使用すると、関数が作成されますが、手動で呼び出す必要があります。

電話

構文: fn.call(this が fn 関数本体内の参照先、arg1、arg2、...);

関数: バインドされた関数fnを呼び出し、そのthisポインタを指定してパラメータを渡す

パラメータ:

最初のパラメータ: これは
残りのパラメータ：渡す必要がある値は、カンマで区切って複数指定できます。

パラメータを渡さずにcallメソッドを使用する

var 数値 = 666;

関数fn() {
  console.log('num = ', this.num);
}

fn.call(); // 数値 = 666

これを指定するにはcallメソッドを使用します

var name = 'ローズ';
var obj = {name:'ジャック'};
関数fn(){
	コンソールにログ出力します。
}
fn(); // ローズ
fn.call(); // ローズ
fn.call(obj); // ジャック

callメソッドを使用してこれを指定し、パラメータを渡します

var name = 'ラック';
var obj = {name:'ジャック'};
関数fn(a,b){
	コンソールにログ出力します。
}
fn(1,2); // ウィンドウ1 2
fn.call(obj,1,2); // オブジェクト 1 2
fn(1,3); // ウィンドウ1 3

適用する

apply メソッドは、複数のパラメータを含む配列を受け入れます。

構文: fn.apply(where this points to in the fn function body, [arg1, arg2, ...]);

関数: バインドされた関数fnを呼び出し、そのthisポインタを指定してパラメータを渡す

パラメータ:

最初のパラメータ:これが指すオブジェクト
2番目のパラメータ: 複数のパラメータを含む配列

var obj = {name:'ジャック'};
関数fn(a,b){
	コンソールにログ出力します。
}
fn(1,2); // ウィンドウ1 2
fn.apply(obj,[1,2]); // オブジェクト 1 2

適用を使用して配列をマージする

配列に要素を追加するには、push を使用します。引数が配列の場合、配列内の各要素を追加するのではなく、配列を 1 つの要素として追加するため、配列内に配列が作成されます。

var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1); // [1,2,[3,4]]

concat は配列を結合できますが、既存の配列に要素を追加するのではなく、新しい配列を作成して返します。

var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1); // [1,2]
console.log(arr3); // [1,2,3,4]

既存の配列に要素を追加したい場合はどうすればよいでしょうか?サイクル？いいえ！ここでapplyが役に立ちます

var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1); // [1,2,3,4]

組み込み関数でapplyを使用する

/* 配列内の最大/最小の数値を検索します*/
var 数値 = [5, 6, 2, 3, 7];

var max = Math.max(数値)
var min = Math.min(数値)
console.log(min,max); // NaN NaN

var max = Math.max.apply(null, 数値); 
/* 基本的に Math.max(numbers[0], ...) または Math.max(5, 6, ..) と同等です */
var min = Math.min.apply(null, 数値);
console.log(最小値,最大値); // 2 7

バインド

構文: fn.bind(fn 関数本体内の this のポインタ、arg1、arg2、...);

機能: 新しいバインドされた関数を作成し、その this ポインタを指定してパラメータを渡します。実行する前に呼び出す必要があります。

パラメータ:

最初のパラメータ:これが指すオブジェクト
残りのパラメータ：渡す必要がある値は、カンマで区切って複数指定できます。

var obj = {name:'ジャック'};
関数fn(a,b){
	コンソールにログ出力します。
}
fn(1,2); // ウィンドウ1 2
fn.bind(obj,1,2); // 呼び出されず、実行されない fn.bind(obj,1,3)() // obj 1 3
var newFn = fn.bind(obj,3,4);
newFn(); // オブジェクト 1 4
newFn(5,6); // オブジェクト3 4

要約する

JavaScript 関数の this ポイントの問題に関するこの記事はこれで終わりです。JavaScript 関数の this ポイントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: