Rumah hujung hadapan web tutorial js 在JavaScript函数中this指向的是什么

在JavaScript函数中this指向的是什么

Nov 27, 2018 am 10:46 AM
this

今天将和大家分享JavaScript中一个重要知识点this,有一定的参考价值,希望对大家学习有所帮助。

对于this关键字的学习经常让我们感到困惑,搞不清楚它在函数中指代的是什么以及如何去使用它,今天将在文章中为大家详细介绍有关this的知识

【推荐课程:JavaScript教程

上下文和this关键字

在JavaScript中,函数有自己的执行上下文,在这里要特别注意下函数的执行上下文不是关于它是如何声明的,也不是说函数的作用,而是关于如何在代码中调用它,我们在调用此执行上下文时就会用到this。当this从函数内部访问时,实际上就是访问其执行上下文。

调用函数方式与this

上下文取决于函数的调用方式,我们可以通过4种不同的方式来调用上下文的函数,因此this也有四种不同的指向

1. 一个基本的函数调用

2. 使用上下文对象调用函数,也称为隐式绑定。

3. 使用call()或调用函数apply(),也称为显式绑定。

4. 通过bind()方法绑定

基本函数调用

基本函数调用是调用函数的最简单方法

例:

<script type="text/javascript">
	var name="张三";
	function student(){
		console.log(this.name);
	}
	student();
</script>
Salin selepas log masuk

Image 1.jpg

在这个例子中可以看出student()是从全局范围内调用函数,因此这里的this指代的是全局范围,所以输出结果为“”张三“”

隐式绑定

当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了

<script type="text/javascript">
var student={
	name:"张三",
	obj:function(){
		console.log(this.name)
	}
}
student.obj();
	</script>
Salin selepas log masuk

Image 2.jpg

obj函数虽然被放到对象里去但是并不会因为它被定义在对象的内部就会与外部产生区别,在隐式绑定下,obj通过this还是可以访问到student对象中的a属性

显示绑定

可以使用call()或apply()方法调用函数,其执行上下文显式绑定到对象,call和apply可以改变this指向

例:未使用call ()或者apply()时

<script type="text/javascript">
var name="张三";
var obj = {
	name:"李四",
	fun:function(){
	console.log(this.name);}}
obj.fun();
</script>
Salin selepas log masuk

Image 3.jpg

利用call()使this指向window

<script type="text/javascript">
var name="张三";
var obj = {
name:"李四",
fun:function(){
      onsole.log(this.name);}}
       obj.fun.call(window);
</script>
Salin selepas log masuk

Image 1.jpg


bind()绑定

bind()会创建一个函数,函数体内的this对象的值会被绑定到传入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>
Salin selepas log masuk


通过bind方法将this指向c对象中的内容。

Image 4.jpg

总结:以上就是本篇文章的全部内容了,从上面的文章中我们可以看出,谁调用的this就指向谁;全局中this指向window;而且call(),apply()以及bind()方法可以改变this的指向。



Atas ialah kandungan terperinci 在JavaScript函数中this指向的是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Artikel untuk memahami panduan ini dan mengejar 70% orang hadapan Artikel untuk memahami panduan ini dan mengejar 70% orang hadapan Sep 06, 2022 pm 05:03 PM

Seorang rakan sekerja tersekat kerana pepijat yang ditunjukkan oleh masalah penunjuk Vue2 ini menyebabkan fungsi anak panah digunakan, mengakibatkan ketidakupayaan untuk mendapatkan prop yang sepadan. Dia tidak tahu apabila saya memperkenalkannya kepadanya, dan kemudian saya sengaja melihat kumpulan pertukaran bahagian hadapan Setakat ini, sekurang-kurangnya 70% pengaturcara bahagian hadapan masih tidak memahaminya anda pautan ini. Jika semuanya tidak jelas saya belum belajar bagaimana untuk melakukannya, sila berikan saya mulut yang besar.

