これが何を指しているのかをどのように判断するのでしょうか?
この原則をどのように理解すればよいでしょうか?JavaScript を学習するには、次の 2 つの書き方を理解する必要があります。 var obj = { foo: 関数 () {} }; var foo = obj.foo; // 記述方法 1 obj.foo() //メソッド 2 の記述 foo() これら 2 つの書き方は、1 つの関数呼び出しと 1 つのオブジェクト メソッドです。obj.foo と foo はどちらも関数を指していますが、実行結果は異なる場合があります。次のコードを見てください。 var obj = { foo: 関数() { console.log(this.bar) }, バー: 1 }; var foo = obj.foo; var バー = 2; obj.foo() // 1 関数foo() // 2 実行結果が異なるのはなぜですか?関数本体では this キーワードが使用されるため、多くの教科書や資料では、 this は関数が実行されている環境を指すと説明されています。 obj.foo() の場合、foo は obj 環境で実行されるため、これは obj を指します。foo() の場合、foo はグローバル環境で実行されるため、これはグローバル環境を指します。したがって、両者の営業成績は異なります。 それで、これがどこを指しているかをどうやって判断するのでしょうか?または、これはどの環境で実行されますか? var obj = { foo: 5 }; 上記のコードは、変数 obj にオブジェクトを割り当てます。JavaScript エンジンは、まずメモリ内にオブジェクト {foo: 5} を生成し、次にこのオブジェクトのアドレスを obj に割り当てます。 obj は変数アドレスです。obj.foo を読み取ると、まず obj からメモリ アドレスが取得され、次にこのアドレスから元のオブジェクトが読み取られ、foo 属性が返されます。 foo プロパティはメモリにどのように保存されますか? { フード: { [[値]]: 5 [[書き込み可能]]: true [[列挙可能]]: true [[設定可能]]: true } } foo 属性の値は、属性記述オブジェクトの value 属性に格納されます。 プロパティの値が関数の場合はどうなるでしょうか? var obj = { foo: 関数 () {} }; このとき、JavaScript エンジンは関数をメモリ内に別途保存し、関数のアドレスを foo 属性の value 属性に割り当てます。 { フード: { [[value]]: 関数のアドレス... } } 関数はメモリ内に個別に保存されるため、異なる環境 (コンテキスト) で実行できます。 var f = 関数 () {}; var obj = { f: f }; // f() のみ実行 // obj 環境は obj.f() を実行します JavaScript では、関数本体内で現在の環境内の他の変数を参照できます。 var f = 関数() { コンソールログ(x); }; この関数は他の変数 X を使用します。 下のコードを見てください var f = 関数() { コンソールにログ出力します。 } var x = 1; var obj = { f: f、 x: 2, }; // f() のみ実行 // 1 // obj 環境は obj.f() を実行します // 2 関数実行の結果が異なることがわかります。関数 f はグローバルに実行されますが、this はどうでしょうか? this.x はグローバル環境の x を参照します。 obj 環境で実行される obj.f の場合、その this は明らかに obj 環境内にあるため、this は obj 環境内の obj.x を指します。 つまり、記事の冒頭では、obj.foo() は obj を通じて foo を見つけるので、obj 環境で実行されます。 var foo = obj.foo とすると、変数 foo は関数自体を直接指し、関数 foo() 自体はグローバル環境にあるため、foo() はグローバル環境で実行されます。 関数foo(){ コンソールにログ出力します。 } 関数Foo(fn){ 関数fn(); } var obj = { 名前: 'zl', フー、 } var name = "永遠に"; Foo() メソッドは、次のコードで使用できます。 では、上記のコードを実行した結果はどうなるでしょうか? JavaScript thisの原理と詳細な説明に関するこの記事はこれで終わりです。より関連性の高いJavaScript thisコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法
ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...
MySQL では、char、varchar、text の各タイプのフィールドはすべて文字タイプのデー...
目次特徴保存戦略自己増加の決定自動増分値の変更実行プロセス問題点自動増分ロックロック戦略バッチ挿入の...
序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...
序文: Mybatis の特殊文字処理、Mybatis の xml ファイル内の特殊文字の処理、ここ...
MySQLは次のエラーを表示します「コントロール パネル -> 管理ツール -> サービ...
序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...
目次1. 縦方向のスライス1.1 垂直データベース1.2 垂直テーブル分割2. 水平(横断)セグメン...
目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
この記事の例では、Vue の日付時刻ピッカーコンポーネントの具体的なコードを参考までに紹介します。具...
目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...