Memahami prototaip dalam kemahiran JS_javascript

Setiap pembina mempunyai atribut yang dipanggil prototaip. Atribut ini sangat berguna untuk mengisytiharkan pembolehubah atau fungsi biasa untuk kelas tertentu.

Takrif prototaip

Anda tidak perlu mengisytiharkan atribut prototaip secara eksplisit kerana ia wujud dalam setiap pembina

Artikel ini adalah berdasarkan perkara pengetahuan berikut:

1 Corak Reka Bentuk Prototaip

Anda boleh menggunakan clone() untuk melaksanakan kaedah prototaip dalam .Net

Idea utama kaedah prototaip ialah kini terdapat kelas A, dan saya ingin mencipta kelas B. Kelas ini berdasarkan A dan boleh dilanjutkan. Kami memanggil prototaip B A.

2 kaedah JavaScript boleh dibahagikan kepada tiga kategori:

kaedah kelas

b Kaedah objek

kaedah prototaip c

Contoh:

function People(name)
{
 this.name=name;
 //对象方法
 this.Introduce=function(){
 alert("My name is "+this.name);
 }
}
//类方法
People.Run=function(){
 alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
 alert("我的名字是"+this.name);
}
 
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese(); 

3 kaedah obj1.func.call(obj)

Ini bermakna menganggap obj sebagai obj1 dan memanggil kaedah func

Baiklah, mari selesaikan masalah satu persatu:

Apakah maksud prototaip?

Setiap objek dalam JavaScript mempunyai atribut prototaip Penjelasan atribut prototaip objek dalam Javascript ialah: mengembalikan rujukan kepada prototaip jenis objek.

A.prototaip = baharu B();

Memahami prototaip tidak boleh dikelirukan dengan warisan. Prototaip A ialah contoh B. Dapat difahami bahawa A telah mengklonkan semua kaedah dan sifat dalam B. A boleh menggunakan kaedah dan sifat B. Penekanan di sini adalah pada pengklonan dan bukannya warisan. Situasi ini boleh berlaku: Prototaip A ialah contoh B, dan prototaip B juga merupakan contoh A.

Mari kita lihat contoh percubaan:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg

Kami mula-mula mentakrifkan kelas baseClass, dan kemudian kami mentakrifkan extentClass, tetapi kami merancang untuk menggunakan contoh baseClass sebagai prototaip, dan extendedClass yang akan diklon juga mengandungi kaedah objek showMsg.

extendClass.prototype = new baseClass() boleh dibaca sebagai: extendClass dicipta dengan mengklon contoh baseClass sebagai prototaip.

Kemudian akan timbul soalan, bagaimana jika extendClass sendiri mengandungi kaedah dengan nama yang sama dengan kaedah baseClass?

Berikut ialah percubaan lanjutan 2:

function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg

Bukti eksperimen: Apabila fungsi berjalan, ia akan mencari fungsi dalam ontologi terlebih dahulu Jika ia ditemui, ia akan dijalankan Jika ia tidak dijumpai, ia akan mencari fungsi dalam prototaip. Atau boleh difahami bahawa prototaip tidak akan mengklonkan fungsi dengan nama yang sama.

Kemudian akan ada soalan baharu:
Bagaimana jika saya mahu memanggil kaedah objek showMsg baseClass menggunakan contoh extendClass?

Jawapannya ialah menggunakan panggilan:

extendClass.prototype = new baseClass();
var instance = new extendClass();

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

Baseinstance.showMsg.call(instance); di sini berbunyi sebagai "Panggil instance sebagai baseinstance dan panggil kaedah objeknya showMsg"
Okay, seseorang di sini mungkin bertanya, mengapa tidak menggunakan baseClass.showMsg.call(instance);

Ini ialah perbezaan antara kaedah objek dan kaedah kelas Apa yang ingin kami panggil ialah kaedah objek baseClass

Akhir sekali, jika anda memahami kod berikut dengan jelas, maka anda boleh memahami apa yang dikatakan oleh artikel ini:

<script type="text/javascript">
function baseClass()
{
 this.showMsg = function()
 {
  alert("baseClass::showMsg"); 
 }
 this.baseShowMsg = function()
 {
  alert("baseClass::baseShowMsg");
 }
}
baseClass.showMsg = function()
{
 alert("baseClass::showMsg static");
}
function extendClass()
{
 this.showMsg =function ()
 {
  alert("extendClass::showMsg");
 }
}
extendClass.showMsg = function()
{
 alert("extendClass::showMsg static")
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg
instance.showMsg(); //显示extendClass::showMsg
baseClass.showMsg.call(instance);//显示baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
</script>

Kandungan di atas adalah mengenai pemahaman prototaip dalam JS saya harap anda menyukainya.