Mari kita bincangkan mengapa Vue2 boleh mengakses atribut dalam pelbagai pilihan melalui ini Mari kita bincangkan mengapa Vue2 boleh mengakses atribut dalam pelbagai pilihan melalui ini Dec 08, 2022 pm 08:22 PM

Artikel ini akan membantu anda mentafsir kod sumber vue dan memperkenalkan sebab anda boleh menggunakan ini untuk mengakses sifat dalam pelbagai pilihan dalam Vue2. Saya harap ia akan membantu semua orang.

Bagaimana untuk menggunakan kaedah ini dalam Java Bagaimana untuk menggunakan kaedah ini dalam Java Apr 18, 2023 pm 01:58 PM

1. kata kunci ini 1. Jenis ini: Objek yang dipanggil ialah jenis rujukan objek itu 2. Ringkasan penggunaan 1. this.data;//Atribut akses 2. this.func();//Kaedah akses 3.this ( );//Panggil pembina lain dalam kelas ini 3. Penjelasan penggunaan 1.this.data digunakan dalam kaedah ahli Mari kita lihat apa yang akan berlaku jika ini tidak ditambah classMyDate{publicintyear;publicintmonth;publicintday(intyear,. intmonth,intday){ye

Apa ini? Analisis mendalam tentang ini dalam JavaScript Apa ini? Analisis mendalam tentang ini dalam JavaScript Aug 04, 2022 pm 05:02 PM

Apa ini? Artikel berikut akan memperkenalkan anda kepada ini dalam JavaScript, dan bercakap tentang perbezaan antara ini dalam kaedah panggilan yang berbeza fungsi saya harap ia akan membantu anda!

Cara bijak untuk menggunakan kata kunci ini dalam jQuery Cara bijak untuk menggunakan kata kunci ini dalam jQuery Feb 25, 2024 pm 04:09 PM

Penggunaan fleksibel kata kunci ini dalam jQuery Dalam jQuery, kata kunci ini adalah konsep yang sangat penting dan fleksibel Ia digunakan untuk merujuk kepada elemen DOM yang sedang dimanipulasi. Dengan menggunakan kata kunci ini secara rasional, kami boleh mengendalikan elemen pada halaman dengan mudah dan mencapai pelbagai kesan dan fungsi interaktif. Artikel ini akan menggabungkan contoh kod khusus untuk memperkenalkan penggunaan fleksibel kata kunci ini dalam jQuery. Mudah contoh ini Mula-mula, mari kita lihat contoh mudah ini. Katakan kita mempunyai a

Bagaimanakah JavaScript mengubah penunjuk ini? Analisis ringkas tiga kaedah Bagaimanakah JavaScript mengubah penunjuk ini? Analisis ringkas tiga kaedah Sep 19, 2022 am 09:57 AM

Bagaimanakah JavaScript mengubah penunjuk ini? Artikel berikut akan memperkenalkan kepada anda tiga kaedah untuk menukar penunjuk ini dalam JS. Saya harap ia akan membantu anda!

Kaedah permulaan rujukan dan pembinaan objek ini dalam java Kaedah permulaan rujukan dan pembinaan objek ini dalam java May 14, 2023 pm 06:40 PM

1.rujukan ini 1.1 Mengapakah terdapat rujukan ini Mula-mula, mari tulis contoh kelas tarikh: publicclassclassCode{publicintyear;publicintmonth;publicintday;publicvoidsetDay(inty,intm,intd){year=y;month=m;day= d;}publicvoidprintDate (){System.out.println(year+"-"+month+"-"+day);}publicstatic

Penjelasan terperinci tentang ini dalam fungsi anak panah JavaScript Penjelasan terperinci tentang ini dalam fungsi anak panah JavaScript Jan 25, 2024 pm 01:41 PM

Fungsi anak panah dalam JavaScript adalah sintaks yang agak baru Ia tidak mempunyai kata kunci ini sendiri Sebaliknya, fungsi anak panah ini menghala ke objek skop yang mengandunginya statik; 2. Fungsi Anak panah tidak boleh digunakan sebagai pembina 3. Fungsi anak panah tidak boleh digunakan sebagai kaedah.

See all articles