Analisis contoh penggunaan prototaip dalam kemahiran JS_javascript

Contoh dalam artikel ini menerangkan penggunaan prototaip dalam JS. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Fototaip dalam JS ialah bahagian yang sukar untuk difahami dalam JS

Artikel ini adalah berdasarkan perkara pengetahuan berikut:

1 corak reka bentuk prototaip

Anda boleh menggunakan clone() dalam .Net untuk melaksanakan kaedah prototaip
Idea utama kaedah prototaip ialah sekarang 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
c kaedah prototaip

Contohnya adalah seperti berikut:

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.prototype = new 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 lihat contoh percubaan dahulu:

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 ada 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 menggunakan contoh extendClass untuk memanggil kaedah objek showMsg baseClass?

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 kita panggil ialah kaedah objek baseClass

Akhir sekali, jika anda memahami kod berikut dengan jelas, maka anda boleh memahami maksud 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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.