Warisan sederhana dengan javascript

Takeaways Key

JavaScript menggunakan pendekatan berasaskan prototaip untuk membuat bahasa berorientasikan objek, yang membolehkan tingkah laku digunakan semula dengan mengkloning objek sedia ada yang berfungsi sebagai prototaip. Konsep ini boleh digunakan untuk mensimulasikan warisan.
warisan boleh dilaksanakan dalam JavaScript dengan membuat fungsi yang klon prototaip, dengan itu memindahkan semua ahli dan berfungsi ke kelas baru. Ini membolehkan penciptaan hierarki kelas di mana setiap kelas boleh mewarisi fungsi dan ahli dari kelas induknya.
Walaupun JavaScript mempunyai pendekatan tersendiri untuk pengaturcaraan berorientasikan objek, penting bagi pemaju yang datang dari bahasa seperti C# atau C untuk memahami bahawa cuba meniru bahasa yang biasa mereka ke JavaScript mungkin tidak menghasilkan hasil yang terbaik. Sebaliknya, memeluk falsafah unik JavaScript boleh membuka kunci kuasa penuhnya.

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Banyak kawan saya adalah pemaju C# atau C. Mereka digunakan untuk menggunakan warisan dalam projek mereka dan apabila mereka ingin belajar atau menemui JavaScript, salah satu soalan pertama yang mereka tanya ialah: "Tetapi bagaimana saya boleh melakukan warisan dengan JavaScript?"

Sebenarnya, JavaScript menggunakan pendekatan yang berbeza daripada C# atau C untuk membuat bahasa berorientasikan objek. Ia adalah bahasa berasaskan prototaip. Konsep prototaip menunjukkan bahawa tingkah laku boleh digunakan semula dengan mengkloning objek sedia ada yang berfungsi sebagai prototaip. Setiap objek dalam JavaScript decends dari prototaip yang mentakrifkan satu set fungsi dan ahli yang boleh digunakan oleh objek. Tiada kelas. Hanya objek. Setiap objek kemudian boleh digunakan sebagai prototaip untuk objek lain.

Konsep ini sangat fleksibel dan kita boleh menggunakannya untuk mensimulasikan beberapa konsep dari OOP seperti warisan.

Melaksanakan warisan

mari kita gambarkan apa yang kita mahu buat dengan hierarki ini menggunakan JavaScript:

Pertama sekali, kita boleh membuat kelas dengan mudah. Kerana tidak ada kelas yang eksplisit, kita dapat menentukan satu set tingkah laku (kelas begitu ...) dengan hanya membuat fungsi seperti ini:

"Kelas" ini boleh dimanfaatkan menggunakan kata kunci baru:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

dan menggunakannya menggunakan objek kami:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

Cukup mudah, betul?

a<span>.print();</span>

Sampel lengkap hanya 8 baris panjang:

Sekarang mari kita tambahkan alat untuk membuat "warisan" antara kelas. Alat ini hanya perlu melakukan satu perkara: klon prototaip:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

Ini betul -betul di mana sihir berlaku! Dengan mengkloning prototaip, kami memindahkan semua ahli dan berfungsi ke kelas baru.

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

jadi jika kita mahu menambah kelas kedua yang akan menjadi anak yang pertama, kita hanya perlu menggunakan kod ini:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

Kemudian kerana ClassB mewarisi fungsi cetak dari Classa, kod berikut berfungsi:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

dan menghasilkan output berikut:

a<span>.print();</span>

kita juga boleh mengatasi fungsi cetak untuk ClassB:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

Dalam kes ini, output yang dihasilkan akan kelihatan seperti ini:

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

Trik di sini adalah untuk panggilan classa.prototype untuk mendapatkan fungsi cetak asas. Kemudian terima kasih kepada fungsi panggilan kita boleh memanggil fungsi asas pada objek semasa (ini).

Membuat classc kini jelas:

<span>var <span>ClassB</span> = function() {
</span>    <span>this.name = "class B";
</span>    <span>this.surname = "I'm the child";
</span><span>}
</span>
<span>inheritsFrom(ClassB, ClassA);</span>

dan output adalah:

<span>var b = new ClassB();
</span>b<span>.print();</span>

lebih banyak tangan dengan JavaScript

Ia mungkin mengejutkan anda sedikit, tetapi Microsoft mempunyai banyak pembelajaran percuma di banyak topik JavaScript sumber terbuka dan kami berada dalam misi untuk membuat lebih banyak lagi dengan Projek Spartan yang akan datang. Lihat saya sendiri:

• Pengenalan kepada WebGL 3D, HTML5 dan Babylon.js
• membina aplikasi halaman tunggal dengan asp.net dan angularjs
• grafik canggih dalam html

atau siri pembelajaran pasukan kami:

• Petua Prestasi Praktikal Untuk menjadikan HTML/JavaScript anda lebih cepat (siri 7 bahagian dari reka bentuk responsif ke permainan kasual ke pengoptimuman prestasi)
• Platform Web Modern Jumpstart (asas -asas HTML, CSS, dan JS)
• Membangunkan aplikasi Windows Universal dengan HTML dan JavaScript Jumpstart (gunakan JS yang telah anda buat untuk membina aplikasi)

dan beberapa alat percuma: Komuniti Visual Studio, Percubaan Azure, dan Alat Ujian Cross-Browser untuk Mac, Linux, atau Windows.

dan beberapa falsafah ...

