Menguasai Kata Kunci &#this' dalam JavaScript: Jangan sekali-kali menoleh ke belakang lagi

Kata kunci ini JavaScript ialah konsep asas yang sering membingungkan pemula dan pembangun berpengalaman. Sifat dinamiknya boleh membawa kepada tingkah laku yang tidak dijangka jika tidak difahami dengan teliti. Panduan komprehensif ini bertujuan untuk menjelaskan perkara ini, meneroka pelbagai konteks, nuansa dan amalan terbaiknya, lengkap dengan contoh ilustrasi dan masalah yang mencabar untuk mengukuhkan pemahaman anda.

Pengenalan kepada ini

Dalam JavaScript, ini ialah kata kunci yang merujuk kepada objek dari mana kod semasa sedang dilaksanakan. Tidak seperti beberapa bahasa pengaturcaraan lain yang terikat secara statik, JavaScript ini ditentukan secara dinamik berdasarkan cara sesuatu fungsi dipanggil.

1. Konteks Global

Apabila tidak berada di dalam mana-mana fungsi, ini merujuk kepada objek global.

• Dalam Pelayar: Objek global ialah tetingkap.
• Dalam Node.js: Objek global adalah global.

Contoh

console.log(this === window); // true (in browser)
console.log(this === global); // true (in Node.js)

Nota: Dalam mod ketat ('gunakan ketat';), ini dalam konteks global kekal sebagai objek global.

2. Konteks Fungsi

I. Fungsi Biasa

Dalam fungsi biasa, ini ditentukan oleh cara fungsi dipanggil.

• Pengikatan Lalai: Jika fungsi dipanggil tanpa sebarang konteks, ini merujuk kepada objek global (atau tidak ditentukan dalam mod ketat).

Contoh:

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

showThis(); // Window object (in browser) or global (in Node.js)

• Ikatan Tersirat: Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek itu.

Contoh

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

Kita boleh menggunakan panggil, mohon atau ikat untuk menetapkan ini secara eksplisit.

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, I'm Bob"

II. Fungsi Anak Panah

Fungsi anak panah mempunyai leksikal ini, bermakna ia mewarisi ini daripada skop sekeliling pada masa penciptaannya.

Contoh

const person = {
  name: 'Charlie',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm undefined" (or global name if defined)

Penjelasan: Memandangkan fungsi anak panah tidak mempunyai ini sendiri, ini merujuk kepada objek global, bukan objek orang.

Penggunaan Betul dengan Fungsi Anak Panah:

const person = {
  name: 'Dana',
  greet: function() {
    const inner = () => {
      console.log(`Hello, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hello, I'm Dana"

Aspek Mencabar: Jika kaedah diperuntukkan kepada pembolehubah dan dipanggil, ini mungkin kehilangan konteks yang dimaksudkan.
Contoh

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this.value;
  }
};

console.log(calculator.add(5)); // 5
console.log(calculator.add(10)); // 15

const addFunction = calculator.add;
console.log(addFunction(5)); // NaN (in non-strict mode, this.value is undefined + 5)

3. Fungsi Pembina dan ini

Apabila fungsi digunakan sebagai pembina dengan kata kunci baharu, ini merujuk kepada contoh yang baru dibuat.

console.log(this === window); // true (in browser)
console.log(this === global); // true (in Node.js)

Nota Penting:
• Jika baharu tidak digunakan, ini mungkin merujuk kepada objek global atau tidak ditentukan dalam mod ketat.
• Pembina biasanya menggunakan huruf besar huruf pertama untuk membezakannya daripada fungsi biasa.

4. Ini dalam Pengendali Acara

Dalam pengendali acara, ini merujuk kepada elemen yang menerima acara.

Contoh

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

showThis(); // Window object (in browser) or global (in Node.js)

5. Ikatan Eksplisit dengan panggilan, gunakan dan ikat

JavaScript menyediakan kaedah untuk menetapkan nilai ini secara eksplisit:

• panggilan: Menjemput fungsi dengan set ini kepada argumen pertama, diikuti dengan argumen fungsi.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

• gunakan: Serupa dengan panggilan, tetapi menerima argumen sebagai tatasusunan.

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, I'm Bob"

• bind: Mengembalikan fungsi baharu dengan terikat ini pada hujah pertama.

const person = {
  name: 'Charlie',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm undefined" (or global name if defined)

Kes Penggunaan:

• Kaedah peminjaman daripada objek lain.
• Memastikan ini kekal konsisten dalam panggilan balik.

6. ini dalam Kelas

ES6 memperkenalkan kelas, yang menyediakan sintaks yang lebih jelas untuk fungsi dan kaedah pembina. Dalam kaedah kelas, ini merujuk kepada contoh.
Contoh:

const person = {
  name: 'Dana',
  greet: function() {
    const inner = () => {
      console.log(`Hello, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hello, I'm Dana"

Fungsi Anak Panah dalam Kelas:
Fungsi anak panah boleh digunakan untuk kaedah mewarisi ini daripada konteks kelas, berguna untuk panggilan balik.

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this.value;
  }
};

console.log(calculator.add(5)); // 5
console.log(calculator.add(10)); // 15

const addFunction = calculator.add;
console.log(addFunction(5)); // NaN (in non-strict mode, this.value is undefined + 5)

---

Perangkap Biasa dan Amalan Terbaik

I. Kehilangan Konteks ini

Apabila menghantar kaedah sebagai panggilan balik, konteks asal mungkin hilang.
Masalah

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // "Alice"

Penyelesaian
Gunakan bind untuk mengekalkan konteks.

<button>



<p><strong>Arrow Function Caveat:</strong><br>
Using arrow functions in event handlers can lead to this referring to the surrounding scope instead of the event target.<br>
<strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">button.addEventListener('click', () => {
  console.log(this); // Global object or enclosing scope
});

II. Menggunakan Fungsi Anak Panah Secara Tidak Wajar

Fungsi anak panah tidak mempunyai ciri ini sendiri, yang boleh membawa kepada tingkah laku yang tidak dijangka apabila digunakan sebagai kaedah.

Masalah

function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}

