このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の 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のポインタを強制的に変更するメソッドです。
電話 構文: 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ポインタを指定してパラメータを渡す パラメータ:
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: UbuntuにProtobuf 3をインストールするための詳細なチュートリアル
>>: protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル
ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...
ステップ1: 現在のカーネルを表示する 読み取る $ uname -a Linux rew 4.15...
1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...
Ubuntu 20.04 がリリースされ、多くの新機能が導入されましたが、慣れていない機能も多くあ...
効果: CSS スタイル: <スタイル タイプ="text/css">...
目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
この記事では、参考までにMySQL 5.7.24圧縮パッケージのインストールチュートリアルを紹介しま...
1. MySQLをダウンロードするMySQL 公式 Web サイトにログインし、MSI インストー...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...
最近、ブログのアップグレードを始めました。テンプレートを変更する過程で、CSS スタイルシートを書き...
MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...
序文一般的な方法はここには記載されていませんが、等しいかどうかを判断するための二重ループや、比較のた...
コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...
自動プロジェクト展開は大企業やユニコーン企業でよく使用され、手動でプロジェクトを展開するよりも効率的...