Mengapa Kata Kunci \"ini\" Berkelakuan Berbeza dalam Fungsi Biasa dan Fungsi Anak Panah

Kata kunci ini dalam JavaScript boleh mengelirukan kerana ia berkelakuan berbeza dalam fungsi biasa dan fungsi anak panah. Dalam catatan blog ini, kami akan menerangkan cara ini berfungsi dalam kedua-dua jenis fungsi, meneroka sebab perbezaan ini wujud dan memberikan pengetahuan asas yang anda perlukan untuk memahami perkara ini dalam JavaScript.

Fungsi Biasa

Fungsi biasa dalam JavaScript ditakrifkan menggunakan kata kunci fungsi. Nilai ini dalam fungsi ini bergantung pada bagaimana fungsi dipanggil. Berikut ialah beberapa contoh:

1. Konteks Global

• Mod Tidak Tegas:

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

  regularFunction(); // Logs the global object (window in browsers)

• Penjelasan: Dalam mod tidak ketat, apabila fungsi dipanggil dalam konteks global (bukan sebagai kaedah objek), ini merujuk kepada objek global (tetingkap dalam pelayar atau global dalam Node .js).

  • Mod Tegas:

  'use strict';

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

  regularFunction(); // Logs undefined

• Penjelasan: Dalam mod ketat, ini kekal tidak ditentukan apabila fungsi dipanggil dalam konteks global, menyediakan persekitaran yang lebih selamat dengan menghalang pengubahsuaian tidak sengaja pada objek global.

2. Panggilan Kaedah

Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek itu.

• Contoh:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• Penjelasan: Dalam kes ini, ini menunjukkan kepada obj kerana fungsi itu dipanggil sebagai kaedah obj.

  • Mod Tegas: Tingkah laku kekal sama dalam mod ketat.

3. Panggilan Pembina

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

• Contoh:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• Penjelasan: Apabila dipanggil dengan yang baharu, di dalam fungsi Pembina Orang ini merujuk kepada contoh baharu yang dibuat. Setiap kejadian baharu (orang1 dan orang2) mendapat sifat namanya sendiri dan kaedah sayHello.

  • Mod Tegas: Tingkah laku kekal sama dalam mod ketat.

4. Pengikatan Eksplisit

Anda boleh mengikat ini secara eksplisit menggunakan panggilan, gunakan atau ikat.

• Contoh:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• Penjelasan: panggil dan gunakan serta-merta gunakan fungsi dengan set ini kepada obj, manakala bind mencipta fungsi baharu dengan terikat kekal ini kepada obj.

  • Mod Tegas: Tingkah laku kekal sama dalam mod ketat.

Fungsi Anak Panah

Fungsi anak panah, yang diperkenalkan dalam ES6, tidak mempunyai konteks ini sendiri. Sebaliknya, mereka mewarisi ini daripada skop sekeliling (leksikal). Ini menjadikan fungsi anak panah berguna dalam situasi tertentu.

1. Leksikal ini

Fungsi anak panah mewarisi ini daripada skop di mana ia ditakrifkan.

• Mod Tidak Tegas:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• Penjelasan: Fungsi anak panah tidak mempunyai ini sendiri; mereka menggunakan ini dari skop sekeliling. Di sini, ia merujuk kepada objek global kerana fungsi itu ditakrifkan dalam skop global.

  • Mod Tegas:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• Penjelasan: Dalam mod ketat, jika skop sekeliling adalah global, ini kekal tidak ditentukan sebagai diwarisi daripada skop sekeliling.

2. Panggilan Kaedah

Tidak seperti fungsi biasa, fungsi anak panah tidak mendapat ini sendiri apabila dipanggil sebagai kaedah. Mereka mewarisi ini daripada skop yang disertakan.

• Contoh:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• Penjelasan: Fungsi anak panah tidak mengikat ini sendiri tetapi mewarisinya daripada skop leksikal. Dalam contoh ini, ini merujuk kepada objek global atau tidak ditentukan dalam mod ketat, bukan obj.

  • Mod Ketat: Log tidak ditentukan, bukan obj.

3. Fungsi Anak Panah Di Dalam Fungsi Lain

Apabila fungsi anak panah ditakrifkan di dalam fungsi lain, ia mewarisi ini daripada fungsi luar.

• Contoh:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• Penjelasan: Dalam kes ini, di dalam fungsi anak panah ini merujuk kepada fungsi yang sama seperti dalam outerFunction, iaitu obj.

  • Mod Tegas: Tingkah laku kekal sama dalam mod ketat.

4. Fungsi Anak Panah dalam Pengendali Acara

Fungsi anak panah dalam pengendali acara mewarisi ini daripada skop leksikal sekeliling, bukan daripada elemen yang mencetuskan acara.

• Example:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.

  • Strict Mode: Logs undefined, not the button element.

Why These Differences?

The difference between regular functions and arrow functions lies in how they handle this:

• Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
• Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.

Key Concepts to Understand

To understand the behavior of this in JavaScript, you need to know the following concepts:

1. Execution Context: The context in which code is executed, affecting how this is determined.
2. Call-site: The location in code where a function is called, influencing the value of this in regular functions.
3. Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
4. Strict Mode: How strict mode changes the default behavior of this in certain contexts.

Summary

• Regular Functions: this is dynamic and determined by the call-site.
• Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.

Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.

Atas ialah kandungan terperinci Mengapa Kata Kunci \"ini\" Berkelakuan Berbeza dalam Fungsi Biasa dan Fungsi Anak Panah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!