Tutorial JS

JS RUMAH Pengenalan JS JS Dimana Keluaran JS Pernyataan JS Sintaks JS Komentar JS Variabel JS JS Let JS Const Operator JS JS Aritmatika Tugas JS Tipe Data JS Fungsi JS Objek JS Acara JS String JS Metode String JS Pencarian String JS Template String JS Nomor JS Metode Nomor JS JS Array Metode Array JS Sortir Array JS Iterasi Array JS JS Array Const Tanggal JS Format Tanggal JS Metode Dapatkan Tanggal JS Metode Penetapan Tanggal JS JS Matematika JS Acak JS Boolean Perbandingan JS Ketentuan JS Beralih JS JS Loop Untuk JS Loop Untuk Masuk JS Loop Untuk Of JS Loop Sementara Istirahat JS JS Iterable JS Set Peta JS Tipe JS Konversi Tipe JS JS Bitwise JS RegExp Kesalahan JS Lingkup JS Pengangkatan JS Mode Ketat JS JS Kata Kunci ini Fungsi Panah JS Kelas JS JS JSON Debug JS Panduan Gaya JS Praktik Terbaik JS Kesalahan JS Kinerja JS Kata-kata Cadangan JS

Versi JS

Versi JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Tepi Sejarah JS

Objek JS

Definisi Objek Properti Objek Metode Objek Tampilan Objek Aksesor Objek Konstruktor Objek Prototipe Objek Obyek Iterable Set Objek Peta Objek Referensi Objek

Fungsi JS

Definisi Fungsi Parameter Fungsi Panggilan Fungsi Panggilan Fungsi Fungsi Terapkan Penutupan Fungsi

Kelas JS

Perkenalan Kelas Warisan Kelas Kelas Statis

JS Asinkron

Panggilan Balik JS JS Asinkron JS Janji JS Async/Menunggu

JS HTML DOM

Pengenalan DOM Metode DOM Dokumen DOM Elemen DOM HTML DOM Formulir DOM CSS DOM Animasi DOM Acara DOM Pendengar Acara DOM Navigasi DOM Node DOM Koleksi DOM Daftar Node DOM

JS Browser BOM

Jendela JS Layar JS Lokasi JS Sejarah JS JS Navigator Peringatan Munculan JS Waktu JS JS Cookies

JS Web API

Pengantar API Web API Formulir Web API Riwayat Web API Penyimpanan Web API Pekerja Web API Pengambilan Web API Geolokasi Web

JS AJAX

Pengenalan AJAX AJAX XMLHttp Permintaan AJAX Tanggapan AJAX File XML AJAX AJAX PHP AJAX ASP Basis Data AJAX Aplikasi AJAX Contoh AJAX

JS JSON

Perkenalan JSON Sintaks JSON JSON vs XML Tipe Data JSON Penguraian JSON Stringify JSON Objek JSON Array JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Pemilih jQuery jQuery HTML jQuery CSS jQuery DOM

Grafik JS

Grafik JS JS Kanvas JS Plotly JS Chart.js Bagan Google JS JS D3.js

Contoh JS

Contoh JS JS HTML DOM Masukan HTML JS Objek HTML JS Acara HTML JS JS Browser Editor JS Latihan JS kuis JS Sertifikat JS

Referensi JS

Objek JavaScript Objek DOM HTML


Konstruktor Objek JavaScript


Contoh

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Ini dianggap praktik yang baik untuk memberi nama fungsi konstruktor dengan huruf pertama huruf besar.


Tipe Objek (Cetak Biru) (Kelas)

Contoh-contoh dari bab-bab sebelumnya terbatas. Mereka hanya membuat objek tunggal.

Terkadang kita membutuhkan " cetak biru " untuk membuat banyak objek dengan "tipe" yang sama.

Cara membuat "tipe objek", adalah dengan menggunakan fungsi konstruktor objek .

Dalam contoh di atas, function Person()adalah fungsi konstruktor objek.

