Rumah hujung hadapan web tutorial js this是怎么使用的?

this是怎么使用的?

Jun 26, 2017 am 09:27 AM
this guna

(1)全局环境

在全局环境使用this,它指的就是顶层对象window

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="k">this <span class="o">=== <span class="nb">window <span class="c1">// true<span class="kd">function <span class="nx">f<span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this <span class="o">=== <span class="nb">window<span class="p">); <span class="c1">// true<span class="p">}<br/>不管是不是在函数内部,只要是在全局环境下运行,<code class="highlighter-rouge">this</code>就是指顶层对象<code class="highlighter-rouge">window</code>。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>
Salin selepas log masuk

(2)构造函数

构造函数中的this,指的是实例对象。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">Obj <span class="o">= <span class="kd">function <span class="p">(<span class="nx">p<span class="p">) <span class="p">{  <span class="k">this<span class="p">.<span class="nx">p <span class="o">= <span class="nx">p<span class="p">;<span class="p">};<span class="nx">Obj<span class="p">.<span class="nx">prototype<span class="p">.<span class="nx">m <span class="o">= <span class="kd">function<span class="p">() <span class="p">{  <span class="k">return <span class="k">this<span class="p">.<span class="nx">p<span class="p">;<span class="p">};</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">上面代码定义了一个构造函数<code class="highlighter-rouge">Obj</code>。由于<code class="highlighter-rouge">this</code>指向实例对象,所以在构造函数内部定义<code class="highlighter-rouge">this.p</code>,就相当于定义实例对象有一个<code class="highlighter-rouge">p</code>属性;然后<code class="highlighter-rouge">m</code>方法可以返回这个p属性。</span>
Salin selepas log masuk

(3)对象的方法

当A对象的方法被赋予B对象,该方法中的this就从指向A对象变成了指向B对象。所以要特别小心,将某个对象的方法赋值给另一个对象,会改变this的指向。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">obj <span class="o">=<span class="p">{  <span class="na">foo<span class="p">: <span class="kd">function <span class="p">() <span class="p">{<span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);  <span class="p">}<span class="p">};<span class="nx">obj<span class="p">.<span class="nx">foo<span class="p">() <span class="c1">// obj</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
Salin selepas log masuk

obj.foo方法执行时,它内部的this指向obj

但是,只有这一种用法(直接在obj对象上调用foo方法),this指向obj;其他用法时,this都指向代码块当前所在对象(浏览器为window对象)。

// 情况一(obj.foo = obj.foo)() // window// 情况二(false || obj.foo)() // window// 情况三(1, obj.foo)() // window
Salin selepas log masuk

obj.foo先运算再执行,即使它的值根本没有变化,this也不再指向obj了。

