Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang cara kelas ditakrifkan dalam kemahiran javascript (empat cara)_javascript

Penjelasan terperinci tentang cara kelas ditakrifkan dalam kemahiran javascript (empat cara)_javascript

WBOY
WBOYasal
2016-05-16 15:24:211448semak imbas

Contoh dalam artikel ini menerangkan cara mentakrifkan kelas dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Takrifan kelas merangkumi empat cara:

1. Kaedah kilang

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

Mentakrifkan fungsi kilang yang boleh mencipta dan mengembalikan objek jenis tertentu Ia kelihatan baik, tetapi terdapat masalah kecil,

Fungsi baharu showColor perlu dibuat setiap kali ia dipanggil, kita boleh mengalihkannya ke luar fungsi,

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

Tuding padanya terus dalam fungsi kilang

Salin kod Kod adalah seperti berikut:
tempCar.getName = getName;

Ini mengelakkan masalah mencipta fungsi berulang kali, tetapi ia tidak kelihatan seperti kaedah objek.

2. Kaedah Pembina

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor(); 

Anda boleh melihat perbezaan daripada kaedah pertama Tiada objek yang dibuat di dalam pembina, tetapi kata kunci ini digunakan.

Apabila menggunakan baru untuk memanggil pembina, objek pertama kali dibuat dan kemudian diakses menggunakan ini.

Penggunaan ini hampir sama dengan bahasa berorientasikan objek lain, tetapi kaedah ini mempunyai masalah yang sama seperti yang sebelumnya, iaitu mencipta fungsi berulang kali.

3. Kaedah prototaip

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

Kereta pembina pertama kali ditakrifkan tanpa sebarang kod, dan kemudian sifat ditambah melalui prototaip. Kelebihan:

a. Semua kejadian menyimpan penunjuk ke showColor, yang menyelesaikan masalah mencipta fungsi berulang kali

b. Anda boleh menggunakan instanceof untuk menyemak jenis objek

Salin kod Kod adalah seperti berikut:
alert(car3 instanceof proCar);//true

Kelemahan, tambah kod berikut:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

pemandu ialah penunjuk kepada objek Array dan kedua-dua kejadian proCar menghala ke tatasusunan yang sama.

4. Kaedah prototaip dinamik

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

Kaedah ini adalah kegemaran saya Semua definisi kelas dilengkapkan dalam fungsi Ia kelihatan seperti definisi kelas dalam bahasa lain Anda juga boleh menggunakan instanceof

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn