Memahami Object dan Fungsi Dalam JavaScript
A. Pendahuluan
Assalamu’alaikum wr. wb.
1. Pengertian
Fungsi JavaScript didefinisikan dengan function kata kunci.
Anda dapat menggunakan deklarasi fungsi atau ekspresi fungsi.
2. Latar Belakang
Objec dan fungsi dalam JavaScript apa sih perbedaan nya?
3. Maksud dan Tujuan
Agar lebih tau mengenai masing-masing fungsi dari objek dang fungsi yang yang ada pada JavaScript.
4. Hasil yang diharapkan
Mengetahui membedakan fungsi dan tau cara mengimplementasikan Objek dan Fungsi dalam JavaScript.
B. Alat dan Bahan
1. Laptop
2. Browser
3. Text Editor
4. File Items
C. Jangka Waktu Pelaksanaan Kegiatan
5 jam
D. Proses Tahap Pekerjaan
Objek Dalam JavaScript
Menggunakan Construktor Objek
Contoh yang ada di atas dibatasi dalam banyak situasi. Mereka hanya membuat satu objek.
Kadang-kadang kita ingin memiliki “jenis objek” yang dapat digunakan untuk membuat banyak objek dari satu jenis.
Cara standar untuk membuat “jenis objek” adalah dengan menggunakan fungsi objek konstruktor:
function person(first, last, age, eye)
{
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
Fungsi di atas (person) adalah konstruktor objek.
Begitu Anda memiliki konstruktor objek, Anda dapat membuat objek baru dengan tipe yang sama:
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
The this Kata Kunci
Dalam JavaScript, hal yang disebut this, adalah objek yang “memiliki” kode JavaScript.
Nilai this, bila digunakan dalam fungsi, adalah objek yang “memiliki” fungsi.
Nilai this, bila digunakan dalam suatu objek, adalah objek itu sendiri.
The this kata kunci dalam konstruktor objek tidak memiliki nilai. Hal ini hanya pengganti objek baru.
Nilai this akan menjadi objek baru ketika konstruktor digunakan untuk membuat suatu objek.
Build-in Konstruktor JavaScript
JavaScript memiliki built-in konstruktor untuk objek asli:
Objek JavaScript yang Diunduh
Benda yang bisa berubah: Mereka yang ditangani oleh referensi, tidak berdasarkan nilai.
Jika y adalah obyek, pernyataan berikut tidak akan membuat salinan y:
Var x = y; //This will not create a copy of y.
Objek x bukan merupakan salinan dari y. Kedua x dan y poin ke objek yang sama.
Setiap perubahan y juga berubah x, karena x dan y adalah objek yang sama.
Properti JavaScript
Properti adalah nilai-nilai yang terkait dengan objek JavaScript.
Sebuah objek JavaScript adalah kumpulan sifat unordered.
Sifat biasanya dapat diubah, ditambahkan, dan dihapus, namun ada juga yang hanya membaca.
Mengakses Properti JavaScript
Sintaks untuk mengakses properti dan objek adalah:
objectName.property
atau
objectName[“property”]
atau
objectName[expression]
Contoh :
person.fistname + “ is “ + person.age + “ years old.”;
person[“firstname”] + “ is “ + person[“age”] + “ years old.”;
JavaScript for...in Simul
JavaScript for…in pernyataan loop melalui sifat-sifat suatu objek.
Sintaksisnya :
for (variableinobject) {code to be executed}
Blok kode bagian dalam for...in lingkaran akan dieksekusi sekali untuk setiap properti.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>
Menambahkan Properti Baru
Anda dapat menambahkan properti baru ke objek yang ada dengan hanya memberikan nilai.
<!DOCTYPE html>
<html>
<body>
<p>You can add new properties to existing objects.</p>
<p id="demo"></p>
<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};
person.nationality = "English";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>
</body>
</html>
Anda tidak dapat menggunakan kata-kata dicadangkan untuk properti (metode) nama.
Atau JavaScript penamaan berlaku.
Menghapus Properti
Delete kata kunci menhapus properti dari objek:
<!DOCTYPE html>
<html>
<body>
<p>You can delete object properties.</p>
<p id="demo"></p>
<script>
var person = {
firstname:"John",
lastname:"Doe",
age:50,
eyecolor:"blue"
};
delete person.age;
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.age + " years old.";
</script>
</body>
</html>
Delete kata kunci menghapus kedua nilai properti dan properti itu sendiri. Setelah menghapus, properti tidak dapat digunakan sebelum ditambahkan kembali lagi. Operator delete dirancang untuk digunakan pada properti objek. Ini tidak berpengaruh pada variabel atau fungsi.
The delete Operator tidak boleh digunakan pada properti objek JavaScript yang telah ditetapkan. Ini dapat menyebabkan crash aplikasi Anda.
Atribut Properti
Semua properti memiliki nama. Selain itu mereka juga memiliki nilai. Nilai adalah salah satu atribut properti. Atribut lainnya adalah: enumerable, dikonfigurasi, dan ditulis.
Atribut ini mendefinisikan bagaimana properti dapat diakses (itu dibaca ?, itu dapat ditulis?) Dalam JavaScript, semua atribut dapat dibaca, tetapi hanya nilai atribut dapat diubah (dan hanya jika properti ditulis). (ECMAScript 5 memiliki metode untuk kedua mendapatkan dan mengatur semua atribut properti)
Prototipe Properti
Objek JavaScript mewarisi sifat dari prototipe mereka.
The delete kata kunci tidak menghapus sifat diwariskan, tetapi jika Anda menghapus prototype properti, itu akan mempengaruhi semua benda warisan dari prototipe.
Fungsi Dalam JavaScript
Fungsi Deklarasi
Sebelumnya dalam tutorial ini, Anda belajar bahwa fungsi dideklarasikan dengan sintaks berikut:
finction functionName ( parameters ) ( code to be executed }
Fungsi dinyatakan tidak dieksekusi segera. Mereka "disimpan untuk digunakan nanti", dan akan dieksekusi kemudian, ketika mereka dipanggil (dipanggil).
<!DOCTYPE html>
<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Titik koma digunakan untuk memisahkan laporan JavaScript dieksekusi.
Sejak deklarasi fungsi tidak pernyataan dieksekusi, itu tidak umum untuk mengakhirinya dengan titik koma.
Fungsi Ekspresi
Sebuah fungsi JavaScript juga dapat didefinisikan menggunakan ekspresi.
Ekspresi fungsi dapat disimpan dalam variabel:
<!DOCTYPE html>
<html>
<body>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Setelah ekspresi fungsi telah disimpan dalam variabel, variabel dapat digunakan sebagai fungsi:
<!DOCTYPE html>
<html>
<body>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
Fungsi di atas sebenarnya fungsi anonim (fungsi tanpa nama).
Fungsi disimpan dalam variabel tidak perlu nama fungsi. Mereka selalu dipanggil (disebut) menggunakan nama variabel.
Fungsi di atas diakhiri dengan titik koma karena merupakan bagian dari pernyataan dieksekusi.
The Function() Konstruktor
Seperti yang Anda lihat pada contoh sebelumnya, fungsi JavaScript didefinisikan dengan function kata kunci.
Fungsi juga dapat didefinisikan dengan built-in fungsi JavaScript konstruktor disebut Function() .
Anda benar-benar tidak harus menggunakan fungsi konstruktor. Contoh di atas adalah sama dengan menulis.
Function Hosting
Sebelumnya dalam tutorial ini, Anda belajar tentang "hoisting" .
Mengangkat adalah perilaku default JavaScript untuk bergerak deklarasi ke atas ruang lingkup saat.
Mengangkat berlaku untuk deklarasi variabel dan deklarasi fungsi.
Karena itu, fungsi JavaScript bisa disebut sebelum mereka dinyatakan:
myFunction(5);
function myFunction(y) {
return y * y;
}
Fungsi didefinisikan menggunakan ekspresi tidak mengangkat.
Fungsi Self-Meminjam
Fungsi ekspresi dapat dibuat "permintaan otomatis".
Sebuah ekspresi diri-memohon dipanggil (mulai) secara otomatis, tanpa dipanggil.
Fungsi ekspresi akan mengeksekusi secara otomatis jika ungkapan diikuti oleh () .
Anda tidak dapat diri memohon deklarasi fungsi.
Anda harus menambahkan tanda kurung di sekitar fungsi untuk menunjukkan bahwa itu adalah ekspresi fungsi:
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
Fungsi di atas sebenarnya merupakan fungsi diri memohon anonymous (fungsi tanpa nama).
Fungsi Bisa Digunakan Sebagai nilai-nilai;
function myFungtion(,a b) {
return a * b;
}
var x = myFunction(4, 3);
Fungsi JavaScript dapat digunakan dalam ekspresi:
Function myFungtion(a, b) {
reurn a * b;
}
var x = myFunction(4, 3) * 2;
Fungsi yang Objets
The typeof operator dalam JavaScript mengembalikan "function" untuk fungsi.
Tapi, fungsi JavaScript dapat digambarkan sebagai obyek.
Fungsi JavaScript memiliki kedua sifat dan metode.
Properti arguments.length mengembalikan jumlah argumen yang diterima ketika fungsi itu dipanggil:
Function myFungtion(a, b) {
reurn arguments.length;
}
The toString() metode mengembalikan fungsi sebagai string:
Function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toStrong();
G. Kesimpulan
Fungsi didefinisikan sebagai properti dari objek, disebut metode untuk objek.
Sebuah fungsi yang dirancang untuk membuat objek baru, disebut objek konstruktor.
H. Referensi
1. http://www.w3ii.com/id/js/js_object_definition.html
![]Kesukaan](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLj9fuyJzNU2iCkdEt_6-9Hihf63Zgl7W2nrsnMxAIkuiT9vZbcgdYN6J_OLaFwHZsjbvh5uLvfb0f5X-9vfa9wIVDlslyMRRjrVyUNpxyzYPhwBhTPLlOJcOrkKXxHBZjkEooytt272wm/s1600/a.jpg)
Tidak ada komentar