Menyelam Lebih Dalam ke baharu dan ini dalam JavaScript: Membuka Kunci Kuasa Pengaturcaraan Berorientasikan Objek

JavaScript ialah bahasa yang berkuasa dan fleksibel dengan akar dalam pengaturcaraan berfungsi dan keupayaan untuk pengaturcaraan berorientasikan objek (OOP). Dua konsep kritikal yang terletak di tengah-tengah OOP dalam JavaScript adalah baharu dan ini. Walaupun kata kunci ini kelihatan mudah, kata kunci tersebut mempunyai nuansa yang boleh mencabar untuk dikuasai, walaupun untuk pembangun yang berpengalaman. Dalam catatan blog ini, kami akan menyelami lebih mendalam cara kerja baharu dan ini dalam JavaScript, membahagikan tingkah laku mereka dengan contoh dan amalan terbaik.

Jadual Kandungan

Pengenalan kepada ini dalam JavaScript

Pada terasnya, ini ialah kata kunci yang bergantung kepada konteks yang merujuk kepada objek dari mana sesuatu fungsi dipanggil. Tidak seperti beberapa bahasa lain yang terikat secara statik, dalam JavaScript, nilai ini boleh berubah bergantung pada cara dan tempat sesuatu fungsi digunakan.

Dalam istilah mudah:

• Skop Global: Dalam konteks global (atau mod tidak ketat), ini merujuk kepada objek global (tetingkap dalam penyemak imbas, global dalam Node.js).
• Kaedah Dalam: Dalam kaedah objek, ini merujuk kepada objek yang memiliki kaedah tersebut.
• Pengendali Acara: Dalam pendengar acara, ini biasanya merujuk kepada elemen yang mencetuskan acara.

Kami akan meneroka konteks ini dengan contoh kemudian dalam blog.

Memahami baharu dalam JavaScript

Kata kunci baharu dalam JavaScript digunakan untuk mencipta contoh objek yang ditentukan pengguna atau objek terbina dalam seperti Tarikh, Tatasusunan, dsb. Apabila anda menggunakan baharu dengan fungsi pembina, ia mencipta objek baharu dan mengikatnya pada objek itu , pada asasnya memautkannya kepada prototaip.

Contohnya:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

Apabila baharu digunakan:

1. Objek kosong baharu dicipta.
2. Kata kunci ini di dalam pembina ditetapkan untuk merujuk objek baharu ini.
3. Fungsi melaksanakan kodnya dan memberikan sifat kepada ini.
4. Objek dipautkan kepada prototaip pembina, membolehkan pewarisan.
5. Fungsi mengembalikan ini melainkan objek dikembalikan secara eksplisit.

Cara baharu Berfungsi Di Bawah Tudung

Mari kita simulasi tingkah laku baharu menggunakan fungsi tersuai:

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

Fungsi ini mengikut langkah yang sama seperti kata kunci baharu, menunjukkan mekanik di belakang tabir.

Contoh ini dalam Pelbagai Konteks

1. Konteks Global

Dalam konteks global (mod tidak ketat), ini merujuk kepada objek global (tetingkap dalam penyemak imbas).

console.log(this === window); // true

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

showThis();

Dalam mod ketat ('gunakan ketat';), ini tidak ditentukan dalam konteks global:

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

1. Konteks Kaedah Objek

Apabila ini digunakan di dalam kaedah objek, ia merujuk kepada objek yang memiliki kaedah tersebut.

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

Di sini, ini merujuk kepada objek orang kerana ia adalah konteks di mana kaedah sapa dipanggil.

1. Konteks Fungsi Pembina

Dalam fungsi pembina, ini merujuk kepada objek yang baru dibuat.

console.log(this === window); // true

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

showThis();

1. Konteks Pengendali Acara Dalam pengendali acara, ini merujuk kepada elemen DOM yang mencetuskan acara.

"use strict";

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

showThis();

Apabila menggunakan fungsi anak panah dalam pendengar acara, ini terikat secara leksikal dan tidak merujuk kepada elemen:

const person = {
  name: "Alice",
  greet() {
    console.log(this.name); // 'Alice'
  },
};

person.greet();

Amalan Terbaik dan Perangkap Biasa

1. Fungsi Anak panah dan ini: Fungsi anak panah tidak mengikat ini sendiri; sebaliknya, mereka mewarisi ini daripada konteks leksikal sekeliling. Ini boleh berguna dalam situasi seperti pengendali acara atau panggil balik di mana anda ingin mengekalkan rujukan kepada skop induk.

function Animal(type) {
  this.type = type;
}

const dog = new Animal("Dog");
console.log(dog.type); // Dog

1. Pengikatan Eksplisit dengan .call(), .apply(), dan .bind(): Anda boleh mengawal nilai ini secara manual menggunakan kaedah ini. Contohnya:

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

button.addEventListener("click", function () {
  console.log(this); // the button element
});

1. Elakkan menggunakan ini dalam fungsi global: Secara amnya adalah amalan yang baik untuk mengelakkan perkara ini dalam fungsi global, kerana ia boleh membawa kepada tingkah laku yang tidak dijangka, terutamanya dalam mod ketat.

2. Sintaks Kelas: Sejak ES6, menggunakan sintaks kelas menyediakan cara yang lebih intuitif untuk mentakrifkan fungsi pembina dengan ini dan baharu.
   

button.addEventListener("click", () => {
  console.log(this); // refers to the outer scope (e.g., window)
});

Kesimpulan

Kata kunci baharu dan ini memainkan peranan penting dalam paradigma berorientasikan objek JavaScript, yang membolehkan penciptaan dan pengurusan objek serta kelakuannya. Memahami cara ini berfungsi dalam konteks yang berbeza dan cara contoh binaan objek baharu adalah penting untuk menulis kod JavaScript yang teguh dan berskala. Dengan menguasai konsep ini, anda boleh mengelakkan perangkap biasa dan menulis kod yang lebih bersih dan boleh diselenggara.

Teruskan percubaan dan tulis contoh untuk mengukuhkan pemahaman anda tentang konsep teras JavaScript ini!

Seronok membaca? Jika anda mendapati artikel ini bernas atau membantu, pertimbangkan untuk menyokong kerja saya dengan membelikan saya kopi. Sumbangan anda membantu memacu lebih banyak kandungan seperti ini. Klik di sini untuk menjamu saya dengan kopi maya. Ceria!

Atas ialah kandungan terperinci Menyelam Lebih Dalam ke baharu dan ini dalam JavaScript: Membuka Kunci Kuasa Pengaturcaraan Berorientasikan Objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!