Penjelasan terperinci tentang mencipta objek berdasarkan kemahiran JavaScript (1)_javascript berorientasikan objek-tutorial js-php.cn

Kali ini kita akan mengkaji teknologi berorientasikan objek JavaScript secara mendalam Sebelum belajar, perlu diterangkan beberapa istilah berorientasikan objek. Inilah persamaan semua bahasa berorientasikan objek. Terdapat beberapa istilah berorientasikan objek:
1. Objek
ECMA-262 mentakrifkan objek sebagai "kumpulan atribut yang tidak tertib, setiap atribut menyimpan nilai, objek atau fungsi primitif". Tegasnya, ini bermakna objek ialah susunan nilai tanpa susunan tertentu. Walaupun ECMAScript mentakrifkan objek dengan cara ini, takrifannya yang lebih umum ialah perwakilan berasaskan kod bagi kata nama (orang, tempat atau benda).
2.
Setiap objek ditakrifkan oleh kelas, yang boleh dianggap sebagai resipi untuk objek. Kelas mentakrifkan bukan sahaja antara muka objek (sifat dan kaedah yang diakses oleh pembangun), tetapi juga kerja dalaman objek (kod yang menjadikan sifat dan kaedah berfungsi). Kedua-dua penyusun dan jurubahasa membina objek berdasarkan spesifikasi kelas.
3. Contoh
Apabila program menggunakan kelas untuk mencipta objek, objek yang dihasilkan dipanggil contoh kelas. Satu-satunya had pada bilangan objek yang boleh dihasilkan oleh kelas adalah daripada memori fizikal mesin yang sedang dijalankan oleh kod tersebut. Setiap kejadian berkelakuan sama, tetapi tika itu mengendalikan set data bebas. Proses mencipta contoh objek dari kelas dipanggil instantiation.
Dalam bab sebelumnya, kami menyebut bahawa ECMAScript tidak mempunyai kelas formal. Sebaliknya, ECMA-262 menerangkan definisi objek sebagai resipi untuk objek. Ini adalah kompromi dalam logik ECMAScript, kerana definisi objek sebenarnya adalah objek itu sendiri. Walaupun kelas tidak benar-benar wujud, kami memanggil definisi objek sebagai kelas kerana kebanyakan pembangun lebih biasa dengan istilah ini dan kerana kedua-duanya adalah setara dari segi fungsi.
Menggunakan objek yang dipratentukan hanyalah sebahagian daripada keupayaan bahasa berorientasikan objek Kekuatan sebenarnya terletak pada keupayaan untuk mencipta objek khusus anda sendiri. ECMAScript mempunyai banyak kaedah untuk mencipta objek.
1. Kaedah asal
Oleh kerana sifat objek boleh ditakrifkan secara dinamik selepas objek dibuat, banyak pembangun menulis kod yang serupa dengan yang berikut semasa JavaScript mula-mula diperkenalkan:

var Car = new Object(); 
Car.color = "blue"; 
Car.doors = 4; 
Car.mpg = 25; 
Car.showColor = function() { 
  return this.color; 
}; 
document.write(Car.showColor());//输出：blue

Salin selepas log masuk

Dalam kod di atas, cipta objek Kereta. Kemudian berikan beberapa sifat: Ia berwarna biru, mempunyai empat pintu dan mendapat 25 batu setiap gelen. Atribut terakhir sebenarnya adalah penunjuk kepada fungsi, bermakna atribut adalah kaedah. Selepas melaksanakan kod ini, objek Kereta boleh digunakan. Walau bagaimanapun, terdapat masalah di sini, iaitu, kita mungkin perlu mencipta beberapa contoh Kereta, yang akan menyebabkan kita mengulangi banyak kod yang serupa, yang akan menjadi sangat menyusahkan.
2. Kaedah kilang
Untuk menyelesaikan masalah berbilang pengisytiharan objek serupa di atas, pembangun mencipta kilang yang boleh mencipta dan mengembalikan objek jenis tertentu. Kaedah ini adalah untuk menyelesaikan masalah sejumlah besar pertindihan objek instantiated.
(1) Kaedah kilang tanpa parameter
Sebagai contoh, fungsi createCar() boleh digunakan untuk merangkum operasi yang disenaraikan sebelum ini untuk mencipta objek Kereta:

function createCar() { 
var TempCar = new Object(); 
TempCar.color = "blue"; 
TempCar.doors = 4; 
TempCar.mpg = 25; 
TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar(); 
var Car2 = createCar(); 
document.write(Car1.showColor()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue

Salin selepas log masuk

Di sini, semua kod daripada contoh pertama terkandung dalam fungsi createCar(). Selain itu, terdapat baris tambahan kod yang mengembalikan objek TempCar sebagai nilai fungsi. Memanggil fungsi ini akan mencipta objek baharu dan memberikannya semua atribut yang diperlukan, menyalin objek Kereta yang kami jelaskan sebelum ini. Jadi dengan pendekatan ini kita boleh mencipta dua versi objek Kereta dengan mudah (Car1 dan Car2) dengan sifat yang sama.
(2) Kaedah kilang dengan parameter
Kami juga boleh mengubah suai fungsi createCar() untuk memberikannya nilai lalai bagi setiap atribut, bukannya hanya memberikan atribut nilai lalai:

function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue

Salin selepas log masuk

Dengan menambahkan parameter pada fungsi createCar(), anda boleh menetapkan nilai pada warna, pintu dan atribut mpg objek Kereta yang akan dibuat. Ini menjadikan dua objek mempunyai sifat yang sama, tetapi nilai harta yang berbeza.
Kaedah kilang menyelesaikan masalah instantiasi berulang, tetapi masih terdapat masalah, iaitu, dalam contoh sebelumnya, setiap kali fungsi createCar() dipanggil, fungsi baru showColor() mesti dicipta, yang bermaksud setiap objek mempunyai ShowColor sendiri () Versi. Malah, setiap objek berkongsi fungsi yang sama. Sesetengah pembangun mentakrifkan kaedah objek di luar fungsi kilang dan kemudian menunjuk kepada kaedah melalui atribut untuk mengelakkan masalah ini:

function showColor() { 
   return this.color; 
}; 
function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = showColor; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue

Salin selepas log masuk

在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.showColor = function() { 
    return this.color; 
 }; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue

Salin selepas log masuk

下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。