`ini` dalam JavaScript Explained

Ini ialah soalan #5 siri Soalan Temuduga Bahagian Depan. Jika anda ingin meningkatkan tahap persediaan anda atau kekal dikemas kini secara umum, pertimbangkan untuk mendaftar di Frontend Camp.

---

Kata kunci ini sentiasa merujuk kepada konteks semasa fungsi atau skrip.

ini adalah topik yang mengelirukan bagi kebanyakan kita (pun intended), tetapi ia tidak semestinya begitu. Anda hanya perlu mengingati beberapa peraturan.

Mengikut peraturan, mengikut keutamaan, menentukan cara nilai ini ditentukan semasa masa jalan:

Penggunaan dalam pembina Fungsi

Jika fungsi dipanggil dengan kata kunci baharu, bahagian dalam fungsi ini merujuk kepada contoh objek yang baru dibuat.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

Secara eksplisit mengikat ini

call(), apply() atau bind() boleh digunakan untuk menetapkan nilai ini secara eksplisit di dalam fungsi.

• call() dan apply() digunakan apabila fungsi perlu digunakan dengan segera.
• bind() mengembalikan fungsi baharu untuk digunakan kemudian.

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

Penggunaan dalam panggilan kaedah

Jika fungsi ialah kaedah objek, maka ini merujuk kepada objek.

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

Penggunaan dalam panggilan fungsi Biasa (Seruan fungsi percuma)

Jika fungsi digunakan dalam konteks global, maka ini merujuk kepada objek global (dalam mod tidak ketat) atau tidak ditentukan (dalam mod ketat).

Untuk penyemak imbas, objek global ialah tetingkap.

// Browser

function showThis() {
  console.log(this);
}

showThis(); // Window { open: fn, alert: fn, ... }

Apabila fungsi diisytiharkan dalam konteks global, ia menjadi hak milik objek tetingkap. Memanggil window.showThis() akan menghasilkan hasil yang sama. Inilah sebabnya mengapa ia merupakan penyeruan kaedah tersirat. (Rujuk peraturan di atas yang ini)

Jika berbilang peraturan dikenakan, maka peraturan dengan keutamaan yang lebih tinggi akan digunakan.

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

Dalam contoh di atas, dua peraturan sedang digunakan: Penyebutan kaedah dan Pengikatan Eksplisit. Memandangkan pengikatan eksplisit mempunyai keutamaan yang lebih tinggi, ia dapat menetapkan nilai ini.

Fungsi anak panah

Fungsi anak panah tidak mengikut peraturan yang dinyatakan di atas kerana ia tidak mempunyai nilai ini sendiri. Mereka memilih nilai ini daripada skop ibu bapa.

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

Inilah sebabnya anda harus mengelak daripada menggunakan fungsi anak panah untuk pendengar acara. Pendengar acara mengikat elemen HTML pada nilai ini tetapi jika pengendali ialah fungsi anak panah, ia tidak boleh dilakukan.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

Ringkasan

1. Dalam pembina fungsi(Orang baharu()), ini akan menjadi contoh objek yang baru dibuat.
2. Jika terikat secara eksplisit menggunakan bind(), call() atau apply(), ini di dalam fungsi akan ditetapkan kepada nilai yang disediakan.
3. Di dalam kaedah, ini ditetapkan kepada objek yang merupakan sifat kaedah.
4. Di dalam seruan fungsi percuma, ini menunjukkan objek global (mod tidak ketat) atau tidak ditentukan (mod ketat).
5. Jika berbilang peraturan dikenakan, peraturan yang dinyatakan dahulu(1-4) akan digunakan.
6. Fungsi anak panah tidak mempunyai fungsinya sendiri. Nilainya dipilih daripada skop induk.

---

Suka dengan apa yang baru anda baca? Pertimbangkan untuk menyertai senarai tunggu di Frontend Camp ✌️

Atas ialah kandungan terperinci `ini` dalam JavaScript Explained. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!