untuk membuat kesimpulan, saya hanya ingin menyatakan dengan jelas bahawa JavaScript bukan C# atau c. Ia mempunyai falsafah sendiri. Jika anda adalah pemaju C atau C# dan anda benar -benar ingin merangkul kuasa penuh JavaScript, tip terbaik yang boleh saya berikan ialah: Jangan cuba meniru bahasa anda ke dalam JavaScript. Tidak ada bahasa terbaik atau terburuk. Hanya falsafah yang berbeza!

Artikel ini adalah sebahagian daripada siri Web Dev Tech dari Microsoft. Kami teruja untuk berkongsi Projek Spartan dan enjin rendering baru dengan anda. Dapatkan mesin maya percuma atau ujian dari jauh pada peranti Mac, iOS, Android, atau Windows anda di Modern.ie.

Soalan Lazim (Soalan Lazim) Mengenai Warisan JavaScript

Apakah perbezaan antara warisan klasik dan prototypal dalam JavaScript? Warisan klasik, juga dikenali sebagai warisan pembina, adalah di mana objek baru dicipta dari fungsi kelas atau pembina. Ini sama dengan bagaimana warisan berfungsi dalam bahasa seperti Java atau c. Warisan prototip, sebaliknya, adalah unik untuk JavaScript. Ia melibatkan mewujudkan objek baru yang mewarisi sifat dari objek yang sedia ada. Ini dilakukan menggunakan kaedah objek.create () atau dengan menetapkan prototaip objek baru ke objek yang ada. Perbezaan utama antara kedua -duanya ialah warisan klasik menggunakan kelas dan fungsi pembina, manakala warisan prototaip menggunakan objek. Konsep dalam warisan JavaScript. Apabila harta atau kaedah diakses pada objek, JavaScript pertama memeriksa jika objek itu mempunyai harta atau kaedah itu. Jika tidak, JavaScript kemudian memeriksa prototaip objek. Proses ini meneruskan rantaian prototaip sehingga harta atau kaedah dijumpai atau akhir rantai dicapai (yang biasanya merupakan prototaip objek terbina dalam). Mekanisme ini membolehkan objek mewarisi sifat dan kaedah dari prototaip mereka, membolehkan penggunaan semula kod dan warisan dalam JavaScript. Kata kunci dalam JavaScript digunakan dalam konteks kelas untuk memanggil fungsi pada ibu bapa objek. Dengan kata lain, 'Super' membolehkan anda mengakses dan memanggil fungsi pada kelas induk objek, membolehkan anda menggunakan semula kaedah kelas induk. Ini amat berguna dalam pembina subkelas, di mana anda mungkin mahu memanggil pembina kelas induk. adalah mudah. Anda hanya menentukan kaedah dengan nama yang sama dalam kelas atau objek kanak -kanak. Apabila kaedah itu dipanggil pada contoh kelas atau objek kanak -kanak, versi yang ditakrifkan dalam kanak -kanak akan digunakan dan bukannya di ibu bapa. Ini membolehkan anda menyesuaikan atau memperluaskan tingkah laku kaedah yang diwarisi. digunakan untuk membuat dan memulakan objek. Dalam konteks warisan, fungsi pembina kelas induk sering dipanggil dalam pembina kelas kanak -kanak menggunakan kata kunci 'super'. Ini membolehkan kelas kanak -kanak mewarisi sifat dan kaedah kelas induk.

Bagaimanakah warisan berfungsi dengan kelas JavaScript ES6? Kata kunci 'kelas' digunakan untuk menentukan kelas, dan kata kunci 'memanjangkan' digunakan untuk membuat subclass yang mewarisi dari kelas induk. Kata kunci 'Super' digunakan dalam pembina subkelas untuk memanggil pembina kelas induk. di mana objek atau kelas boleh mewarisi dari lebih daripada satu ibu bapa. Walau bagaimanapun, adalah mungkin untuk mensimulasikan pelbagai warisan menggunakan mixins. Mixin adalah teknik di mana objek atau kelas boleh "mencampur" sifat dan kaedah dari pelbagai sumber. Ini membolehkan anda menggabungkan fungsi pelbagai objek atau kelas menjadi satu. Kod dalam JavaScript. Warisan adalah di mana objek atau kelas mewarisi sifat dan kaedah dari objek induk atau kelas. Komposisi, sebaliknya, adalah di mana objek terdiri daripada objek lain, dan fungsi diwakilkan kepada objek komponen ini. Walaupun warisan adalah mengenai hubungan "IS-A" (subclass adalah jenis kelas induk), komposisi adalah mengenai hubungan "has-a" (objek mempunyai objek lain). Gunakan warisan dengan fungsi JavaScript?

Fungsi dalam JavaScript adalah objek, dan mereka boleh digunakan untuk melaksanakan warisan. Ini dilakukan dengan menentukan fungsi pembina, yang digunakan untuk membuat objek baru. Properti 'prototaip' fungsi pembina adalah objek yang semua contoh fungsi akan mewarisi dari. Dengan menambahkan sifat dan kaedah ke objek prototaip ini, anda boleh menjadikannya tersedia untuk semua contoh fungsi. kekeliruan antara rantaian prototaip dan rantaian pembina. Apabila kaedah dipanggil pada objek, JavaScript melihat rantai prototaip, bukan rantai pembina. Satu lagi perangkap adalah lupa untuk memanggil pembina induk dalam pembina kanak -kanak, yang boleh membawa kepada hasil yang tidak dijangka. Akhirnya, kerana JavaScript menggunakan warisan prototip, mungkin secara tidak sengaja mengubahsuai prototaip apabila anda bermaksud mengubah suai contoh.

Atas ialah kandungan terperinci Warisan sederhana dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!