JavaScript の「これ」について話しましょう-jsチュートリアル-php.cn

JavaScript の「これ」について話しましょう

伊谢尔伦

リリース： 2016-12-05 10:01:53

オリジナル

945 人が閲覧しました

クロージャに加えて、JS には理解が難しいもう 1 つの概念があります。これはよく人々に混同されます。そのため、今日はその本当の姿を詳しく見ていきます。

オブジェクトを定義します:

var Charles = {
    living: true,
    age:23,
    gender:male,
    getGender:function(){ return Charles.gender;
    }
}; console.log(Charles.getGender()); //输出:male

ログイン後にコピー

次のコードも同じ効果があります:

var Charles = {
    living: true,
    age:23,
    gender:male,
    getGender:function(){ return this.gender; //注意“this” }
}; console.log(Charles.getGender()); //输出:male

ログイン後にコピー

それでは、これはコード内で何を指すのでしょうか?特定の環境ではその正体を区別することが難しい場合があるため、どのように分析すればよいでしょうか。ここで、次の 1 つの文を覚えておく必要があります。
この値のホスト関数が別の関数にカプセル化されるか、別の関数のコンテキストで呼び出される場合、この値は常にグローバル (ヘッド/ウィンドウ) オブジェクト Quote 用です。
言い換えると、この値はネストされた関数内にあり、常に ES5 のウィンドウを指します。

var myObject = {
    myProperty: &#39;I can see the light&#39;,
    myMethod: function(){ var that = this; console.log(this); 
    //输出：&#39;Object(这里是myObject)&#39; var helperFunction = function(){ console.log(that.myProperty); 
    // 输出&#39;I can see the light&#39; console.log(this); //如果不使用`that`，则输出&#39;window&#39;，因为是在嵌套函数里面 }(); //立即执行 }
}
myObject.myMethod(); //调用 myMethod

ログイン後にコピー

上記の文と組み合わせると、ES5 では次のような状況になります:

var myObject = {
    func1: function(){ console.log(this); //输出 &#39;Object&#39;(第一层函数) var func2= function(){ console.log(this); 
    //从此处开始，this都是window（第二层函数） var func3= function(){ console.log(this); //当然是window }();
        }();
    }
}
myObject.func1();

ログイン後にコピー

JavaScript の「これ」について話しましょう