const person = { name: 'Eve' };
greet.call(person, 'Hello'); // "Hello, I'm Eve"

Penyelesaian
Gunakan fungsi biasa untuk kaedah objek.

greet.apply(person, ['Hi']); // "Hi, I'm Eve"

III. Mengelakkan Global ini

Menetapkan sifat pada objek global secara tidak sengaja boleh menyebabkan pepijat.

Masalah

const boundGreet = greet.bind(person);
boundGreet('Hey'); // "Hey, I'm Eve"

Penyelesaian
Gunakan mod ketat atau pengikatan yang betul.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a noise."

---

Konsep Lanjutan

I. ini dalam Fungsi Bersarang

Dalam fungsi bersarang, ini mungkin tidak merujuk kepada bahagian luar ini. Penyelesaian termasuk menggunakan fungsi anak panah atau menyimpannya dalam pembolehubah.
Contoh dengan Fungsi Anak Panah:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet = () => {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const john = new Person('John');
john.greet(); // "Hello, I'm John"

Contoh dengan Pembolehubah:

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName()); // undefined or global name

II. ini dengan Prototaip

Apabila menggunakan prototaip, ini merujuk kepada contoh.

console.log(this === window); // true (in browser)
console.log(this === global); // true (in Node.js)

Kesimpulan

Kata kunci ini dalam JavaScript ialah ciri serba boleh dan berkuasa yang, apabila difahami dengan betul, boleh meningkatkan keupayaan pengekodan anda.

---

10 Masalah Rumit untuk Menguasai ini

Untuk mengukuhkan pemahaman anda tentang perkara ini, atasi masalah mencabar berikut. Setiap masalah direka bentuk untuk menguji pelbagai aspek dan kes kelebihan kata kunci ini dalam JavaScript. Penyelesaian akhirnya.

Masalah 1: Output Misteri

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

showThis(); // Window object (in browser) or global (in Node.js)

Masalah 2: Kejutan Fungsi Anak Panah

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

Masalah 3: Mengikat ini dalam Panggilan Balik

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, I'm Bob"

Masalah 4: Menggunakan bind dengan betul

