Cara menggunakan PROTOYPES pada JavaScript
|
25/02/2017 Ekky Ridyanto 2842 Website Show  Lanjut lagi sekarang kita akan belajar tentang Object Prototype pada Javascript. Object Prototype seperti object blue print yang mana ketika kita ingin membuat objek tapi datanya tidak spesifik artinya data kita sedikit dinamis keuntungannya sendiri kita cukup sekali saja mendeklarasikan nilainya atau pun fungsi fungsinya tapi nanti kita bisa membuat beberapa objek yang sama dengan nilai yang berbeda beda tentu untuk membuatnya kita bisa membuat fungsi seperti biasa dimulai dengan kata function lalu di ikuti dengan namanya Karena data atau nilainya wajib kita akan isi dibagian fungsinya yaitu parameter satu dan dua yang kita pisahkan dengan koma yang sebagai nilai construct atau nilai awalnya. Lalu didalam fungsinya misalnya saya punya harga dan juga warna atau nilai lainnya lalu untuk mengisinya kita tinggal nulis this.harga lalu nilainya dari parameter satu begitu juga untuk warnanya didapatkan dari parameter dua. Sekali lagi kata kunci this ini akan mengacu pada fungsi atau objeknya artinya nama_komputer ini punya harga yang saya deklarasikan disebelah kiri dan disebelah kanannya adalah nilainya. Nilainya sendiri kita ingin buat flexsibel yang berasal dari parameter yang mana nilainya akan di isi ketika kita mendeklarasikan satu objek. Berikutnya kita akan membuat objeknya dengan nama variabel Lenovo lalu lenovo ini sebagai nama_komputer yang memiliki harga dan warna Kita pastikan bila saya cetak Lenovo.harga maka harga Lenovonya akan tampil disana begitu pun untuk warnanya. dan bila saya ingin membuat nama komputer yang kedua maka kita tinggal tulis objek fungsinya yaitu nama_komputer dengan nilai yang berbeda-beda Jadi teman teman tidak terbatas hanya satu boleh membuat beberapa objek hanya dengan mendeklarasikan satu fungsi saja. Itu dia keuntungan membuat objek prototype. Sebelum diakhiri saya akan tambahkan lagi satu hal penting ketika kita ingin menambahkan satu property baru diluar fungsi objectnya kita hanya menulis nama fungsinya lalu prototype lalu di ikuti dengan nama propertynya yaitu type yang saya isi seperti ini dan bila saya tulis Lenovo.type maka otomatis kita akan melihat type komputernya disana. Itu dia cara menambahkan property diluar objek fungsinya dengan kata kunci prototype. Terima kasih Web Design, Javascript Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article) Table of Contents
Ketika kamu mendefinisikan suatu fungsi dalam JavaScript, ia dilengkapi dengan beberapa properti yang telah ditentukan sebelumnya; salah satunya adalah prototype yang ilusif. Dalam artikel ini, saya akan detail apa itu, dan mengapa kamu harus menggunakannya dalam proyekmu. Apa itu Prototype?Properti prototype awalnya merupakan objek kosong, dan dapat ditambahkan anggota ke dalamnya - seperti yang kamu lakukan pada objek lain. var myObject = function(name){
this.name = name;
return this;
};
console.log(typeof myObject.prototype); // object
myObject.prototype.getName = function(){
return this.name;
};Pada cuplikan di atas, kita telah membuat fungsi, tetapi jika kita memanggil console.log(myObject() === window); // true Tautan Rahasia
Sebelum melanjutkan, saya ingin membahas tautan "rahasia" yang membuat prototype berfungsi seperti itu. Setiap objek dalam JavaScript memiliki properti "rahasia" yang ditambahkan ke dalamnya ketika itu didefinisikan atau dipakai, bernama __proto__; ini adalah bagaimana rantai prototipe diakses. Namun, ini bukanlah ide yang baik untuk mengakses __proto__ dalam aplikasi Anda, karena tidak tersedia di semua browser. Properti __proto__ tidak boleh bingung dengan objek prototipe, karena mereka adalah dua sifat terpisah; yang mengatakan, mereka berjalan beriringan. Sangat penting untuk membuat perbedaan, karena bisa sangat membingungkan pada awalnya! Apa artinya tepatnya? Biarkan saya menjelaskan. Ketika kita menciptakan fungsi myObject, kami telah mendefinisikan objek jenis fungsi. console.log(typeof myObject); // function Bagi mereka yang tidak menyadari, fungsi adalah objek standar dalam JavaScript, dan, sebagai
akibatnya, memiliki sifat (misalnya panjang dan argumen) dan metode sendiri (misalnya panggilan dan berlaku). Dan ya, itu juga, memiliki objek prototipe sendiri, serta tautan rahasia Function.prototype = {
arguments: null,
length: 0,
call: function(){
// secret code
},
apply: function(){
// secret code
}
...
}Sebenarnya, itu mungkin tidak akan begitu sederhana; ini adalah hanya untuk menggambarkan bagaimana rantai prototipe bekerja. Jadi kita telah didefinisikan myObject sebagai fungsi dan diberikan satu argumen, nama; tapi kami tidak pernah menetapkan properti apapun, seperti panjang atau metode, seperti panggilan. Jadi mengapa kerja berikut? console.log(myObject.length); // 1 (being the amount of available arguments) Hal ini karena, ketika kita didefinisikan myObject, itu menciptakan sebuah properti __proto__ dan set nilainya ke Function.prototype (digambarkan dalam kode di atas). Jadi, ketika kita mengakses myObject.length, itu tampak untuk properti dari myObject disebut panjang dan tidak menemukan satu; Kemudian perjalanan rantai, melalui __proto__ link, menemukan properti dan kembali itu. Anda mungkin bertanya-tanya mengapa panjang diatur ke 1 dan tidak 0 - atau nomor yang lain untuk fakta itu. Hal ini karena myObject sebenarnya adalah instance dari fungsi. console.log(myObject instanceof Function); // true console.log(myObject === Function); // false Ketika instance objek dibuat, properti __proto__ diperbarui untuk menunjuk ke prototipe konstruktor, yang, dalam kasus ini, adalah fungsi. console.log(myObject.__proto__ === Function.prototype) // true Selain itu, bila Anda membuat objek fungsi baru, asli kode dalam fungsi konstruktor akan menghitung jumlah argumen dan memperbarui this.length sesuai, yang, dalam kasus ini, adalah 1. Jika, bagaimanapun, kita membuat sebuah instance baru dari myObject menggunakan kata kunci baru, __proto__ akan mengarah ke myObject.prototype sebagai myObject adalah Pembina instance baru kami. var myInstance = new myObject(“foo”); console.log(myInstance.__proto__ === myObject.prototype); // true Selain memiliki akses ke metode asli dalam Function.prototype, seperti panggilan dan menerapkan, kami sekarang memiliki akses ke myObject's metode, getName. console.log(myInstance.getName()); // foo var mySecondInstance = new myObject(“bar”); console.log(mySecondInstance.getName()); // bar console.log(myInstance.getName()); // foo Seperti yang dapat Anda bayangkan, ini sangat berguna, karena dapat digunakan untuk blueprint objek, dan menciptakan banyak contoh yang diperlukan - yang membawa saya ke topik berikutnya! Mengapa adalah menggunakan prototipe lebih baik?Katakanlah, misalnya, bahwa kita sedang mengembangkan sebuah kanvas permainan dan perlu beberapa (mungkin ratusan) objek pada layar sekaligus. Setiap objek memerlukan sifat sendiri, seperti x dan y koordinat, lebar, tinggi, dan banyak orang lain. Kami mungkin melakukannya sebagai berikut: var GameObject1 = {
x: Math.floor((Math.random() * myCanvasWidth) + 1),
y: Math.floor((Math.random() * myCanvasHeight) + 1),
width: 10,
height: 10,
draw: function(){
myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
}
...
};
var GameObject2 = {
x: Math.floor((Math.random() * myCanvasWidth) + 1),
y: Math.floor((Math.random() * myCanvasHeight) + 1),
width: 10,
height: 10,
draw: function(){
myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
}
...
};... melakukan 98 kali ini... Apa ini akan lakukan adalah membuat semua benda-benda ini dalam memori - semua dengan terpisah definisi untuk metode, seperti menggambar dan metode apa pun yang lain mungkin diperlukan. Hal ini tentu saja tidak ideal, seperti permainan akan mengasapi browser yang dialokasikan memori JavaScript, dan membuat berjalan sangat lambat... atau bahkan berhenti merespons. Sementara hal ini mungkin tidak akan terjadi dengan benda-benda yang hanya 100, itu masih bisa berfungsi akan cukup menjadi hit kinerja, sebagai akan perlu mencari seratus objek yang berbeda, bukan hanya objek prototipe tunggal. Cara menggunakan prototipeUntuk membuat aplikasi berjalan lebih cepat (dan mengikuti praktik terbaik), kita dapat (re) mendefinisikan properti prototipe GameObject; Setiap contoh GameObject kemudian akan referensi metode dalam GameObject.prototype seolah-olah mereka cara mereka sendiri. // define the GameObject constructor function
var GameObject = function(width, height) {
this.x = Math.floor((Math.random() * myCanvasWidth) + 1);
this.y = Math.floor((Math.random() * myCanvasHeight) + 1);
this.width = width;
this.height = height;
return this;
};
// (re)define the GameObject prototype object
GameObject.prototype = {
x: 0,
y: 0,
width: 5,
width: 5,
draw: function() {
myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
}
};Kita kemudian dapat instantiate GameObject 100 kali. var x = 100,
arrayOfGameObjects = [];
do {
arrayOfGameObjects.push(new GameObject(10, 10));
} while(x--);Sekarang kita memiliki array GameObjects 100, yang semua berbagi prototipe yang sama dan definisi metode yang menarik, yang secara drastis menyimpan memori dalam aplikasi. Saat kita memanggil metode menarik, itu akan referensi fungsi yang persis sama. var GameLoop = function() {
for(gameObject in arrayOfGameObjects) {
gameObject.draw();
}
};Prototipe adalah benda hidupSebuah objek prototipe adalah benda hidup, sehingga untuk berbicara. Ini hanya berarti bahwa, jika, setelah kami membuat semua contoh GameObject kami, kami memutuskan bahwa, bukan menggambar persegi panjang, kami ingin menggambar sebuah lingkaran, kami bisa Perbarui metode GameObject.prototype.draw kami sesuai. GameObject.prototype.draw = function() {
myCanvasContext.arc(this.x, this.y, this.width, 0, Math.PI*2, true);
}Dan sekarang, Semua contoh sebelumnya dari GameObject dan komponen masa depan akan menggambar sebuah lingkaran. Memperbarui prototipe asli objekYa, ini mungkin. Anda mungkin akrab dengan perpustakaan JavaScript, seperti prototipe, yang mengambil keuntungan dari metode ini. Mari kita gunakan contoh sederhana: String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, ‘’);
};Kita sekarang dapat mengakses ini sebagai metode string apapun: “ foo bar “.trim(); // “foo bar” Ada kerugian kecil untuk ini, namun. Misalnya, Anda dapat menggunakan ini dalam aplikasi Anda; Tapi satu atau dua tahun di jalan, browser dapat mengimplementasikan versi terbaru dari JavaScript yang mencakup asli trim metode dalam String's prototipe. Ini berarti bahwa definisi Anda Trim akan menimpa versi asli! Yikes! Untuk mengatasinya, kita dapat menambahkan pemeriksaan sederhana sebelum mendefinisikan fungsi. if(!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, ‘’);
};
}Sekarang, jika ada, itu akan menggunakan versi asli trim metode.
KesimpulanMudah-mudahan, artikel ini telah memberi sedikit cahaya pada tulang punggung dari JavaScript yang adalah prototipe. Anda sekarang harus pada cara untuk membuat aplikasi lebih efisien. Jika Anda memiliki pertanyaan tentang prototipe, beri tahu saya di komentar, dan saya akan melakukan yang terbaik untuk menjawabnya. |
