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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSの矢印関数におけるこのポイントの詳細な説明
  • 関数の分類の詳細な説明とJavascriptでのこのポイントの例
  • JS 匿名関数内の this ポイント問題の詳細な分析
  • js関数のスコープとこれのポイントについての深い理解
  • JavaScriptはsetIntevalの関数パラメータでこれを特定のオブジェクトを指すようにします
  • JavaScript関数の詳細な説明これを指す問題

<<:  UbuntuにProtobuf 3をインストールするための詳細なチュートリアル

>>:  protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

推薦する

MySQL の datetime フィールドの丸め操作

目次序文1. 背景2. シミュレーションテスト3. 結論要約する序文もし私が罠に陥っていなかったら、...

MySQL クエリのパケットが大きすぎる問題と解決策

問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

Tomcat プロセスの CPU 使用率が高い場合の解決策

目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...

Google Chromeの自動入力問題に対する完璧な解決策

Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...

Windows 8 での MySQL 5.6.15 のインストールと設定方法のグラフィック チュートリアル

MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

htmlはハイパーリンク付きの新しいウィンドウを開き、ウィンドウのプロパティを制御できます。

1. HTMLハイパーリンクによって開かれるウィンドウのサイズコードをコピーコードは次のとおりです...

...

プライベートレジストリ内の画像を照会または取得する方法

Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...

TomcatとJDKのバージョンの対応と各Tomcatバージョンの機能

Apache Tomcat は、Java Servlet および Java Server Pages...

CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...

docker run後にコンテナがExited (0)と表示される問題を解決する

Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...