const person = {
  name: 'Charlie',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm undefined" (or global name if defined)

Masalah 5: ini dalam Fungsi Pembina

const person = {
  name: 'Dana',
  greet: function() {
    const inner = () => {
      console.log(`Hello, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hello, I'm Dana"

Masalah 6: Konteks Pengendali Acara

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this.value;
  }
};

console.log(calculator.add(5)); // 5
console.log(calculator.add(10)); // 15

const addFunction = calculator.add;
console.log(addFunction(5)); // NaN (in non-strict mode, this.value is undefined + 5)

Masalah 8: ini dalam Janji

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // "Alice"

Masalah 9: Merantai dengan ikatan

<button>



<p><strong>Arrow Function Caveat:</strong><br>
Using arrow functions in event handlers can lead to this referring to the surrounding scope instead of the event target.<br>
<strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">button.addEventListener('click', () => {
  console.log(this); // Global object or enclosing scope
});

Masalah 10: ini dengan Kelas dan Warisan

function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}

const person = { name: 'Eve' };
greet.call(person, 'Hello'); // "Hello, I'm Eve"

---

Penyelesaian kepada Masalah Rumit

Penyelesaian kepada Masalah 1:

Apabila getName ditugaskan kepada pembolehubah dan dipanggil tanpa sebarang konteks objek, ini akan menjadi lalai kepada objek global. Dalam mod tidak ketat, this.name merujuk kepada nama global, iaitu 'Global'. Dalam mod ketat, ini tidak akan ditentukan, yang membawa kepada ralat.

greet.apply(person, ['Hi']); // "Hi, I'm Eve"

Penyelesaian kepada Masalah 2:

Fungsi anak panah tidak mempunyai ini sendiri; mereka mewarisinya dari skop sekeliling. Dalam kes ini, skop sekeliling ialah konteks global, di mana this.name ialah 'Global'.

const boundGreet = greet.bind(person);
boundGreet('Hey'); // "Hey, I'm Eve"

Penyelesaian kepada Masalah 3:

Di dalam panggilan balik setInterval, ini merujuk kepada objek global (atau tidak ditentukan dalam mod ketat). Oleh itu, this.seconds sama ada menambah window.seconds atau melontarkan ralat dalam mod ketat. Pemasa.saat kekal 0.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a noise."

Penyelesaian kepada Masalah 4:

Selepas mengikat retrieveX ke modul, memanggil boundGetX() dengan betul menetapkan ini kepada modul.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet = () => {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const john = new Person('John');
john.greet(); // "Hello, I'm John"

Penyelesaian kepada Masalah 5:

Fungsi anak panah getModel mewarisi ini daripada pembina, yang merujuk kepada contoh kereta yang baru dibuat.

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName()); // undefined or global name

Penyelesaian kepada Masalah 6:

Dalam pengendali acara menggunakan fungsi biasa, ini merujuk kepada elemen DOM yang menerima acara, iaitu butang. Memandangkan butang itu tidak mempunyai sifat nama, this.name tidak ditentukan.

console.log(this === window); // true (in browser)
console.log(this === global); // true (in Node.js)

Penyelesaian kepada Masalah 7:

• Konsol.log pertama(nama.ini); inside outerFunc merujuk kepada obj, jadi ia mencetak 'Outer'.
• Konsol.log kedua(nama.ini); dalam innerFunc merujuk kepada objek global, jadi ia mencetak 'Global' atau tidak ditentukan dalam mod ketat.

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

showThis(); // Window object (in browser) or global (in Node.js)

Penyelesaian kepada Masalah 8:

Di dalam pembina Promise, ini merujuk kepada objek global (atau tidak ditentukan dalam mod ketat). Oleh itu, nilai ini tidak ditentukan (atau menyebabkan ralat dalam mod ketat).

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

Penyelesaian kepada Masalah 9:

Fungsi darab terikat dengan hujah pertama a sebagai 2. Apabila double(5) dipanggil, ia berkesan mengira darab(2, 5).

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, I'm Bob"

Penyelesaian kepada Masalah 10:

Dalam kaedah bercakap kelas Dog, panggilan balik setTimeout ialah fungsi biasa. Oleh itu, dalam panggilan balik ini merujuk kepada objek global, bukan contoh anjing. this.name 'tidak ditentukan' atau menyebabkan ralat jika nama tidak ditakrifkan secara global.

const person = {
  name: 'Charlie',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm undefined" (or global name if defined)

Untuk membetulkannya, gunakan fungsi anak panah:

const person = {
  name: 'Dana',
  greet: function() {
    const inner = () => {
      console.log(`Hello, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hello, I'm Dana"

Kini, ia log dengan betul:

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this.value;
  }
};

console.log(calculator.add(5)); // 5
console.log(calculator.add(10)); // 15

const addFunction = calculator.add;
console.log(addFunction(5)); // NaN (in non-strict mode, this.value is undefined + 5)

Atas ialah kandungan terperinci Menguasai Kata Kunci &#this' dalam JavaScript: Jangan sekali-kali menoleh ke belakang lagi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!