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 はオブジェクトを指しています。

キーワード	直接メソッド呼び出し	パラメータ
電話	使用されたメソッドを自動的に実行します	どちらも次の形式のパラメータを持つことができます: obj1.obj1Fun.call( obj2, パラメータ 1, パラメータ 1 ………………);
適用する	使用されたメソッドを自動的に実行します	どちらもパラメータを取ることができます。形式は以下のとおりです: obj1.obj1Fun.apply([obj2, パラメータ 1, パラメータ 1 ………………]); call のパラメータと比較すると、そのパラメータは [] で囲まれています。
バインド	メソッドは自動的に実行されないため、呼び出すには +() を追加する必要があります。	どちらも次の形式でパラメータを取ることができます: どちらも次の形式でパラメータを取ることができます: obj1.obj1Fun.bind( [obj2, パラメータ1, パラメータ1 ………………])(); applyのパラメータは同じですが、+()が後に続く必要があります。

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

以下もご興味があるかもしれません: