ホームページ > ウェブフロントエンド > jsチュートリアル > ' this' JavaScriptで?

' this' JavaScriptで?

Christopher Nolan
リリース: 2025-03-04 01:15:17
オリジナル
990 人が閲覧しました

What is 'this' in JavaScript?

コアポイント

    JavaScriptの
  • thisは通常、メソッドを「所有」するオブジェクトを指しますが、関数の呼び出に依存します。
  • 現在のオブジェクトがない場合、thisはグローバルオブジェクトを参照します。 Webブラウザでは、windowで表されます。
  • 関数を呼び出すとき、thisはグローバルオブジェクトを保持しますが、オブジェクトコンストラクターまたはそのいずれかを呼び出すとき、thisはオブジェクトのインスタンスを参照します。
  • call()apply()bind()などのメソッドを使用してthisのコンテキストを変更できます。これらのメソッドは、指定されたthis値とパラメーターを使用して関数を呼び出します。

javascriptは優れたプログラミング言語です。この文は数年前に議論の余地があったかもしれませんが、開発者はその美しさと優雅さを再発見しました。 JavaScriptが気に入らない場合は、次の理由かもしれません。

    ブラウザAPIの違いや問題に遭遇しました。これはJavaScript自体のせいではありません。
  • それをC、C#、Javaなどのクラスベースの言語と比較します。JavaScriptは、予想どおりに動作しません。

キーワードは、最も混乱する概念の1つです。ほとんどの言語では、thisは、インスタンス化する現在のオブジェクトへの参照です。 JavaScriptでは、thisは通常、メソッドを「所有」するオブジェクトを指しますが、関数の呼び出に依存します。 this

グローバルスコープ

現在のオブジェクトがない場合、

はグローバルオブジェクトを参照します。 Webブラウザでは、ドキュメント、場所、履歴、およびその他の便利なプロパティと方法を表すトップレベルのオブジェクトです。 this window

window.WhoAmI = "我是 window 对象";
alert(window.WhoAmI);
alert(this.WhoAmI); // 我是 window 对象
alert(window === this); // true
ログイン後にコピー
関数を呼び出します

関数を呼び出している場合は、

グローバルオブジェクトを保持します:

this

window.WhoAmI = "我是 window 对象";

function TestThis() {
    alert(this.WhoAmI); // 我是 window 对象
    alert(window === this); // true
}

TestThis();
ログイン後にコピー
オブジェクトメソッドを呼び出します

オブジェクトコンストラクターまたはそのメソッドのいずれかを呼び出すとき、

は、クラスベースの言語のようにオブジェクトのインスタンスを参照します:

this

window.WhoAmI = "我是 window 对象";

function Test() {
    this.WhoAmI = "我是 Test 对象";

    this.Check1 = function() {
        alert(this.WhoAmI); // 我是 Test 对象
    };
}

Test.prototype.Check2 = function() {
    alert(this.WhoAmI); // 我是 Test 对象
};

var t = new Test();
t.Check1();
t.Check2();
ログイン後にコピー

またはcallを使用します apply本質的に、および

javaScriptが別のオブジェクトの方法であるかのように機能します。簡単な例をさらに説明できます:

call apply唯一の違いは、

が個別の数のパラメーターを期待しているのに対し、
function SetType(type) {
    this.WhoAmI = "我是 " + type + " 对象";
}

var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // 我是 newObject 对象

var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // 我是 new2 对象
ログイン後にコピー
はパラメーターの配列を渡すことができることです。これは

の簡単な説明です!しかし、それがあなたをトラブルに巻き込むことができることに注意すべきことがいくつかあります。これらについては、次の投稿で説明します…call JavaScript applythis

についてのFAQ

JavaScriptのキーワードは何ですか?なぜそれが重要なのですか? this

javaScriptの

キーワードは、呼び出し関数のコンテキストを指す特別なキーワードです。これは、関数が属するオブジェクトへの参照です。 thisの値は、関数がどのように呼び出されるかに依存します。関数内のオブジェクトのプロパティと方法にアクセスし、コードをより柔軟で再利用可能にすることができるため、重要です。 this

キーワードはさまざまなコンテキストでどのように機能しますか? this

の値は、その使用状況に応じて変更されます。メソッドでは、thisは所有者オブジェクトを参照します。単独で使用する場合、thisはグローバルオブジェクトを指します。関数では、thisはグローバルオブジェクトを指します。イベントでは、thisはイベントを受け取る要素を指します。 this

イベントハンドラーでどのように機能するかを説明できますか?

イベントハンドラーでは、イベントを受信するHTML要素を指します。これにより、イベントハンドラー機能で要素に直接アクセスして操作できます。たとえば、 fnuctionのイベントを備えたボタンがある場合、ボタン要素を参照します。 this

矢印関数でどのように動作しますか? this onclick矢印関数は、通常の関数とは異なる方法で処理します。矢印関数では、onclickは語彙結合です。これは、矢印関数を含むコードでthisを使用することを意味します。したがって、矢印関数の場合、

は語彙的コンテキストを囲む

の値を維持します。 this

javascriptの

と他のプログラミング言語でのthisの違いは何ですか? this this多くのオブジェクト指向プログラミング言語では、thisは常に現在のクラスのインスタンスを指します。ただし、javaScriptでは、thisの値は、機能の定義位置ではなく、実行のコンテキストと関数の呼び出によって決定されます。

関数でthisのコンテキストを変更するにはどうすればよいですか? this

thisthisなどのメソッドを使用して

のコンテキストを変更できます。

およびthisメソッドは、指定された

値とパラメーターを使用して関数を呼び出します。 2つの違いは、

がパラメーターリストを受け入れ、call()は単一のパラメーター配列を受け入れることです。 apply()メソッドは、関数を特定のオブジェクトにバインドできる新しい関数を返します。 bind() コンストラクターのthisの値は何ですか? call() apply()コンストラクターでは、thisは新しく作成されたオブジェクトを指します。 call()キーワードを使用してオブジェクトのインスタンスを作成すると、apply()は新しいオブジェクトに自動的に設定されます。 bind()

this厳密なモードでどのように動作しますか?

厳密なモードでは、実行コンテキストを入力するときにthisの値が設定された値に残ります。未定義の場合、それは未定義のままです。これは、非定期モードとは異なり、thisは未定義の場合はグローバルオブジェクトにデフォルトです。

thisそれはnullまたは未定義であることができますか?

はい、thisは、特にStrictモードで関数を呼び出す場合、または最初の引数として未定義またはnullを使用してcall()またはapply()を使用している場合に、nullまたは未定義にすることができます。

JavaScriptのグローバルオブジェクトは何ですか?

JavaScriptのグローバルオブジェクトは環境によって異なります。 Webブラウザでは、グローバルオブジェクトは

オブジェクトです。 node.jsでは、グローバルオブジェクトはグローバルオブジェクトリテラルです。関数またはメソッドの外でwindowが使用される場合、グローバルオブジェクトを指します。 this

以上が' this' JavaScriptで?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート