JavaScriptの詳細な分析と方向の変更方法

これ

いつものように、まずはコードを見てみましょう。

方法

関数テスト(){
    console.log(これを);
}

オブジェクト内

人={
  名前:"張三",
  食べる:関数(){
      console.log(これ)
  }
}

メソッドでは、this はメソッドが属するオブジェクトを参照します。最初のものは window のメソッドなので、window が出力され、eat メソッドは Person メソッドなので、オブジェクト Person が出力されます。

したがって、コンソールでこれを単独で使用すると、グローバル オブジェクトが表されることがわかります。

これを隠した

オブジェクトでは、事前に 1 つずつ宣言できます。

var Person1 = {
    名前:"張三",
    年齢:18
}
var Person2 = {
    名前:"Li Si",
    年齢:19
}

これを書くのは非常に面倒なので、次のように Java クラスの概念から学ぶことができます。

var Person = 関数 (名前, 年齢) {
    this.name=名前、
    this.age=年齢
       
}
var Person1=new Person("张三",18);
var Person2 = new Person("李斯",19);

実際、new には return this が隠されています。new を使用しないと、新しく作成されたオブジェクトが返されないことがわかります。

では完成させましょう:

var Person = 関数 (名前, 年齢) {
    this.name=名前、
    this.age=年齢
    これを返します。
}
var Person1=new Person("张三",18);
var Person2 = new Person("李斯",19);

この方法では、次の効果を偽装することもできます。

var Person = 関数 (名前, 年齢) {
    var = {};
    that.name=名前、
    that.age=年齢
    それを返す;
}
var Person1=new Person("张三",18);
var Person2 = new Person("李斯",19);

厳密モード

これは、厳密モードと非厳密モードで魔法のような動作をします

関数テスト() {
  これを返します。
}

# js の前に「use strict」を追加すると、厳密モード「use strict」を意味します。
関数テスト() {
  これを返します。
}

これは、非厳密モードの関数では、関数の所有者がデフォルトでこれにバインドされていることを示しています。したがって、グローバル値は印刷できますが、厳密モードでは関数はこれにバインドされないため、これは未定義になります。

これを変更して

まずコードを見てみましょう

var Person = 関数 (名前, 年齢) {
    this.name=名前、
    this.age=年齢、
    this.fun = 関数(){
         console.log("print", this.name);
        }
}
var Person1=new Person("张三",18);
var Person2 = new Person("李斯",19);

これはメソッド test 内の値ではなく、window 内の a の値を指していることがわかりますが、一部のキーワードはポインターを変更できます。

メソッドの前のオブジェクトが何であるか、呼び出し内の this が何であるかはわかりますが、キーワード call、apply、bind を使用して変更することもできます。

上記から、call と apply は非常に似ていることがわかりますが、bind は関数をすぐに実行しないため、() で囲む必要があります。

ただし、パラメータを指定すると、call と apply は依然として異なるものの、どちらもオブジェクトを含む必要があることがわかります。結局のところ、this はオブジェクトを指しています。

これで、JavaScript の this の方向の詳細な分析と、方向を変更する方法に関するこの記事は終了です。JavaScript の this の方向に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。