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 環境でのインストールチュートリアル

推薦する

JavaScript はフロントエンド Web ページでカウントダウンを実装します

ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...

Ubuntuで余分なカーネルを削除する方法

ステップ1: 現在のカーネルを表示する 読み取る $ uname -a Linux rew 4.15...

Dockerを使用してgitlabコミュニティの中国語版を構築する詳細なプロセスを教えます

1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...

Ubuntu 20.04 をインストールした後に行うべきこと (初心者向けガイド)

Ubuntu 20.04 がリリースされ、多くの新機能が導入されましたが、慣れていない機能も多くあ...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...

ES6 Promiseの使い方の詳細な説明

目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...

MySQL 8.0.21.0 コミュニティ エディションのインストール チュートリアル (詳細な図解)

1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...

CSS 使用のヒントのまとめ

最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...

MySQL で遅い SQL 文を見つける方法

MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...

JS 配列の重複を排除する 9 つの高度な方法 (実証済みで効果的)

序文一般的な方法はここには記載されていませんが、等しいかどうかを判断するための二重ループや、比較のた...

Docker 学習: コンテナ コンテナの具体的な使用方法

コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...

Docker+daocloudはフロントエンドプロジェクトの自動構築とデプロイを実現します

自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...