Objek dengan tipe yang sama dibuat dengan memanggil fungsi konstruktor dengan newkata kunci:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


Kata Kunci ini

Dalam JavaScript, hal yang disebut thisadalah objek yang "memiliki" kode tersebut.

Nilai this, ketika digunakan dalam suatu objek, adalah objek itu sendiri.

Dalam sebuah fungsi konstruktor thistidak memiliki nilai. Ini adalah pengganti objek baru. Nilai dari thisakan menjadi objek baru ketika objek baru dibuat.

Perhatikan bahwa thisini bukan variabel. Ini adalah kata kunci. Anda tidak dapat mengubah nilai this.


Menambahkan Properti ke Objek

Menambahkan properti baru ke objek yang sudah ada itu mudah:

Contoh

myFather.nationality = "English";

Properti akan ditambahkan ke myFather. Tidak untuk ibuku. (Tidak untuk objek orang lain).


Menambahkan Metode ke Objek

Menambahkan metode baru ke objek yang sudah ada itu mudah:

Contoh

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

Metode ini akan ditambahkan ke myFather. Tidak untuk ibuku. (Tidak untuk objek orang lain).


Menambahkan Properti ke Konstruktor

Anda tidak dapat menambahkan properti baru ke konstruktor objek dengan cara yang sama seperti Anda menambahkan properti baru ke objek yang sudah ada:

Contoh

Person.nationality = "English";

Untuk menambahkan properti baru ke konstruktor, Anda harus menambahkannya ke fungsi konstruktor:

Contoh

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Dengan cara ini properti objek dapat memiliki nilai default.


Menambahkan Metode ke Konstruktor

Fungsi konstruktor Anda juga dapat menentukan metode:

Contoh

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

Anda tidak dapat menambahkan metode baru ke konstruktor objek dengan cara yang sama seperti Anda menambahkan metode baru ke objek yang sudah ada.

Menambahkan metode ke konstruktor objek harus dilakukan di dalam fungsi konstruktor:

Contoh

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

Fungsi changeName() memberikan nilai nama ke properti LastName orang tersebut.

Sekarang Anda Dapat Mencoba:

myMother.changeName("Doe");

JavaScript tahu orang mana yang Anda bicarakan dengan "mengganti" ini dengan myMother .


Konstruktor JavaScript bawaan

JavaScript memiliki konstruktor bawaan untuk objek asli:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Objek Math()tidak ada dalam daftar. Mathadalah objek global. Kata newkunci tidak dapat digunakan pada Math.


Tahukah kamu?

Seperti yang Anda lihat di atas, JavaScript memiliki versi objek dari tipe data primitif String, Number, dan Boolean. Tetapi tidak ada alasan untuk membuat objek yang kompleks. Nilai primitif jauh lebih cepat:

Gunakan literal string ""alih-alih new String().

Gunakan literal angka 50alih-alih new Number().

Gunakan literal boolean true / falsealih-alih new Boolean().

Gunakan literal objek {}alih-alih new Object().

Gunakan literal array []alih-alih new Array().

Gunakan literal pola /()/alih-alih new RegExp().

Gunakan ekspresi fungsi () {}alih-alih new Function().

Contoh

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

Objek String

Biasanya, string dibuat sebagai primitif:firstName = "John"

Tetapi string juga dapat dibuat sebagai objek menggunakan newkata kunci:
firstName = new String("John")

Pelajari mengapa string tidak boleh dibuat sebagai objek di bab JS Strings .


Objek Nomor

Biasanya, angka dibuat sebagai primitif:x = 30

Tetapi angka juga dapat dibuat sebagai objek menggunakan newkata kunci:
x = new Number(30)

Pelajari mengapa angka tidak boleh dibuat sebagai objek di bab Nomor JS .


Objek Boolean

Biasanya, boolean dibuat sebagai primitif:x = false

Tetapi boolean juga dapat dibuat sebagai objek menggunakan newkata kunci:
x = new Boolean(false)

Pelajari mengapa boolean tidak boleh dibuat sebagai objek di bab JS Booleans .