このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の 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 環境でのインストールチュートリアル
目次序文1. 背景2. シミュレーションテスト3. 結論要約する序文もし私が罠に陥っていなかったら、...
問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...
昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...
キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...
目次場合コンテキスト切り替えのオーバーヘッド?要約するCPU は多くの場合、システム パフォーマンス...
Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
1. HTMLハイパーリンクによって開かれるウィンドウのサイズコードをコピーコードは次のとおりです...
Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...
Apache Tomcat は、Java Servlet および Java Server Pages...
以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、bor...
Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...