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 dalam JavaScript ditakrifkan menggunakan kata kunci fungsi. Nilai ini dalam fungsi ini bergantung pada bagaimana fungsi dipanggil. Berikut ialah beberapa contoh:
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).
'use strict'; function regularFunction() { console.log(this); } regularFunction(); // Logs undefined
Apabila fungsi dipanggil sebagai kaedah objek, ini merujuk kepada objek itu.
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.
Apabila fungsi digunakan sebagai pembina (dipanggil dengan kata kunci baharu), ini merujuk kepada contoh yang baru dibuat.
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.
Anda boleh mengikat ini secara eksplisit menggunakan panggilan, gunakan atau ikat.
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.
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.
Fungsi anak panah mewarisi ini daripada skop di mana ia ditakrifkan.
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.
'use strict'; const arrowFunction = () => { console.log(this); }; arrowFunction(); // Logs undefined
Tidak seperti fungsi biasa, fungsi anak panah tidak mendapat ini sendiri apabila dipanggil sebagai kaedah. Mereka mewarisi ini daripada skop yang disertakan.
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.
Apabila fungsi anak panah ditakrifkan di dalam fungsi lain, ia mewarisi ini daripada fungsi luar.
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.
Fungsi anak panah dalam pengendali acara mewarisi ini daripada skop leksikal sekeliling, bukan daripada elemen yang mencetuskan acara.
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.
The difference between regular functions and arrow functions lies in how they handle this:
To understand the behavior of this in JavaScript, you need to know the following concepts:
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!