Kemahiran prototaip_javascript ringkasan pembelajaran JavaScript

Prototaip dalam JS ialah bahagian yang sukar untuk difahami dalam JS

Artikel ini berdasarkan perkara pengetahuan berikut:

1 Corak reka bentuk prototaip
Dalam .Net, clone() boleh digunakan untuk melaksanakan kaedah prototaip

Idea utama kaedah prototaip ialah kini terdapat kelas A, dan saya ingin mencipta kelas B, yang diprototaip oleh A. Dan boleh dikembangkan. Kami memanggil prototaip B A.

2 kaedah JavaScript boleh dibahagikan kepada tiga kategori:
a -> kaedah kelas

b -> Kaedah objek

c -> Kaedah prototaip

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)
bermaksud menganggap obj sebagai obj1 , apabila memanggil kaedah func, kaedah func obj1 pada asalnya dipanggil, namun, selepas lulus dalam obj, objek konteks telah ditukar, dan kaedah ojb1 dipanggil melalui objek obj

Okay, 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 = 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 kita lihat contoh eksperimen 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 extendClass yang kami klon 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 dijalankan, ia akan terlebih dahulu mencari fungsi dalam ontologi Jika ia dijumpai, 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 contoh extendClass untuk memanggil kaedah objek showMsg of kelas asas?

Jawapannya ialah anda boleh 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 ; Baca sebagai "Panggil instance sebagai baseinstance dan panggil kaedah objeknya showMsg"

Baiklah, seseorang mungkin bertanya di sini, mengapa tidak gunakan baseClass.showMsg.call(instance);

Inilah perbezaannya 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:

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

di atas adalah kandungan JavaScript Ringkasan Pembelajaran Prototype_javascript. Untuk kandungan yang lebih berkaitan, sila perhatikan PHP Cina laman web (www. php.cn)!