Artikel yang menerangkan masalah penunjuk ini dalam js (dengan kod)

Dalam artikel sebelumnya "Petua Pertengahan Musim Luruh: Cara menggunakan CSS untuk merealisasikan revolusi bumi dan bulan (Koleksi) ", saya memperkenalkan anda cara menggunakan CSS untuk menyedari revolusi bumi dan bulan. Artikel berikut akan membantu anda memahami masalah penunjuk ini dalam js Ia mempunyai nilai rujukan tertentu.

Masalah yang menonjol dalam JS ini

Percayalah, selagi anda mengingati 7 langkah dalam artikel ini, anda boleh menguasai sepenuhnya masalah itu dalam JSthistitik.

Baca formula dahulu: fungsi anak panah, baharu, ikat, gunakan dan panggil, Titik Obj (obj.), panggilan terus, bukan dalam fungsi.

Mengikut susunan formula, selagi salah satu adegan sebelumnya dipenuhi, anda boleh menentukan arah this.

Seterusnya, ia akan diterangkan secara terperinci dalam susunan formula Kod sampel dalam artikel ini semuanya dijalankan dalam Chrome konsol Console.

Terdapat latihan yang disediakan dengan teliti pada akhir artikel untuk menguji pencapaian pembelajaran anda, jangan lupa mencuba~

1. Fungsi anak panah

Fungsi anak panah pertama adalah Kerana thisnya tidak akan diubah, selagi fungsi semasa adalah fungsi anak panah, tidak perlu melihat peraturan lain. Fungsi anak panah

this ialah tempat this luar menghala apabila ia dicipta. Terdapat dua perkara penting di sini:

1 Apabila mencipta fungsi anak panah, arah thisnya telah ditentukan.

2. this dalam fungsi anak panah menghala ke luar this.

Jadi untuk mengetahui this fungsi anak panah, anda mesti terlebih dahulu mengetahui arah lapisan luar this, dan anda perlu terus menggunakan formula tujuh langkah di lapisan luar.

2. baru

Apabila menggunakan kata kunci baharu untuk memanggil fungsi, ini dalam fungsi mestilah objek baharu yang dicipta oleh JS.

Pembaca mungkin mempunyai soalan, "Jika kekunci new digunakan untuk memanggil fungsi anak panah, adakah this fungsi anak panah akan diubah suai?".

Mari cuba pada konsol.

func = () => {} 
new func() // throw error

Seperti yang anda boleh lihat dari konsol, fungsi anak panah tidak boleh digunakan sebagai pembina, jadi ia tidak boleh dilaksanakan bersama dengan new.

3. bind

bind merujuk kepada Function.prototype.bind(Alamat terperinci: https://developer.mozilla.org/zh-CN/docs/Web/). JavaScript /Reference/Global_Objects/Function/bind

Apabila mengikat beberapa kali, hanya nilai ikatan pertama akan dikenali

Titik rawan ralat

function func() {
  console.log(this)
}

func.bind(1).bind(2)() // 1

Dalam fungsi anak panah ini tidak akan diubah suai

func = () => {
  // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」
  console.log(this)
}

func.bind(1)() // Window，口诀 1 优先

bind dan baru

mudah untuk membuat kesilapan

function func() {
  console.log(this, this.__proto__ === func.prototype)
}

boundFunc = func.bind(1)
new boundFunc() // Object true，口诀 2 优先

4

dan Parameter pertama apply() sentiasa call() Perbezaannya ialah apabila dipanggil melalui this, parameter sebenar diletakkan dalam tatasusunan, manakala apabila dipanggil melalui apply, parameter sebenar. parameter dipisahkan dengan koma. call

Ini tidak akan diubah suai dalam fungsi anak panah

Titik terdedah ralat

func = () => {
  // 这里 this 指向取决于外层 this，参考口诀 7 「不在函数里」
  console.log(this)
}

func.apply(1) // Window，口诀 1 优先

Ini tidak akan diubah suai dalam fungsi bind

Ralat terdedah titik

function func() {
  console.log(this)
}

boundFunc = func.bind(1)
boundFunc.apply(2) // 1，口诀 3 优先

5. Obij point (obj.)

function func() {
  console.log(this.x)
}

obj = { x: 1 }
obj.func = func
obj.func() // 1

Tidak perlu untuk contoh kod di sini dan fungsi bind mempunyai keutamaan yang lebih tinggi. anda boleh mencubanya sendiri.

6. Panggilan terus

Apabila fungsi tidak memenuhi senario sebelumnya dan dipanggil terus,

akan menunjuk ke objek global. Objek global adalah this dalam persekitaran penyemak imbas dan Window dalam persekitaran Node.js. Global

Mari kita ambil contoh mudah dahulu.

function func() {
  console.log(this)
}

func() // Window

Mari kita ambil contoh yang rumit

luar berfungsi untuk mengelirukan. outerFunc

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

  function func() {
    console.log(this) // Window
  }

  func()
}

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

7. Tiada dalam fungsi

tiada dalam fungsi, ia boleh berada dalam tag

penyemak imbas atau dalam fail modul <script />. Node.js

1. Dalam teg

, <script /> menunjuk kepada this. Window

2. Dalam fail modul

, Node.js menunjuk ke objek eksport lalai this, iaitu Module. module.exports

Mod tidak ketat

Mod ketat telah dicadangkan dalam

. Sebelum spesifikasi ES5, iaitu, dalam mod tidak ketat, ES5 tidak boleh menjadi this atau undefined. Jadi** dalam mod tidak ketat, melalui formula tujuh langkah di atas, jika disimpulkan bahawa null menunjuk ke this atau undefined, maka null akan menunjuk ke objek global. **Objek global adalah this dalam persekitaran penyemak imbas dan Window dalam persekitaran Node.js. Global

Contohnya, dalam kod berikut, dalam mod tidak ketat,

semua menunjuk ke objek global. this

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

Hasil pelaksanaan dalam mod tidak ketat ialah:

在严格模式下，执行同样的代码进行对比。记住要一次性将所有代码复制粘贴到控制台中，才能运行在严格模式下（因为第一行 "use strict" 才会对后面的代码生效）。

"use strict"

function a() {
  console.log("function a:", this)
  ;(() => {
    console.log("arrow function: ", this)
  })()
}

a()

a.bind(null)()

a.bind(undefined)()

a.bind().bind(2)()

a.apply()

严格模式下执行结果为：

七步口诀在严格模式下和非严格模式下都是完备的，只是在非严格模式下null或undefined会被转换为全局对象。所以我没有将这点列入口诀中。

做题复习

先背诵口诀再做题，“箭头函数、new、bind、apply和call、欧比届点（obj.）、直接调用、不在函数里”。

1. 下面代码执行后，func.count 值为多少？

function func(num) {
  this.count++
}

func.count = 0
func(1)

答案

func.count值为 0。

按照口诀，func()调用时属于第 6 类「直接调用」。在非严格模式下，this指向全局对象。this跟func 一点关系都没有，所以 func.count保持不变so easy。

2. 以下箭头函数中 this 指向谁呢？

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

    return arrowFunc
  },

  _name: "obj",
}

obj.func()()

func = obj.func
func()()

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

obj.func.bind()()()

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

答案

// obj
// undefined
// newObj
// undefined
// bindObj

是不是很简单，你学废了吗？

推荐学习：JS视频教程

Atas ialah kandungan terperinci Artikel yang menerangkan masalah penunjuk ini dalam js (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!