在JavaScript函数中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>
在这个例子中可以看出student()是从全局范围内调用函数,因此这里的this指代的是全局范围,所以输出结果为“”张三“”
隐式绑定
当函数被一个对象“包含”的时候,我们称函数的this被隐式绑定到这个对象里面了
<script type="text/javascript"> var student={ name:"张三", obj:function(){ console.log(this.name) } } student.obj(); </script>
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>
利用call()使this指向window
<script type="text/javascript"> var name="张三"; var obj = { name:"李四", fun:function(){ onsole.log(this.name);}} obj.fun.call(window); </script>
bind()绑定
bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,但是bind不执行函数,只返回一个可供执行的函数
<script type="text/javascript"> var a = { b : function(){ var func = function(){ console.log(this.c); } func.bind(this)(); }, c : 'Hello!' } a.b(); </script>
通过bind方法将this指向c对象中的内容。
总结:以上就是本篇文章的全部内容了,从上面的文章中我们可以看出,谁调用的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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



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.

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.

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? 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!

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? Artikel berikut akan memperkenalkan kepada anda tiga kaedah untuk menukar penunjuk ini dalam JS. Saya harap ia akan membantu anda!

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

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.
