Memahami Prototaip JavaScript: Kunci untuk Menguasai OOP

Oleh kerana JavaScript ialah bahasa berasaskan prototaip, objek dalam bahasa itu mewarisi atribut dan fungsi daripada prototaip. Corak reka bentuk ini penting untuk memahami pengaturcaraan berorientasikan objek (OOP) JavaScript. Memahami prototaip dan cara menggunakannya adalah penting jika anda ingin mengetahui lebih lanjut tentang JavaScript. Siaran ini akan membincangkan idea prototaip, cara menggunakannya dan cara ia membenarkan kod yang lebih berkesan, boleh diguna semula dan dioptimumkan.

Apakah Objek dalam JavaScript?

Sebelum beralih kepada prototaip, mari kita jelaskan apa itu objek JavaScript. Objek JavaScript pada asasnya ialah koleksi pasangan nilai kunci. Objek JavaScript adalah fleksibel dan boleh dibuat dalam pelbagai cara, termasuk dengan fungsi kilang, fungsi pembina dan literal objek.

Mencipta Objek

1. Objek Tersurat

Cara paling mudah untuk mencipta objek ialah menggunakan literal objek:

let obj = {
    name: 'John',
    age: 30
};

2. Fungsi Pembina

Fungsi pembina digunakan untuk mencipta contoh objek dengan sifat yang serupa:

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

let person1 = new Person('Alice', 25);

3. Fungsi Kilang

Fungsi kilang mengembalikan objek baharu setiap kali ia dipanggil:

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

Mengembalikan Objek daripada Fungsi

Fungsi JavaScript berkuasa kerana ia boleh mengembalikan objek, yang berguna untuk mencipta kejadian dengan sifat dan kaedah tertentu.

Contoh: Mengembalikan Objek daripada Fungsi

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

Mengoptimumkan Penciptaan Objek dengan Prototaip

Salah satu aspek utama sifat berasaskan prototaip JavaScript ialah keupayaan untuk menentukan kaedah pada prototaip objek. Ini mengoptimumkan penggunaan memori dengan membenarkan berbilang objek berkongsi kaedah yang sama, dan bukannya mentakrifkannya untuk setiap objek secara individu.

Contoh Pengoptimuman Memori

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

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

Dalam contoh di atas, kedua-dua orang1 dan orang2 berkongsi kaedah getDetails yang sama, yang ditakrifkan pada prototaip. Ini bermakna mereka masing-masing tidak mempunyai salinan kaedah mereka sendiri, menjimatkan memori.

Object.create() dan Prototaip

Kaedah Object.create() membolehkan anda mencipta objek baharu yang mewarisi daripada prototaip tertentu.

Contoh: Menggunakan Object.create()

let personProto = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

let person = Object.create(personProto);
person.name = 'Charlie';
person.greet(); // Hello, my name is Charlie

Dalam kes ini, orang mewarisi daripada personProto, bermakna ia mempunyai akses kepada kaedah salam.

Memahami Prototaip secara Mendalam

Setiap objek dalam JavaScript mempunyai prototaip, yang juga merupakan objek. Objek prototaip ini boleh mempunyai sifat dan kaedahnya sendiri, yang diwarisi oleh objek. Rantaian pewarisan ini dikenali sebagai rantai prototaip.

Contoh: Prototaip dalam Tindakan

let obj = {
    name: 'John',
    age: 30
};

Dalam contoh ini, anjing ialah contoh Haiwan, dan ia mewarisi kaedah bercakap daripada Animal.prototype.

Fungsi Pembina dan Prototaip

Fungsi pembina ialah cara biasa untuk mencipta berbilang kejadian jenis objek yang sama. Fungsi ini berfungsi bersama prototaip untuk berkongsi kaedah merentas kejadian.

Contoh: Fungsi Pembina dengan Kaedah Prototaip

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

let person1 = new Person('Alice', 25);

Di sini, kedua-dua book1 dan book2 berkongsi kaedah getDetails, terima kasih kepada pewarisan prototaip.

Kata Kunci baharu dan Kata Kunci ini

Apabila anda menggunakan kata kunci baharu dengan fungsi pembina, ia mencipta tika baharu objek dan mengikat kata kunci ini kepada tika baharu.

Contoh: Menggunakan Kata Kunci baharu

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

Dalam kes ini, kata kunci baharu mencipta tika baharu Laptop, dan ini merujuk kepada tika itu dalam pembina.

Sintaks Kelas ES6

Dalam ES6, JavaScript memperkenalkan sintaks kelas, yang menyediakan cara yang lebih mudah dan biasa untuk menentukan fungsi dan prototaip pembina. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa kelas dalam JavaScript hanyalah gula sintaktik berbanding model pewarisan berasaskan prototaip.

Contoh: Menggunakan Kelas

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

Di sini, kelas Person berkelakuan serupa dengan fungsi pembina dan contoh kaedah prototaip, tetapi dengan sintaks yang lebih ringkas.

Tatasusunan dan Prototaip

Tatasusunan JavaScript ialah objek, dan seperti semua objek, ia mewarisi sifat dan kaedah daripada prototaipnya, Array.prototype. Inilah sebabnya mengapa anda boleh memanggil kaedah khusus tatasusunan seperti tolak, pop dan kurangkan pada tatasusunan.

Contoh: Bekerja dengan Tatasusunan dan Prototaip

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

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

Dalam contoh ini, kami melanjutkan Array.prototype untuk memasukkan kaedah jumlah, yang dikongsi oleh semua tika tatasusunan.

Kesimpulan

Asas paradigma pengaturcaraan berorientasikan objek JavaScript ialah prototaip. Anda boleh menulis kod yang lebih berkesan dan boleh diguna semula jika anda memahami cara ia beroperasi. Berikut adalah kesimpulan utama:

1. Objek ialah pasangan nilai kunci, dicipta menggunakan literal, pembina atau fungsi kilang.
2. Prototaip membenarkan objek berkongsi kaedah dan sifat, meningkatkan kecekapan memori.
3. Gunakan Object.create() untuk mencipta objek dengan prototaip tertentu.
4. Fungsi pembina dan kelas membantu mencipta berbilang tika jenis objek, dengan kaedah yang ditakrifkan pada prototaip.
5. Kata kunci baharu mencipta tika dan ini merujuk kepada tika dalam pembina.
6. Array mewarisi kaedah daripada Array.prototype, iaitu objek itu sendiri.

Anda boleh menggunakan sepenuhnya ciri berorientasikan objek JavaScript dan menulis kod yang boleh digunakan semula dan berkesan dengan menjadi mahir dengan prototaip. Berseronoklah dengan pengekodan anda!

Ikuti saya di : Github Linkedin

Atas ialah kandungan terperinci Memahami Prototaip JavaScript: Kunci untuk Menguasai OOP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!