ホームページ ウェブフロントエンド jsチュートリアル これは JavaScript 関数で何を指しているのでしょうか?

これは JavaScript 関数で何を指しているのでしょうか?

Nov 27, 2018 am 10:46 AM
this

今日は、JavaScript の重要な知識ポイントを共有します。これは一定の参考価値があり、皆さんの学習に役立つことを願っています。

this キーワードを学習するときに、関数内で何を指すのか、どのように使用するのかがよくわかりません。今回は、このキーワードについて詳しく説明します。知識

[推奨コース:JavaScript チュートリアル]

コンテキストとこのキーワード

JavaScript では、関数には独自の実行コンテキストがあります。ここで特に注意してください。関数の実行コンテキストは、関数がどのように宣言されるか、関数が何を行うかではなく、どのように実行されるかということです。コードで呼び出すには、この実行コンテキストを呼び出すときにこれを使用します。関数内からこれにアクセスすると、その実行コンテキストが実際にアクセスされます。

関数の呼び出し方法とこれ

コンテキストは関数の呼び出し方法に依存します。コンテキストの関数は 4 つの異なる方法で呼び出すことができます。したがって、この異なるポインターにも 4 つのタイプがあります。

1. 基本的な関数呼び出し

2. コンテキスト オブジェクトを使用して関数を呼び出すこと。暗黙的なバインディングとも呼ばれます。

3. call() を使用するか、関数 apply() (明示的バインディングとも呼ばれます) を呼び出します。

4.bind() メソッドによるバインド

基本的な関数呼び出し

基本的な関数呼び出しは、関数を呼び出す最も簡単な方法です。

例:

<script type="text/javascript">
	var name="张三";
	function student(){
		console.log(this.name);
	}
	student();
</script>
ログイン後にコピー

Image 1.jpg

この例では、student() がグローバル スコープから関数を呼び出していることがわかります。したがって、ここではグローバル スコープを指します。出力結果は「"Zhang San"」です。

暗黙的なバインディング

関数がオブジェクトに「含まれている」場合、関数の this と呼ばれます。 is implicitly binding このオブジェクトにバインドされています

<script type="text/javascript">
var student={
	name:"张三",
	obj:function(){
		console.log(this.name)
	}
}
student.obj();
	</script>
ログイン後にコピー

Image 2.jpg

obj 関数はオブジェクトの中に配置されていますが、オブジェクトの内部で定義されているだけで、外部と変わりません。オブジェクト。暗黙的なバインディングでは、obj は引き続きこの

Display binding

call() または apply() を使用して Student オブジェクトのプロパティにアクセスできます。メソッドは関数を呼び出し、その実行コンテキストは明示的にオブジェクトにバインドされます。call および apply はこのポインターを変更できます。

例: call () または apply() が使用されていない場合

<script type="text/javascript">
var name="张三";
var obj = {
	name:"李四",
	fun:function(){
	console.log(this.name);}}
obj.fun();
</script>
ログイン後にコピー

Image 3.jpg

call() を使用して、このポイントを window

<script type="text/javascript">
var name="张三";
var obj = {
name:"李四",
fun:function(){
      onsole.log(this.name);}}
       obj.fun.call(window);
</script>
ログイン後にコピー

Image 1.jpg


#bind() バインディング

bind() は関数を作成します。関数本体内のこのオブジェクトの値は、bind() に渡される最初のパラメーターの値にバインドされます。ただし、bind は関数を実行しません。関数

<script type="text/javascript">
var a = {
	b : function(){
		var func = function(){
			console.log(this.c);
		}
		func.bind(this)();
	},
	c : &#39;Hello!&#39;
}
a.b();
	</script>
ログイン後にコピー


は、bind メソッドを通じて c オブジェクトのコンテンツを指します。

Image 4.jpg要約: 上記はこの記事の全内容です。上記の記事から、これを呼び出す人が誰を指すのかがわかります。 call()、apply()、bind() メソッドは this のポインタを変更できます。



以上がこれは JavaScript 関数で何を指しているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

