Penjelasan terperinci tentang pola penggunaan semula kod JavaScript_Pengetahuan asas

Penggunaan semula kod dan prinsipnya

<font face="NSimsun">代码复用</font>, seperti namanya, adalah untuk menggunakan semula sebahagian atau bahkan semua kod yang telah ditulis sebelum ini untuk membina atur cara baharu. Apabila bercakap tentang penggunaan semula kod, perkara pertama yang boleh kita fikirkan ialah <font face="NSimsun">继承性</font>. Prinsip penggunaan semula kod ialah:

<code>优先使用对象组合，而不是类继承</code>

Dalam js, kerana tiada konsep kelas, konsep contoh tidak begitu masuk akal Objek dalam js ialah pasangan nilai kunci yang mudah, dan ia boleh dibuat dan diubah suai secara dinamik.

Tetapi dalam <font face="NSimsun">js</font>, kita boleh menggunakan pembina dan operator <font face="NSimsun">new</font> untuk membuat instantiat objek, yang mempunyai persamaan sintaks dengan bahasa pengaturcaraan lain yang menggunakan kelas.

Contohnya:

<code>var trigkit4 = new Person();</code>

<font face="NSimsun">js</font> nampaknya merupakan kelas apabila memanggil pembina <font face="NSimsun">Person</font>, tetapi ia sebenarnya masih merupakan fungsi Ini memberi kita beberapa idea pembangunan dan corak warisan yang diandaikan berdasarkan kelas "corak warisan kelas".

Mod warisan tradisional memerlukan kata kunci <font face="NSimsun">class</font> Kami menganggap bahawa mod warisan kelas di atas ialah <font face="NSimsun">现代继承模式</font>, iaitu mod yang tidak perlu dipertimbangkan dari segi kelas.

Corak warisan kelas

Lihat contoh berikut bagi dua pembina <font face="NSimsun">Parent()</font> dan <font face="NSimsun">Child()</font>:

<code><script type="text/javascript"><br>    function Parent(name){<br>        this.name = name || 'Allen';<br>    }<br>    Parent.prototype.say = function(){<br>        return this.name;<br>    }<br>    function Child(name){}<br>    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br>    function inherit(C,P){<br>        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br>    }<br>    //调用声明的继承函数<br>    inherit(Child,Parent);<br></script></code>

Apabila anda mencipta objek menggunakan pernyataan <font face="NSimsun">new Child()</font>, ia mendapat fungsinya daripada contoh <font face="NSimsun">Parent()</font> melalui prototaip, seperti:

<code>var kid = new Child();
kid.say();
//Allen</code>

Rantai Prototaip

Bincangkan cara rantai prototaip berfungsi dalam model warisan kelas Kami menganggap objek sebagai blok di suatu tempat dalam ingatan ini mengandungi data dan rujukan kepada blok lain. Apabila menggunakan pernyataan <font face="NSimsun">new Parent()</font> untuk mencipta objek, blok seperti di sebelah kiri rajah di bawah akan dibuat boleh menghantar <font face="NSimsun">name</font> Pautan tersirat <font face="NSimsun">say()</font> atribut 🎜> (prototaip) boleh mengakses blok di sebelah kanan <font face="NSimsun">Parent()</font>. <font face="NSimsun">prototype</font> <font face="NSimsun">__proto__</font><font face="NSimsun">Parent.prototype</font>

Jadi, apa yang berlaku apabila anda mencipta objek baharu menggunakan ? Seperti yang ditunjukkan di bawah:

<font face="NSimsun">var kid = new Child()</font>

Objek yang dibuat menggunakan pernyataan hampir kosong kecuali pautan tersirat

. Dalam kes ini,

menunjuk ke objek <font face="NSimsun">new Child()</font> yang dibuat menggunakan pernyataan <font face="NSimsun">__proto__</font> dalam fungsi <font face="NSimsun">__proto__</font>. <font face="NSimsun">inherit()</font>Apabila melaksanakan <font face="NSimsun">new Parent()</font>, memandangkan objek blok di sudut kiri bawah tidak mempunyai kaedah

, ia akan menanyakan objek blok tengah melalui rantai prototaip Walau bagaimanapun, objek blok tengah tidak mempunyai

kaedah sama ada, jadi dia mengikuti rantaian prototaip untuk menanyakan objek blok paling kanan, dan objek ini kebetulan mempunyai kaedah <font face="NSimsun">kid.say()</font>. dah habis? <font face="NSimsun">say()</font> <font face="NSimsun">say()</font> tidak selesai apabila ia dilaksanakan di sini <font face="NSimsun">say()</font> dirujuk dalam kaedah

Ini menunjuk ke objek yang dibuat oleh pembina Di sini, ia menunjuk ke blok

tidak mempunyai atribut <font face="NSimsun">say()</font> Atas sebab ini, blok tengah akan ditanya, dan blok tengah mempunyai atribut <font face="NSimsun">this.name</font> Pada ketika ini, pertanyaan rantaian prototaip selesai. <font face="NSimsun">new Child()</font> <font face="NSimsun">new Child()</font>Untuk perbincangan yang lebih terperinci, sila lihat artikel saya: <font face="NSimsun">name</font>Nota Kajian Javascript (5) Penjelasan Terperinci Prototaip dan Rantaian Prototaip<font face="NSimsun">name</font>

Kongsi prototaip

Peraturan corak ini ialah: ahli boleh guna semula harus dipindahkan ke prototaip dan bukannya diletakkan di dalamnya. Oleh itu, untuk tujuan pewarisan, apa-apa yang patut diwarisi harus dilaksanakan dalam prototaip. Oleh itu, anda boleh menetapkan prototaip objek kanak-kanak agar sama dengan prototaip objek induk, seperti yang ditunjukkan dalam contoh berikut:

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

子对象和父对象共享同一个原型，并且可以同等的访问<font face="NSimsun">say()</font>方法。然而，子对象并没有继承<font face="NSimsun">name</font>属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br>    //要继承的对象<br>    var parent = {<br>        name : "Jack"  //这里不能有分号哦<br>    };</code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></script></code>

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(obj);<br>    alert(kid.getName());//trigkit4<br></script></code>

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(Person.prototype);<br>    console.log(typeof kid.getName);//function，因为它在原型中<br>    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br></script></code>