JavaScriptの原理と方向性

JavaScriptの原理と方向性

これが何を指しているのかをどのように判断するのでしょうか?

  • ①グローバル環境で呼び出された場合はwindowを指します。
  • ② オブジェクトに対するメソッド呼び出しなので、そのオブジェクトを指します。
  • ③コンストラクタ呼び出しなので、新しく作成されたオブジェクトを指します。
  • ④apply、call、bindを使って方向を変えることができます。
  • ⑤矢印関数内の this は、それが定義されているコンテキストにバインドされており、変更できません。矢印関数の this は、外側のレイヤーで見つかった、それに最も近い最初の非矢印関数の this を指します。

この原則をどのように理解すればよいでしょうか?

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

以下もご興味があるかもしれません:
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JS にこれがあるのはなぜですか?
  • このリファレンスとJavaScriptのカスタムプロパティの詳細な説明
  • JavaScript における this ポイントの問題の詳細な説明
  • 関数の分類の詳細な説明とJavascriptでのこのポイントの例
  • JavaScript関数におけるこのポイントの問題の詳細な説明
  • JavaScriptにおけるこのポインティング問題の詳細な説明
  • JavaScriptの詳細な分析と方向の変更方法

<<:  Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法

>>:  年末ですが、MySQL パスワードは安全ですか?

推薦する

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

Vue の新しいパートナー TypeScript クイックスタート実践記録

目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...

MySQL インストール図の概要

MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

MySQL 重複インデックスと冗長インデックスの例の分析

この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

VueとVueComponentの関係の詳細な説明

次のケースでは、これまでに学んだプロトタイプチェーンの知識ポイントを確認します。 // コンストラク...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

tomcatでcatalina.outログをカットする3つの方法の詳細な説明

1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...

キャンバスはスクラッチカード効果を描画します

この記事では、キャンバスでスクラッチカード効果を描画するための具体的なコードを参考までに共有します。...

Javascriptを使用して滑らかな曲線を生成する方法

目次序文ベジェ曲線の紹介二次ベジェ曲線3次ベジェ曲線ベジェ曲線計算機能フィッティングアルゴリズム付録...

クリーンで美しいウェブデザインのための4つの原則

この記事では、 Webデザインに関連するこれら4 つの原則について説明します。これら4 つの原則を念...

dockerにros2をインストールするための詳細な手順

目次メイントピック1. UbuntuにDockerをインストールする2. DockerにROS2-F...