この点を理解してフロントエンド担当者の7割をキャッチアップした記事 この点を理解してフロントエンド担当者の7割をキャッチアップした記事 Sep 06, 2022 pm 05:03 PM

同僚は、これによって指摘されたバグのために立ち往生しました。Vue2 のこの指摘の問題により、アロー関数が使用され、その結果、対応する props を取得できなくなりました。私がそれを彼に紹介したとき、彼はそれを知りませんでした。その後、私はわざとフロントエンド コミュニケーション グループに目を向けました。これまでのところ、フロントエンド プログラマーの少なくとも 70% はまだそれを理解していません。今日私はそれを共有しますyou this link. もしすべてが間違っている場合 まだ学習していない場合は、大きな口を与えてください。

Vue2 がこれを通じてさまざまなオプションのプロパティにアクセスできる理由について話しましょう Vue2 がこれを通じてさまざまなオプションのプロパティにアクセスできる理由について話しましょう Dec 08, 2022 pm 08:22 PM

この記事は、vue ソース コードを解釈するのに役立ち、これを使用して Vue2 のさまざまなオプションのプロパティにアクセスできる理由を紹介します。

jQuery でこのキーワードを使用する賢い方法 jQuery でこのキーワードを使用する賢い方法 Feb 25, 2024 pm 04:09 PM

jQuery での this キーワードの柔軟な使用 jQuery では、this キーワードは非常に重要かつ柔軟な概念であり、現在操作されている DOM 要素を参照するために使用されます。このキーワードを合理的に使用することで、ページ上の要素を簡単に操作し、さまざまなインタラクティブな効果や機能を実現できます。この記事では、特定のコード例を組み合わせて、jQuery でのこのキーワードの柔軟な使用方法を紹介します。簡単なこの例 まず、簡単なこの例を見てみましょう。あるとします。

これは何ですか? JavaScript でのこれの詳細な分析 これは何ですか? JavaScript でのこれの詳細な分析 Aug 04, 2022 pm 05:02 PM

これは何ですか?次の記事では、JavaScript でのこれについて説明し、関数の呼び出し方法の違いによる違いについて説明します。

Java でこのメソッドを使用する方法 Java でこのメソッドを使用する方法 Apr 18, 2023 pm 01:58 PM

1. this キーワード 1. this の型: どのオブジェクトが呼び出されるかがそのオブジェクトの参照型 2. 使用法の概要 1. this.data;//アクセス属性 2. this.func();// アクセスメソッド 3.this ( );//このクラス内の他のコンストラクタを呼び出す 3. 使い方の説明 1.this.dataはメンバメソッドで使用しているので、これを追加しないとどうなるかを見てみましょう classMyDate{publicintyear;publicintmonth;publicintday; publicvoidsetDate(intyear, intmonth,intday){はい

JavaScript はこのポインタをどのように変更するのでしょうか? 3 つの方法の簡単な分析 JavaScript はこのポインタをどのように変更するのでしょうか? 3 つの方法の簡単な分析 Sep 19, 2022 am 09:57 AM

JavaScript はこのポインタをどのように変更するのでしょうか?次の記事では、JS でこのポインターを変更する 3 つの方法を紹介します。

JavaScriptのアロー関数で詳しく解説 JavaScriptのアロー関数で詳しく解説 Jan 25, 2024 pm 01:41 PM

JavaScript のアロー関数は比較的新しい構文です。独自の this キーワードはありません。逆に、アロー関数の this は、それを含むスコープ オブジェクトを指します。影響は次のとおりです: 1. アロー関数の this は次のとおりです。 static; 2. アロー関数はコンストラクタとして使用できません; 3. アロー関数はメソッドとして使用できません。

この4つの拘束ルールについて詳しく説明しましょう この4つの拘束ルールについて詳しく説明しましょう Nov 01, 2022 pm 05:49 PM

this キーワードは、JavaScript で最も複雑なメカニズムの 1 つです。これは、すべての関数のスコープ内で自動的に定義される非常に特別なキーワードです。しかし、経験豊富な JavaScript 開発者でも、それが正確に何を指しているのかを理解するのは困難です。

See all articles