可以这样理解,在JavaScript引擎内部,objobj.foo储存在两个内存地址,简称为M1M2。只有obj.foo()这样调用时,是从M1调用M2,因此this指向obj。但是,上面三种情况,都是直接取出M2进行运算,然后就在全局环境执行运算结果(还是M2),因此this指向全局环境。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 情况一<span class="p">(<span class="nx">obj<span class="p">.<span class="nx">foo <span class="o">= <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况二<span class="p">(<span class="kc">false <span class="o">|| <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况三<span class="p">(<span class="mi">1<span class="p">, <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">同样的,如果某个方法位于多层对象的内部,这时为了简化书写,把该方法赋值给一个变量,往往会得到意料之外的结果。</span>
Salin selepas log masuk
var a = {  b: {m: function() {      console.log(this.p);},p: &#39;Hello&#39;  }};var hello = a.b.m;hello() // undefined
Salin selepas log masuk
上面代码中,m是多层对象内部的一个方法。为求简便,将其赋值给hello变量,结果调用时,this指向了顶层对象。为了避免这个问题,可以只将m所在的对象赋值给hello,这样调用时,this的指向就不会变。
Salin selepas log masuk
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">hello <span class="o">= <span class="nx">a<span class="p">.<span class="nx">b<span class="p">;<span class="nx">hello<span class="p">.<span class="nx">m<span class="p">() <span class="c1">// Hello</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
Salin selepas log masuk

(4)Node

在Node中,this的指向又分成两种情况。全局环境中,this指向全局对象global;模块环境中,this指向module.exports。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 全局环境<span class="k">this <span class="o">=== <span class="nx">global <span class="c1">// true<span class="c1">// 模块环境<span class="k">this <span class="o">=== <span class="nx">module<span class="p">.<span class="nx">exports <span class="c1">// true</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei""><br/></span><br/><br/>
Salin selepas log masuk
 <br/>
Salin selepas log masuk

Atas ialah kandungan terperinci 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)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 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)

Cara menggunakan pautan magnet Cara menggunakan pautan magnet Feb 18, 2024 am 10:02 AM

Pautan magnet ialah kaedah pautan untuk memuat turun sumber, yang lebih mudah dan cekap daripada kaedah muat turun tradisional. Pautan magnet membolehkan anda memuat turun sumber secara peer-to-peer tanpa bergantung pada pelayan perantara. Artikel ini akan memperkenalkan cara menggunakan pautan magnet dan perkara yang perlu diberi perhatian. 1. Apakah pautan magnet? Pautan magnet ialah kaedah muat turun berdasarkan protokol P2P (Peer-to-Peer). Melalui pautan magnet, pengguna boleh menyambung terus kepada penerbit sumber untuk melengkapkan perkongsian dan muat turun sumber. Berbanding dengan kaedah muat turun tradisional, magnet

Cara menggunakan fail mdf dan mds Cara menggunakan fail mdf dan mds Feb 19, 2024 pm 05:36 PM

Cara menggunakan fail mdf dan fail mds Dengan kemajuan teknologi komputer yang berterusan, kami boleh menyimpan dan berkongsi data dalam pelbagai cara. Dalam bidang media digital, kita sering menghadapi beberapa format fail khas. Dalam artikel ini, kami akan membincangkan format fail biasa - fail mdf dan mds, dan memperkenalkan cara menggunakannya. Pertama, kita perlu memahami maksud fail mdf dan fail mds. mdf ialah lanjutan fail imej CD/DVD, dan fail mds ialah fail metadata bagi fail mdf.

Apakah perisian crystaldiskmark? -Bagaimana menggunakan crystaldiskmark? Apakah perisian crystaldiskmark? -Bagaimana menggunakan crystaldiskmark? Mar 18, 2024 pm 02:58 PM

CrystalDiskMark ialah alat penanda aras HDD kecil untuk pemacu keras yang cepat mengukur kelajuan baca/tulis berurutan dan rawak. Seterusnya, biarkan editor memperkenalkan CrystalDiskMark kepada anda dan cara menggunakan crystaldiskmark~ 1. Pengenalan kepada CrystalDiskMark CrystalDiskMark ialah alat ujian prestasi cakera yang digunakan secara meluas yang digunakan untuk menilai kelajuan baca dan tulis serta prestasi pemacu keras mekanikal dan pemacu keadaan pepejal (SSD Prestasi I/O rawak. Ia adalah aplikasi Windows percuma dan menyediakan antara muka mesra pengguna dan pelbagai mod ujian untuk menilai aspek prestasi cakera keras yang berbeza dan digunakan secara meluas dalam ulasan perkakasan

Bagaimana untuk memuat turun foobar2000? -Cara menggunakan foobar2000 Bagaimana untuk memuat turun foobar2000? -Cara menggunakan foobar2000 Mar 18, 2024 am 10:58 AM

foobar2000 ialah perisian yang boleh mendengar sumber muzik pada bila-bila masa Ia membawakan anda semua jenis muzik dengan kualiti bunyi tanpa kehilangan Versi pemain muzik yang dipertingkatkan membolehkan anda mendapatkan pengalaman muzik yang lebih komprehensif dan selesa mainkan audio lanjutan pada komputer Peranti dipindahkan ke telefon mudah alih untuk memberikan pengalaman main balik muzik yang lebih mudah dan cekap Reka bentuk antara muka adalah ringkas, jelas dan mudah digunakan Ia menggunakan gaya reka bentuk minimalis tanpa terlalu banyak hiasan dan operasi yang menyusahkan untuk bermula dengan cepat. Ia juga menyokong pelbagai kulit dan Tema, memperibadikan tetapan mengikut pilihan anda sendiri, dan mencipta pemain muzik eksklusif yang menyokong main balik berbilang format audio. Ia juga menyokong fungsi perolehan audio untuk melaraskan kelantangan kepada keadaan pendengaran anda sendiri untuk mengelakkan kerosakan pendengaran yang disebabkan oleh kelantangan yang berlebihan. Seterusnya, izinkan saya membantu anda

Cara menggunakan aplikasi Baidu Netdisk Cara menggunakan aplikasi Baidu Netdisk Mar 27, 2024 pm 06:46 PM

Storan awan telah menjadi bahagian yang amat diperlukan dalam kehidupan dan kerja harian kita pada masa kini. Sebagai salah satu perkhidmatan storan awan terkemuka di China, Baidu Netdisk telah memenangi hati sebilangan besar pengguna dengan fungsi storan yang berkuasa, kelajuan penghantaran yang cekap dan pengalaman operasi yang mudah. Dan sama ada anda ingin menyandarkan fail penting, berkongsi maklumat, menonton video dalam talian atau mendengar muzik, Baidu Cloud Disk boleh memenuhi keperluan anda. Walau bagaimanapun, ramai pengguna mungkin tidak memahami penggunaan khusus aplikasi Baidu Netdisk, jadi tutorial ini akan memperkenalkan anda tentang cara menggunakan aplikasi Baidu Netdisk secara terperinci Jika anda masih keliru, sila ikuti artikel ini untuk mengetahui lebih lanjut! Cara menggunakan Cakera Rangkaian Awan Baidu: 1. Pemasangan Mula-mula, semasa memuat turun dan memasang perisian Baidu Cloud, sila pilih pilihan pemasangan tersuai.

Cara menggunakan NetEase Mailbox Master Cara menggunakan NetEase Mailbox Master Mar 27, 2024 pm 05:32 PM

NetEase Mailbox, sebagai alamat e-mel yang digunakan secara meluas oleh netizen Cina, sentiasa memenangi kepercayaan pengguna dengan perkhidmatannya yang stabil dan cekap. NetEase Mailbox Master ialah perisian e-mel yang dicipta khas untuk pengguna telefon mudah alih. Ia sangat memudahkan proses menghantar dan menerima e-mel dan menjadikan pemprosesan e-mel kami lebih mudah. Jadi bagaimana untuk menggunakan NetEase Mailbox Master, dan apakah fungsi khusus yang ada di bawah, editor tapak ini akan memberi anda pengenalan terperinci, dengan harapan dapat membantu anda. Mula-mula, anda boleh mencari dan memuat turun aplikasi NetEase Mailbox Master di gedung aplikasi mudah alih. Cari "Induk Peti Mel NetEase" dalam App Store atau Baidu Mobile Assistant, dan kemudian ikut gesaan untuk memasangnya. Selepas muat turun dan pemasangan selesai, kami membuka akaun e-mel NetEase dan log masuk. Antara muka log masuk adalah seperti yang ditunjukkan di bawah

Bagaimana untuk menggunakan Xiaoai Speaker Bagaimana untuk menyambung Xiaoai Speaker ke telefon bimbit Bagaimana untuk menggunakan Xiaoai Speaker Bagaimana untuk menyambung Xiaoai Speaker ke telefon bimbit Feb 22, 2024 pm 05:19 PM

Selepas lama menekan butang main pembesar suara, sambungkan ke wifi dalam perisian dan anda boleh menggunakannya. Tutorial Model Berkenaan: Xiaomi 12 Sistem: EMUI11.0 Versi: Xiaoai Classmate 2.4.21 Analisis 1 Mula-mula cari butang main pembesar suara, dan tekan dan tahan untuk memasuki mod pengedaran rangkaian. 2 Log masuk ke akaun Xiaomi anda dalam perisian Xiaoai Speaker pada telefon anda dan klik untuk menambah Speaker Xiaoai baharu. 3. Selepas memasukkan nama dan kata laluan wifi, anda boleh menghubungi Xiao Ai untuk menggunakannya. Tambahan: Apakah fungsi yang ada pada Xiaoai Speaker 1 Xiaoai Speaker mempunyai fungsi sistem, fungsi sosial, fungsi hiburan, fungsi pengetahuan, fungsi kehidupan, rumah pintar dan rancangan latihan. Ringkasan/Nota: Apl Xiao Ai mesti dipasang pada telefon mudah alih anda terlebih dahulu untuk sambungan dan penggunaan yang mudah.

Panduan ringkas untuk sumber cermin pip: kuasai cara menggunakannya dengan mudah Panduan ringkas untuk sumber cermin pip: kuasai cara menggunakannya dengan mudah Jan 16, 2024 am 10:18 AM

Bermula dengan mudah: Cara menggunakan sumber cermin pip Dengan populariti Python di seluruh dunia, pip telah menjadi alat standard untuk pengurusan pakej Python. Walau bagaimanapun, masalah biasa yang dihadapi oleh ramai pembangun apabila menggunakan pip untuk memasang pakej adalah kelambatan. Ini kerana secara lalai, pip memuat turun pakej daripada sumber rasmi Python atau sumber luaran lain, dan sumber ini mungkin terdapat pada pelayan luar negara, menyebabkan kelajuan muat turun yang perlahan. Untuk meningkatkan kelajuan muat turun, kami boleh menggunakan sumber cermin pip. Apakah sumber cermin pip? Secara ringkasnya, hanya

See all articles