Bisakah Anda memahami masalah penunjuk JS ini? lihatlah artikel ini

Cara cepat memulai dengan VUE3.0: Pelajari

penunjukan ini.

Dalam berbagai perkenalan yang telah kita lihat tentang cara menentukan metode penunjukan ini, kalimat "ini pada akhirnya menunjuk ke objek yang memanggilnya" dianggap sebagai intinya, namun dalam menghadapinya Kita cenderung bingung menghadapi berbagai situasi. Berdasarkan pemahaman saya tentang berbagai situasi, saya mengajukan kalimat : "Panah, waktu dan struktur, lihat situasi khusus, lihat nomor poin untuk panggilan biasa, jangan lihat ke depan untuk poin selanjutnya, lalu menilai berdasarkan prinsip terdekat, dan yang tersisa terakhir adalah jendela." .

Fungsi panah

Fungsi panah itu sendiri tidak memiliki this, jadi tidak ada perubahan this. Fungsi ini menangkap bagian luar this menggunakan

var name = "windowsName";
var a = {
    nama: "Ceri",
    fn() {
      setWaktu habis(()=>{
        console.log(ini.nama); 
      },0)
    }
}

a.fn() //Analisis ceri

: Pertama, objek a memanggil fungsi fn, jadi fungsi fn ini menunjuk ke objek a, lalu panah menangkap bagian luar this, lalu bukan ini di setTimeout, tapi ini dari fungsi fn, jadi pada akhirnya Dapatkan nama di objek a.

Pengatur waktu

this dari fungsi panggilan balik di dalam fungsi penundaan menunjuk ke objek global window

var name = "windowsName";
var a = {
    nama: "Ceri",
    fn() {
      setTimeout(fungsi (){
        console.log(ini.nama); 
      },0)
    }
}

a.fn() //analisiswindowsName

: Pertama, objek a memanggil fungsi fn, dan kemudian fungsi panggilan balik di setTimeout di sini adalah fungsi anonim, yang merupakan fungsi biasa. Kemudian fungsi anonim ini menunjuk ke window

var name = "Namajendela";
var b={
  nama: "setTimeoutName"
}
var a = {
    nama: "Ceri",
    fn() {
      setTimeout((fungsi (){
        console.log(ini.nama); 
      }).mengikat(b),0)
    }
}

a.fn() //analisis setTimeoutName

: Pertama, objek a memanggil fungsi fn, dan kemudian fungsi panggilan balik di setTimeout di sini adalah fungsi anonim, yang merupakan fungsi biasa. Kemudian fungsi anonim ini menunjuk ke jendela, tetapi gunakan bind untuk mengubah fungsi anonim. Ini menunjuk ke objek b, sehingga nama

konstruktor

di objek b akhirnya menunjuk ke objek instance yang dibuat di konstruktor.

Catatan: Jika sebuah objek dikembalikan di konstruktor, tidak akan ada instance baru objek saat dibuat, tetapi objek ini dikembalikan oleh

fungsi fn(){
  ini.usia = 37;
}

var a = fn baru();
konsol.log(a.usia); // 37
a.usia = 38;
konsol.log(fn); // { ini.umur = 37;
console.log(a.age); // 38

Analisis: Di sini kita membuat objek instance a melalui konstruktor, yang setara dengan membuka tempat baru dan menyalin konten konstruktor waktu, ini menunjuk ke objek. a, modifikasi kami terhadap konten di objek a tidak mempengaruhi lewatnya

penilaian nomor

. Nilailah poin ini dan ikuti prinsip kedekatan

var a = {.
  usia:10,
  B: {
      usia:12,
      fn(){
          console.log(ini.usia); 
      }
  }
}
abfn(); //12

Analisis: Objek a memanggil fungsi fn dari objek b. Ada dua . ​​di depan fungsi fn . Maka yang terdekat adalah objek b, jadi fungsi fn ini menunjuk ke objek b, dan benda terakhir yang diperoleh adalah umur b

var a = {
  usia:10,
  B: {
      usia:12,
      fn(){
          console.log(ini.usia); //tidak terdefinisi
      }
  }
}
var c = {
  usia:20,
}

var d = {
  usia:30,
}
abfn.bind(c).bind(d)(); //20

analisis: Objek a . fungsi fn dari objek b dan kemudian menggunakan bind untuk mengubah arahnya. terlepas dari sebelumnya . Lihat saja bagian belakangnya, lalu pengikatan terbaru mengubah titik ini menjadi c, maka titik fungsi fn ini adalah objek c, dan yang Anda dapatkan adalah

latihan

outerFunc() {

   konsol.log(ini) // { x: 1 }
   fungsi fungsi() {
    console.log(ini) // Jendela 
   }
   seru()
} 

outerFunc.bind({ x: 1 })()

obj = {
  fungsi() {
    const panahFungsi = () => {
      console.log(ini._nama)
    }

    panah kembaliFunc
  },

  _nama: "obj",
}

obj.func()() //obj

func = obj.func
fungsi()() //tidak terdefinisi

obj.func.bind({ _name: "newObj" })()() //obj baru

obj.func.bind()()() //tidak terdefinisi

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

terapkan, panggil, ikat.

Gunakan fungsi terapkan, panggil, dan ikat untuk mengubah arah ini.Di atas ini

Perbedaan antara

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

antara fungsi apply dan call terletak pada parameter yang diteruskan setelah ini di apply adalah sebuah array, dan apa yang diteruskan dalam panggilan Itu adalah parameter yang diperluas

bind(thisArg[, arg1[, arg2[, ...]]])()

• dan fungsi bind membuat fungsi baru
• ini

pertama

• this bind() parameter lainnya akan digunakan sebagai parameter fungsi baru untuk digunakan saat memanggil.

! Terima kasih semuanya telah membaca!

Bahan referensi

https://juejin.cn/post/6946021671656488991#comment

[Rekomendasi tutorial video terkait: web front-end]

Di atas adalah bagaimana Anda dapat memahami masalah penunjuk JS ini? Simak detail artikel ini. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di website php China!