Fahami betul-betul masalah penunjuk ini dalam JavaScript

Artikel ini membawa anda pengetahuan yang berkaitan tentang penunjuk ini dalam JavaScript. Kata kunci ini adalah perkara tatabahasa yang sangat penting.

1. Hubungan antara konteks dan ini

Lulus Dengan memahami konteks, kita dapat memahami dengan lebih jelas masalah penunjuk this Penunjukan

this boleh dilihat sebagai konteks semasa

2. Umum. fungsi

Mula-mula mari kita ambil contoh untuk melihat apakah this dalam fungsi:

let colors = {
    green : "绿色",
    blue : "蓝色",
    showColors : function() {
        console.log("green: " + this.green  + " blue: " + this.blue);
    }}colors.showColors();let show = colors.showColors;show();

Output pertama adalah hijau dan biru, ini Konteks fungsi adalah warna, jadi this menunjukkan kepada warna
Output kedua tidak ditentukan dan tidak ditentukan Pada masa ini, fungsi dipanggil secara langsung menggunakan kurungan Pada masa ini, this menunjuk ke tetingkap

Jadi, kita dapat melihat bahawa konteks fungsi, iaitu, this adalah ditentukan dengan cara fungsi dipanggil .

Situasi konteks fungsi biasa:

• objek memanggil fungsi kaedahnya, kemudian konteks fungsi ialah objek yang ditanda, dan this menunjuk ke objek ini
  obj.fun(); Konteksnya ialah obj
• Gunakan kurungan untuk memanggil fungsi secara terus, konteksnya ialah objek tetingkap, this menunjuk ke objek tetingkap

Contohnya:

function fun() {
    return this.a + this.b;}var a = 1;var b = 2;let obj = {
    a : 5,
    b : fun(),
    fun : fun}let res = obj.fun();console.log(res);

B dalam obj di sini dipanggil fun() terus menggunakan kurungan, jadi konteks fun() pada masa ini ialah objek tetingkap, jadi this di sini menunjuk ke tetingkap, b = 1 2 = 3;
Keseronokan() obj.fun() dipanggil oleh obj, jadi konteksnya ialah obj, jadi this di sini menunjuk ke obj, jadi res = 5 3 = 8

3. Objek seperti tatasusunan

objek seperti tatasusunan menyenaraikan fungsi untuk memanggil Konteksnya ialah objek seperti tatasusunan
, yang boleh dilihat sebagai:

数组[下标](); 调用这个函数的上下文对象就是这个数组

Mari kita fahami melalui contoh:

let arr = [1, 2, 3, function() {
    console.log(this[0]);}];arr[3]();

Di sini subskrip 3 ialah fungsi, yang menyenaraikan objek dengan subskrip 3 melalui tatasusunan, dan kemudian Pelaksanaan, jadi konteksnya ialah arr tatasusunan ini

Objek seperti tatasusunan:

• Apakah objek seperti tatasusunan ?

Semua objek yang nama utamanya ialah jujukan nombor asli (bermula dari 0) dan mempunyai length atribut
Contohnya: arguments objek ialah objek seperti tatasusunan, iaitu objek sebenar parameter Senarai fungsi

function fun() {
    arguments[3]();}fun(1, 2, 3, function() {
    console.log(this[0]);})

Di sini keseronokan fungsi dipanggil, tetapi pada masa yang sama ia dipanggil, fungsi yang dihantar kepadanya dilaksanakan, iaitu, pernyataan arguments[3]() , jadi this[0] akan menjadi output Ia adalah objek seperti tatasusunan yang menyenaraikan fungsi untuk memanggil, jadi konteksnya adalah arguments dan this menunjuk kepadanya.

---

4. Laksanakan fungsi serta-merta

Segera laksanakan fungsi (IIFE), konteksnya ialah objek tetingkap, jadi thisnya menghala ke tetingkap

Marilah kita memahaminya melalui contoh:

var a = 1;let obj = {
    a : 2,
    fun : (function() {
        let a = this.a;
        return function() {
            console.log(a + this.a);
        }
    })()};obj.fun();

obj.fun()Seperti yang dinyatakan di atas, fun() dipanggil oleh obj, jadi this di sini menunjukkan keseronokan
dalam obj adalah sama dengan nilai pulangan fungsi yang dilaksanakan serta-merta,
bersamaan dengan

obj = function() {
    console.log(a + this.a);}

dengan this menunjuk ke obj, jadi ini.a = 2; objek konteks dalam fungsi pelaksanaan segera ialah tetingkap, jadi
nya menghala ke tetingkap, jadi biarkan a = this.a's this menghala ke objek tetingkap, jadi a = 1, jadi pulangannya Nilai a = 1; this jadi output akhir ialah 1 2 = 3

5 Fungsi panggilan pemasa dan penunda

Dalam fungsi panggilan pemasa dan penunda, Objek konteks ialah objek tetingkap, dan <.> bahagian dalam menunjuk ke objek tetingkap

this Mari kita fahami melalui contoh:

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);

di sini Fungsi panggilan ialah
, yang dipanggil oleh penunda. Ia akan berjalan selepas 2s, jadi setTimeoutnya menghala ke objek tetingkap dan mengeluarkan 7obj.funthisJika kita menulis seperti ini, ia akan mengeluarkan Apa?

let obj = {
    a : 1,
    b : 2,
    fun : function() {
        console.log(this.a + this.b);
    }}var a = 3;var b = 4;setTimeout(function() {
    obj.fun();}, 2000);

此时，setTimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象；
在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3

6. 事件处理函数

事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素
即：

DOM元素.onclick = function() {
    这里的上下文就是 DOM元素，this指向DOM元素};

让我们来通过一个例子来理解一下：

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>事件处理函数</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            float: left;
            border: 1px solid #000;
            margin-right: 10px;
        }
    </style>
    <p></p>
    <p></p>
    <p></p>

    <script>
        function show() {
            alert("You click " + this.id);
        }

        let box1 = document.getElementById(&#39;box1&#39;);
        let box2 = document.getElementById(&#39;box2&#39;);
        let box3 = document.getElementById(&#39;box3&#39;);

        box1.onclick = show;
        box2.onclick = show;
        box3.onclick = show;
    </script>

当我们点击构建出来的三个盒子时，弹出的对话框中会输出对应的盒子 id
因为事件处理函数中，this指向的就是对应的DOM 元素

【相关推荐：javascript学习教程】

Atas ialah kandungan terperinci Fahami betul-betul masalah penunjuk ini dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!