JavaScript のオブジェクトと関数の「これ」を理解します。

JS オブジェクト スコープ内のこのキーワード

JavaScript では、this キーワードの内容、方法、場所を理解することが、実際に機能するコードを書くことと、コーディング中に苦労することの違いになる可能性があります。

このキーワードは

JavaScript では、これはキーワード (予約語) です。つまり、変数名として使用することはできません。

JavaScript コードでは、これはスコープを表すために使用されます。スコープとは、簡単に言えば、1 行または複数行のコードを含むコードのブロックです。コード全体 (グローバル スコープ) または中括弧 {...}
内のコード行を意味します。

    var a = 1;

    //varaible "a" can be accessed any where within the global scope

    function sayHello(){
        var message = "Hello";
        console.log(message);
    };

    //the variable "message" is not accessible in the global scope
    //varaible "a" can be accessed any where within the global scope

これは動作中です

    var a = 1;

    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.

    function sayHello(){
        var message = "Hello";
        console.log(this.message);
    };

    sayHello(); // undefined

this がsayHello() 関数のスコープを参照しているのに、上記のスニペットのsayHello() 関数がなぜ未定義を返したのか疑問に思われるかもしれません。急いで言う前に、これも JavaScript の癖の 1 つです。それでは、詳しく見ていきましょう。

    var a = 1;

    console.log(this.a); // output is 1; this refers to the global scope here, the variable "a" is in the global scope.

    function sayHello(){
        var message = "Hello";
        console.log(this.message);
    };

    sayHello(); // undefined

sayHello() 関数はグローバル スコープで実行されます。これは、sayHello() の実行により、これがグローバル スコープ (ウィンドウ オブジェクト、つまり window.message と言うのと同じです) に解決されることを意味します。グローバル スコープには message という名前の変数がないため、unknown が返されます (message という名前の変数をグローバル スコープに追加して、何が起こるかを確認できます)。考えられる解決策を以下に示します。

    var person = {
        message: "Hello",
        sayHello: function(){
            console.log(this.message);
        }
    };

    person.sayHello(); // Hello

ここで、sayHello() 関数は person オブジェクトのプロパティであり、関数を実行すると、これが window オブジェクトではなく person オブジェクトのスコープに解決されます。 message は person オブジェクト内の変数 (オブジェクト プロパティ) であるため、それに割り当てられた値を返します。

上記のようなケースは実際のシナリオでは必要ないかもしれませんが、これが内部でどのように機能するかについての基本的な説明にすぎません。

別の例を見てみましょう:

    const obj = {
        a: 1,
        b: function() {
            return this.a;
        },
        c: () => {
            return this.a;
        }
    };

    // Output 1: 1
    console.log(obj.b());  

    // Output 2: undefined
    console.log(obj.c());  

    const test = obj.b;

    // Output 3: undefined
    console.log(test());    

    const testArrow = obj.c;

    // Output 4: undefined
    console.log(testArrow());

出力1

obj.b() は関数を実行し、これは obj オブジェクトのスコープに解決され、a

の値を返します。

出力2

アロー関数は、オブジェクト内で宣言されている場合でも、これをグローバル スコープに解決します。ここでは、これはグローバル スコープ (ウィンドウ) に解決され、変数 a はグローバル スコープに存在しないため、unknown を返します。

成果3

obj.b は、obj オブジェクトから関数を返します (関数は実行されません。関数呼び出しのかっこは実行を示します)。返された関数はテスト変数に割り当てられ、関数はグローバル スコープ (ウィンドウ) で実行されます。の場合、変数 a はグローバル スコープに存在しないため、unknown が返されます。

成果4

obj.c は、obj オブジェクトから関数を返します (関数は実行されません。関数呼び出しのかっこは実行を示します)。返された関数は testArrow 変数に割り当てられ、関数はグローバル スコープ (ウィンドウ) で実行されます。 、アロー関数は通常、これをグローバル スコープに解決します。変数 a はグローバル スコープに存在しないため、unknown が返されます。

---

それでは皆さん。これが JavaScript でどのように機能するかの基本を理解できたと思います。もうこれをアロー関数で使用する必要はありませんね?スコープでのこれの使用に関する限り、眠れない夜を過ごす必要もありません。

以上がJavaScript のオブジェクトと関数の「これ」を理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。