Bolehkah anda memahami masalah utama JS ini? lihat artikel ini

Bolehkah anda memahami masalah penudingan JavaScript ini? Artikel berikut akan bercakap dengan anda tentang masalah yang menjengkelkan ini, saya harap ia akan membantu anda!

Penunjuk ini

Dalam pelbagai cara kita telah melihat bagaimana untuk menilai penunjuk ini, " ini Titik akhir ialah objek yang memanggilnya " Ayat ini dianggap sebagai inti, tetapi dalam menghadapi pelbagai situasi, kita mudah keliru. Memandangkan untuk menggabungkan pemahaman saya tentang pelbagai situasi, saya mengemukakan ayat "Anak panah, masa dan struktur, perhatian khusus dalam situasi khas, panggilan biasa untuk memberi perhatian kepada nombor titik, titik berikut tidak melihat ke hadapan , dan kemudian menilai berdasarkan prinsip terdekat, dan akhirnya yang tinggal It’s just window”. [Cadangan berkaitan: Tutorial pembelajaran javascript]

Fungsi anak panah

Fungsi anak panah itu sendiri tidak mempunyai ini, jadi ia tidak wujud perubahan ini, ia menangkap bahagian luar ini Gunakan

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

untuk menghuraikan: Pertama, objek a memanggil fungsi fn, jadi fungsi fn ini menghala ke objek a, dan kemudiannya anak panah menangkap bahagian luar ini, jadi ia bukan dalam setTimeout ini, tetapi ini bagi fungsi fn, jadi kita akhirnya mendapat nama dalam objek

pemasa .

untuk bahagian dalam fungsi tunda Ini daripada fungsi panggil balik menghala ke tetingkap objek global

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(function (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

Analisis: Pertama, objek a memanggil fungsi fn, dan kemudian fungsi panggil balik dalam setTimeout di sini ialah fungsi tanpa nama, yang merupakan fungsi biasa, kemudian ini dalam fungsi tanpa nama menunjukkan kepada Ia adalah tetingkap

var name = "windowsName";
var b={
  name: "setTimeoutName"
}
var a = {
    name: "Cherry",
    fn() {
      setTimeout((function (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

Analisis: Pertama, objek a memanggil fungsi fn, dan kemudian fungsi panggil balik dalam setTimeout di sini ialah fungsi tanpa nama, iaitu fungsi biasa Kemudian ini dalam fungsi tanpa nama menghala ke tetingkap, tetapi bind digunakan Tukar titik ini fungsi tanpa nama kepada objek b, jadi pada akhirnya nama dalam objek b

pembina

ini dalam pembina menunjuk untuk mencipta objek Instance,

Nota: Jika objek dikembalikan dalam pembina, tidak akan ada objek contoh baharu apabila dibuat, tetapi objek yang dikembalikan

function fn(){
  this.age = 37;
}

var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38

Analisis: Di sini kita mencipta objek contoh a melalui pembina, yang bersamaan dengan membuka tempat baharu dan menyalin kandungan pembina, dan kita mempunyai objek a Pada masa ini, ini menunjukkan kepada objek a tidak menjejaskan fungsi

penghakiman nombor

menilai penunjuk ini melalui . dan mengikut prinsip kedekatan

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); 
      }
  }
}
a.b.fn(); //12

analisis: Objek a memanggil fungsi fn objek b . di hadapan fungsi fn, jadi yang paling dekat ialah objek b, jadi fungsi fn ini menghala ke objek b, dan perkara terakhir yang diperolehi ialah umur

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); //undefined
      }
  }
}
var c = {
  age:20,
}

var d = {
  age:30,
}
a.b.fn.bind(c).bind(d)(); //20

Analisis: Objek a memanggil fungsi fn objek b dan kemudian menggunakan bind untuk menukar arah ini Pada masa ini, terdapat

sebelum dan selepas fn, lihat sahaja pada yang terakhir, dan kemudian bind terkini menukar titik ini kepada c, kemudian titik fungsi fn ini menghala ke objek c, dan apa yang anda dapat ialah umur objek c..

Bersenam

function outerFunc() {
   console.log(this) // { x: 1 }
   function func() {
    console.log(this) // Window 
   }
   func()
} 

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

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()()  //undefined

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

obj.func.bind()()() //undefined

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

guna, panggil, ikat

Gunakan fungsi guna, panggil dan ikat untuk menukar penunjuk ini. Dalam contoh di atas,

digunakan

Perbezaannya

thisArg , [ argsArray]call(thisArg, arg1, arg2, ...) perbezaan antara fungsi apply dan call terletak pada parameter yang diluluskan selepas ini, yang diluluskan dalam apply ialah tatasusunan, dan apa yang diluluskan dalam panggilan ialah parameter yang diperluaskan

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

Kemudian fungsi bind mencipta fungsi baharu, yang perlu dipanggil secara manual

fungsi baharu ini ditentukan sebagai parameter pertama
• , dan parameter selebihnya akan digunakan sebagai parameter fungsi baharu untuk digunakan semasa memanggil thisbind()

seperti Jika terdapat sebarang ralat, sila betulkan! ! Terima kasih semua kerana membaca!

Rujukan

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

disediakan semula tutorial video:

bahagian hadapan web

]

Atas ialah kandungan terperinci Bolehkah anda memahami masalah utama JS ini? lihat artikel ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!