JavaScript で最も困難で頻繁に使用される概念の 1 つは、「 これ 」キーワード。 JavaScript は「 これ 」キーワードは他の言語とは異なります。ただし、より高度な JavaScript コードを作成するには不可欠です。初心者の方には、前述のキーワードの使用法を理解するのが多少難しいかもしれませんが、心配はいりません。
この投稿では、「 これ 」キーワードと JavaScript でのその使用法。
JavaScript の「これ」とは何ですか?
「 これ 」は、既存のコード ブロックを実行するオブジェクトを参照する JavaScript のキーワードです。現在の関数を呼び出しているオブジェクトを表します。次のようなさまざまな方法で複数のシナリオで使用されます。
-
- インメソッド
- イベント扱いで
- 関数内
上記の使用方法を 1 つずつ確認していきましょう。
JavaScript メソッドで「this」を使用する方法は?
「 これ 」は、暗黙的なバインディングとして JavaScript メソッドで使用されます。関数がオブジェクトとドットの助けを借りて呼び出される場合、それは暗黙のバインディングと見なされ、「 これ 」は、関数呼び出し中にオブジェクトを指します。
例
まず、いくつかのプロパティとメソッドを持つオブジェクトを作成し、「 これ 」 キーワードを使用して、オブジェクトのプロパティの値を取得します。
var personInfo = {
名前： 「ジョン」 、
年 ： 20 、
情報： 関数 ( ) {
console.log ( 「やあ！ 私は」 + this.name + ' そして、私は ' + this.age + 「歳」 ) ;
}
}
次に、「 情報（） 」メソッドとオブジェクト名:
現在のオブジェクトの指定されたプロパティ値が正常に表示されていることがわかります。
「 これ 」 イベント処理では、以下のセクションに従ってください。
JavaScript イベント処理で「this」を使用する方法は?
この例では、「 これ 」イベント処理のキーワード。このために、ワンクリックでボタンを非表示にする例を考えてみましょう。そのためには、ボタンを作成し、「 onclick() 」イベントを使用して、style.display プロパティに「 これ クリック時にボタンを非表示にするキーワード:
< h3 > クリックしてボタンを非表示にします h3 >< ボタン オンクリック = 'this.style.display='なし'' > ここをクリック ! ボタン >
出力
「」の使用について混乱している場合 これ JavaScript のユーザー定義関数の ” キーワードについては、所定のセクションに従ってください。
JavaScript 関数で「this」を使用する方法は?
使用中 これ 関数では、JavaScript には次の 3 種類のバインディングがあります。
-
- デフォルトのバインディング
- 暗黙のバインディング
- 明示的なバインディング
個別に理解しましょう！
例 1: デフォルト バインディングでのこのキーワードの使用
デフォルトのバインディングでは、「 これ ” キーワードはグローバル オブジェクトとして機能します。主にスタンドアロン関数で使用されます。
例を挙げて、述べられている概念を理解しましょう。
まず、変数を作成します “ バツ 」に値を割り当てます「 15 」：
変数 x = 15 ;
次に、「」という名前の関数を定義します 関数 DB() ” とその関数定義、同じ名前の変数を作成します “ バツ ” そしてそれに値を割り当てます “ 5 」を使用してその値を出力します。 console.log() ”メソッド” これ 」 キーワード:
変数 x = 5 ;
console.log ( this.x ) ;
}
最後に、「 関数 DB() ' 関数：
「 これ 」キーワードの場合、出力には「の値が表示されます。 バツ ' なので ' 15 これは、グローバル オブジェクトとして機能し、プロセスが呼び出されるためです。 動的バインディング 」：
例 2: 暗黙のバインディングでのこのキーワードの使用
関数がオブジェクトまたはドット記号によって呼び出されると、「 これ ” キーワードは、暗黙のバインディングとして機能します。関数呼び出し中にオブジェクトを指します。
この例では、関数を定義します。 情報（） 」と「 これ ” 関数定義のキーワード:
関数 情報 ( ) {console.log ( 「やあ！ 私は」 + this.name + ' そして、私は ' + this.age + 「歳」 )
}
次に、「」という名前のオブジェクトを作成します 人物情報 定義されたプロパティを持つ:
名前： 「ジョン」 、
年 ： 20 、
情報: 情報
}
次に、オブジェクトに沿って関数を呼び出します。
出力
例 3: 明示的バインディングでのこのキーワードの使用
明示的バインディングは「」とも呼ばれます。 ハードバインディング これは、特定のオブジェクトを使用するために関数が強制的に呼び出されるためです。 これ オブジェクトにプロパティ関数参照を配置せずにバインディングします。この目的のために、call()、apply()、および bind() メソッドを使用できます。
「」という名前の同じ関数を利用します。 情報（） 」は、前の例で定義されています。次に、「」という名前のオブジェクトを作成します 人物情報 」に次の値を指定します。
var personInfo = {名前： 「ジョン」 、
年 ： 20
}
「」という名前の関数を呼び出すため 情報（） 」、「 電話（） 」メソッドを呼び出して、作成したオブジェクトを引数として渡します。
info() はオブジェクトの一部ではないため、明示的にアクセスしています。
関数を明示的に呼び出すには、apply() および bind() メソッドも使用できます。 apply() メソッドは call() メソッドと同じですが、bind() メソッドは、元の関数と同じように動作する同じ本体とスコープを持つ新しい関数を作成します。 bind() メソッドを利用して、後で使用できる関数を返すことができます。
apply() メソッドで info() を呼び出すには、次のステートメントを使用します。
info.apply ( 人物情報 ) ;
call() メソッドと同じ出力が得られます。
「 情報（） ' とともに ' 練る（） 」メソッドでは、指定されたステートメントを利用します。
出力
に関連するすべての重要な情報をまとめました。 これ 」キーワード。
結論
「 これ 」は、既存のコード ブロックを実行するオブジェクトを参照する JavaScript のキーワードです。現在の関数を呼び出しているオブジェクトを表します。メソッド、イベント処理、関数など、さまざまな方法で複数のシナリオで使用されます。この投稿では、「 これ 」 JavaScript のキーワード。