Rumah > hujung hadapan web > tutorial js > Pengenalan kepada pengaturcaraan berorientasikan objek JavaScript yang boleh difahami oleh orang baru sekalipun

Pengenalan kepada pengaturcaraan berorientasikan objek JavaScript yang boleh difahami oleh orang baru sekalipun

王林
Lepaskan: 2023-06-15 21:04:56
asal
977 orang telah melayarinya

JavaScript ialah bahasa pengaturcaraan web yang boleh menjadikan tapak web lebih interaktif, dinamik dan responsif. Dengan pembangunan JavaScript yang berterusan, pengaturcaraan berorientasikan objek telah menjadi konsep teras dalam pengaturcaraan JavaScript. Walau bagaimanapun, pemula mungkin berasa keliru apabila mempelajari konsep ini, jadi artikel ini akan memperkenalkan anda kepada asas pengaturcaraan berorientasikan objek dalam JavaScript.

1. Apakah itu pengaturcaraan berorientasikan objek?

Pengaturcaraan berorientasikan objek (OOP) ialah corak pengaturcaraan yang menggabungkan data dan gelagat ke dalam objek yang direka dengan teliti. Dalam JavaScript, objek boleh mengandungi sifat (data) dan kaedah (tingkah laku) yang boleh dikongsi dan digunakan semula dengan objek lain. Dengan pengaturcaraan berorientasikan objek, anda boleh mengatur dan mengurus data dan tingkah laku dengan lebih baik semasa menulis kod JavaScript, dengan itu meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod anda.

2. Objek dalam JavaScript

Dalam JavaScript, objek ialah struktur data yang sangat asas. Setiap objek mempunyai satu set sifat dan kaedah, yang boleh diakses menggunakan notasi titik atau kurungan segi empat sama.

Contohnya, jika kita mencipta objek bernama Person, ia mungkin mempunyai sifat seperti ini:

var Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};
Salin selepas log masuk

Kod di atas mentakrifkan objek yang dipanggil "Orang" dan ia mempunyai tiga Sifat: firstName, lastName dan umur. Sifat ini boleh diakses menggunakan notasi titik, contohnya:

console.log(Person.firstName); //输出“John”
Salin selepas log masuk

3. Pembina dalam JavaScript

Pembina ialah fungsi yang mencipta objek baharu dan memulakan sifat dan kaedah objek ini. Nama pembina mesti bermula dengan huruf besar untuk membezakannya daripada fungsi lain. Dalam JavaScript, kita boleh menggunakan pembina untuk mencipta objek. Sebagai contoh, dalam coretan kod berikut, kami mentakrifkan pembina yang dipanggil "Orang":

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}
Salin selepas log masuk

Apabila kami mencipta objek baharu menggunakan pembina di atas, kami akan memberikan nilai kepada firstName, lastName dan umur. hartanah . Contohnya:

var john = new Person("John", "Doe", 30);
Salin selepas log masuk

Kod di atas mencipta objek baharu bernama "john" dan memberikan nilai kepada firstName, lastName dan sifat umurnya. Kita boleh mengakses sifat ini menggunakan notasi titik atau kurungan segi empat sama, contohnya:

console.log(john.firstName); //输出“John”
Salin selepas log masuk

4. Objek prototaip dalam JavaScript

Dalam JavaScript, setiap objek mempunyai objek prototaip, yang mengandungi Sifat dan kaedah dikongsi oleh objek. Objek prototaip membolehkan kami berkongsi sifat dan kaedah antara semua objek, yang mengurangkan pertindihan kod dan meningkatkan kebolehselenggaraan kod. Dalam contoh kod berikut, kami mentakrifkan pembina bernama "Orang" dan menambah kaedah bernama "getFullName" pada objek prototaipnya:

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

Person.prototype.getFullName = function() {
    return this.firstName + " " + this.lastName;
};
Salin selepas log masuk

Kod di atas mentakrifkan pembina bernama pembina "Orang" dan melampirkan objek prototaipnya kepada kaedah yang dipanggil "getFullName". Dalam contoh berikut, kami mencipta objek bernama "john" menggunakan pembina ini dan memanggil kaedah getFullName objek:

var john = new Person("John", "Doe", 30);
console.log(john.getFullName()); //输出“John Doe”
Salin selepas log masuk

Dengan contoh di atas, kita boleh melihat cara menggunakan objek Prototaip JavaScript untuk berkongsi kod dan memudahkan penyelenggaraan.

5. Pewarisan dalam JavaScript

Pewarisan ialah cara untuk satu objek memperoleh sifat dan kaedah objek lain. Dalam JavaScript, kita boleh menggunakan rantaian prototaip untuk melaksanakan pewarisan. Rantaian prototaip ialah teknik yang menunjukkan prototaip satu objek ke objek lain, membolehkannya memperoleh sifat dan kaedah objek lain. Dalam contoh kod berikut, kami akan mencipta pembina bernama "Pekerja" dan menambahnya pada objek prototaip "Orang":

function Employee(firstName, lastName, age, jobTitle) {
    Person.call(this, firstName, lastName, age);
    this.jobTitle = jobTitle;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Salin selepas log masuk

Kod di atas mentakrifkan pembina bernama Pembina "Pekerja" dan menambahnya pada objek prototaip "Orang". Apabila objek baharu dicipta, pembina akan memanggil pembina "Orang" dan menambahnya pada objek baharu sebagai atribut baharu "jobTitle". Akhir sekali, kami melaksanakan warisan dengan menetapkan objek prototaip "Pekerja" kepada objek prototaip "Orang" dan menetapkan pembinanya kepada "Pekerja".

6. Kesimpulan

Dalam artikel ini, kami memperkenalkan asas pengaturcaraan berorientasikan objek dalam JavaScript. Dengan menggunakan pembina, objek prototaip dan warisan, kami boleh menyusun dan mengurus kod JavaScript dengan lebih baik, dengan itu meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod. Saya harap artikel ini dapat membantu pendatang baru memahami pengaturcaraan berorientasikan objek JavaScript dan mula mencipta aplikasi JavaScript yang lebih baik.

Atas ialah kandungan terperinci Pengenalan kepada pengaturcaraan berorientasikan objek JavaScript yang boleh difahami oleh orang baru sekalipun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan