Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang mencipta objek berdasarkan JavaScript berorientasikan objek

Penjelasan terperinci tentang mencipta objek berdasarkan JavaScript berorientasikan objek

PHPz
Lepaskan: 2018-10-13 16:30:21
asal
1418 orang telah melayarinya

Setiap fungsi yang kami cipta mempunyai atribut prototaip, iaitu objek yang tujuannya adalah untuk mengandungi sifat dan kaedah yang boleh dikongsi oleh semua kejadian jenis tertentu. Secara logiknya ia boleh difahami dengan cara ini: prototaip ialah objek prototaip objek yang dibuat dengan menggunakan pembina. Kelebihan menggunakan prototaip ialah semua contoh objek boleh berkongsi sifat dan kaedah yang terkandung di dalamnya. Dalam erti kata lain, anda tidak perlu mentakrifkan maklumat objek dalam pembina, tetapi tambah maklumat ini terus ke prototaip

Kaedah prototaip menggunakan atribut prototaip objek, yang boleh dianggap sebagai kaedah yang digunakan untuk mencipta prototaip Bergantungan baru. Di sini, mula-mula gunakan pembina kosong untuk menetapkan nama fungsi. Kemudian semua sifat dan kaedah diperuntukkan terus kepada atribut prototaip. Saya menulis semula contoh sebelumnya dan kodnya adalah seperti berikut:

function Car() { }; 
//将所有的属性的方法都赋予prototype属性 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
document.write(Car1.showColor()+"
");//输出:blue 
document.write(Car2.showColor());//输出:blue
Salin selepas log masuk

Dalam kod ini, mula-mula takrifkan pembina Car() tanpa sebarang kod. Beberapa baris kod seterusnya mentakrifkan sifat objek Kereta dengan menambahkan sifat pada sifat prototaip Kereta. Apabila Car() baharu dipanggil, semua sifat prototaip akan diberikan serta-merta kepada objek yang akan dibuat, yang bermaksud bahawa semua kejadian Kereta menyimpan penunjuk kepada fungsi showColor(). Dari segi semantik, semua sifat kelihatan milik satu objek, sekali gus menyelesaikan masalah kaedah kilang dan kaedah pembina sebelumnya

Selain itu, menggunakan kaedah ini, anda juga boleh menggunakan operator instanceof Semak jenis objek yang ditunjuk oleh pembolehubah tertentu:

Kodnya adalah seperti berikut:
document.write(Car1 instanceof Car);    //输出:tru
Salin selepas log masuk

Pendekatan prototaip kelihatan seperti penyelesaian yang baik. Malangnya, ia tidak begitu memuaskan. Pertama, pembina ini tidak mempunyai parameter. Menggunakan kaedah prototaip, anda tidak boleh memulakan nilai atribut dengan menghantar parameter kepada pembina, kerana atribut warna Car1 dan Car2 adalah sama dengan "biru", atribut pintu adalah sama dengan 4, dan atribut mpg adalah sama dengan 25. Ini bermakna anda perlu menukar nilai lalai harta selepas objek itu dibuat, yang menjengkelkan, tetapi itu bukan penghujungnya. Masalah sebenar timbul apabila sifat menunjuk kepada objek dan bukannya fungsi. Perkongsian fungsi tidak menyebabkan masalah, tetapi objek jarang dikongsi antara berbilang kejadian. Sila pertimbangkan contoh berikut:

function Car() { };//定义一个空构造函数,且不能传递参数 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.drivers = new Array("Mike","John"); 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
Car1.drivers.push("Bill"); 
document.write(Car1.drivers+"
");//输出:Mike,John,Bill 
document.write(Car2.drivers);//输出 :Mike,John,Bill
Salin selepas log masuk

Dalam kod di atas, pemacu atribut ialah penunjuk kepada objek Array yang mengandungi dua nama "Mike" dan "John". Memandangkan pemandu ialah nilai rujukan, kedua-dua kejadian Kereta menghala ke tatasusunan yang sama. Ini bermakna menambah nilai "Bil" pada Car1.drivers, yang juga boleh dilihat dalam Car2.drivers. Mengeluarkan salah satu daripada penunjuk ini menyebabkan rentetan "Mike,John,Bill" dipaparkan. Memandangkan terdapat begitu banyak masalah semasa mencipta objek, anda mesti tertanya-tanya, adakah cara yang munasabah untuk mencipta objek? Jawapannya ya, anda perlu menggunakan gabungan kaedah pembina dan prototaip

kaedah pembina/prototaip campuran (disyorkan untuk menggunakan

Dengan mencampurkan kaedah pembina dan kaedah prototaip, anda boleh mencipta objek sama seperti bahasa pengaturcaraan yang lain. kaedah prototaip untuk mentakrifkan sifat fungsi objek ( kaedah ).

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.drivers = new Array("Mike","John"); 
}; 
Car.prototype.showColor = function() { 
   return this.color; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
Car1.drivers.push("Bill"); 
document.write(Car1.drivers+"
");//输出:Mike,John,Bill 
documnet.write(Car2.drivers);//输出:Mike,John
Salin selepas log masuk
Kini ia lebih seperti mencipta objek biasa Semua sifat bukan fungsi dicipta dalam pembina, yang bermaksud bahawa sifat boleh diberikan nilai lalai menggunakan parameter bagi. pembina kerana hanya satu contoh fungsi showColor() dibuat , jadi tiada sisa memori Selain itu, menambah nilai "Bill" pada tatasusunan pemacu Car1 tidak akan menjejaskan tatasusunan Car2, jadi apabila mengeluarkan nilai ini. tatasusunan, Car1.drivers memaparkan "Mike, John, Bill", dan Car2.drivers memaparkan "Mike, John".
Kaedah ini adalah kaedah utama yang digunakan oleh ECMAScript, dan ia mempunyai kaedah lain Namun, sesetengah pembangun masih merasakan kaedah ini tidak sempurna

Bagi pembangun yang biasa dengan bahasa lain, menggunakan hibrid pendekatan pembina/prototaip mungkin berasa kurang harmoni Lagipun, kebanyakan bahasa berorientasikan objek mempunyai gambaran visual sifat dan kaedah apabila mentakrifkan kelas Java berikut:


Java很好地打包了Car类的所有属性和方法,因此看见这段代码就知道它要实现什么功能,它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为,在构造函数内部找属性,在其外部找方法的做法不合逻辑。因此,他们设计了动态原型方法,以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car:

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.drivers = new Array("Mike","John"); 
 //如果Car对象中的_initialized为undefined,表明还没有为Car的原型添加方法 
 if (typeof Car._initialized == "undefined") { 
   Car.prototype.showColor = function() { 
    return this.color; 
   }; 
   Car._initialized = true; //设置为true,不必再为prototype添加方法 
 } 
} 
var Car1 = new Car("red",4,23);//生成一个Car对象 
var Car2 = new Car("blue",3,25); 
Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素 
document.write(Car1.drivers+"
");//输出:Mike,John,Bill 
document.write(Car2.drivers);//输出:Mike,John
Salin selepas log masuk

 直到检查typeof Car._initialize是否等于"undefined"之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized设置为true。如果这个值定义了(它的值为 true时,typeof 的值为Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,传统的 OOP开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。 

我们应该采用哪种方式呢?      

如前所述,目前使用最广泛的是混合的构造函数/原型方式。此外,动态原型方式也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。总之JS是基于面向对象的一门客户端脚本语言,我们在学习它的面向对象技术的时候要的留意JS与其他严谨性高的程序语言的不同。也要正确使用JS创建对象的合理的方式,推荐使用构造函数与原型方式的混合方式创建对象实例。这样可以避免许多不必要的麻烦。

以上就是JavaScript基于面向对象之创建对象的全部内容,希望对大家的学习有所帮助。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan