Cara menggunakan PROERTIES pada JavaScript

Question

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan property className JavaScript. Perlu teman-teman ketahui sebelumnya, className adalah salah satu property javascript yang berfungsi untuk menetapkan atau menentukan suatu nilai dari attribute class element. Seperti pada contoh disini saya memiliki struktur dokumen html seperti berikut :

Table of Contents Show

Properti Statis
Pewarisan properti dan metode statis
Apa itu properti dalam JavaScript?
Apa saja objek JavaScript?
Apa Itu this di JavaScript?

<!DOCTYPE html>

<head>

<title>cara menggunakan propertyclassName JavaScript</title>

</head>

<body>

<div>Ini adalah contoh element tanpa attribute class</div>

<button>Add Class</button>

</body>

</html>

Seperti yang kalian lihat dari struktur kode html diatas, dimana saya memiliki satu element <div> yang tidak memiliki attribute apapun, dan pada contoh disini saya akan menambahkan atau menetapkan attribute class beserta dengan nama nilai dari attribute tersebut dari event onclick button yang ada di struktur kode html tersebut. Dan untuk kode JavaScriptnya adalah seperti berikut :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<head>

<title>caramenggunakan propertyclassNameJavaScript</title>

</head>

<style>

.active{

background:red;

}

</style>

<body>

<div>Ini adalah contoh element tanpa attribute class</div>

<button onclick="fungsiSaya()">AddClass</button>

</body>

functionfungsiSaya(){

document.getElementsByTagName("div")[0].className="active";

}

</script>

</html>

Sampai disini penjelasan saya mengenai cara menggunakan property className JavaScript, semoga bermanfaat.

Kita juga dapat menetapkan metode ke fungsi kelas itu sendiri, bukan ke " prototipe "-nya. Metode seperti itu disebut static.

Di dalam kelas, mereka ditambahkan oleh kata kunci static, seperti ini:

class User {
  static staticMethod() {
    alert(this === User);
  }
}

User.staticMethod(); // true

Itu sebenarnya sama dengan menetapkannya sebagai properti secara langsung:

class User {}

User.staticMethod = function () {
  alert(this === User);
};

User.staticMethod(); // true

Nilai this dalam panggilan User.staticMethod() adalah konstruktor kelas User itu sendiri (aturan “object before dot”).

Biasanya, metode statis digunakan untuk mengimplementasikan fungsi yang dimiliki kelas, tetapi tidak untuk objek tertentu darinya.

Misalnya, kita punya objek Article dan membutuhkan sebuah fungsi untuk membandingkan mereka. Solusi natural adalah menambahkan metode Article.compare, seperti ini:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}

// penggunaan
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1))
];

articles.sort(Article.compare);

alert( articles[0].title ); // CSS

Di sini Article.compare berdiri “di atas” articles, sebagai alat untuk membandingkannya. Ini bukan metode article, melainkan seluruh kelas.

Contoh lain adalah apa yang disebut metode “factory”. Bayangkan, kita butuh beberapa cara untuk membuat article:

Buat dengan parameter yang diberikan (title, date dsb).
Buat article kosong dengan tanggal hari ini.
…atau yang lainnya.

Cara pertama dapat diterapkan oleh konstruktor. Dan untuk yang kedua kita bisa membuat metode statis kelas.

Seperti Article.createTodays() di sini:

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }

  static createTodays() {
    // ingat, this = Article
    return new this("Today's digest", new Date());
  }
}

let article = Article.createTodays();

alert( article.title ); // Today's digest

Sekarang setiap kali kita perlu membuat today’s digest, kita dapat memanggil Article.createTodays(). Sekali lagi, itu bukan metode article, tapi metode seluruh kelas.

Metode statis juga digunakan dalam kelas terkait basis data untuk mencari/menyimpan/menghapus entri dari basis data, seperti ini:

// dengan asumsi Article adalah kelas khusus untuk mengelola articles
// metode statis untuk menghapus article:
Article.remove({ id: 12345 });

Properti Statis

Tambahan baru-baru ini

Ini adalah tambahan terbaru untuk bahasa ini. Contoh berfungsi di Chrome baru-baru ini.

Properti statis juga dimungkinkan, mereka terlihat seperti properti kelas biasa, tetapi diawali dengan static:

class Article {
  static publisher = 'Ilya Kantor';
}

alert(Article.publisher); // Ilya Kantor

Itu sama dengan penugasan langsung ke Article:

Article.publisher = 'Ilya Kantor';

Pewarisan properti dan metode statis

Properti dan metode statis diwarisi.

Misalnya, Animal.compare dan Animal.planet dalam kode di bawah ini diwariskan dan dapat diakses sebagai Rabbit.compare dan Rabbit.planet:

class Animal {
  static planet = "Earth";

  constructor(name, speed) {
    this.speed = speed;
    this.name = name;
  }

  run(speed = 0) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  static compare(animalA, animalB) {
    return animalA.speed - animalB.speed;
  }

}

// Mewarisi dari Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}

let rabbits = [
  new Rabbit("White Rabbit", 10),
  new Rabbit("Black Rabbit", 5)
];

rabbits.sort(Rabbit.compare);

rabbits[0].run(); // Black Rabbit runs with speed 5.

alert(Rabbit.planet); // Earth

Sekarang kita dapat memanggil Rabbit.compare, yang diwariskan Animal.compare akan dipanggil.

Bagaimana cara kerjanya? Sekali lagi, menggunakan prototipe. Seperti yang mungkin sudah kamu duga, extends memberi Rabbit sebagai [[Prototype]] mengacu kepada Animal.

Jadi, Rabbit extends Animal membuat dua acuan [[Prototype]]:

Rabbit fungsi prototypally mewarisi dari fungsi Animal.
Rabbit.prototype prototypally mewarisi dari Animal.prototype.

Hasilnya, pewarisan berfungsi baik untuk metode reguler dan statis.

Di sini, mari kita periksa dengan kode:

class Animal {}
class Rabbit extends Animal {}

// untuk statis
alert(Rabbit.__proto__ === Animal); // true

// untuk metode reguler
alert(Rabbit.prototype.__proto__ === Animal.prototype); // true

Ringkasan

Metode statis digunakan untuk fungsionalitas yang termasuk dalam kelas “secara keseluruhan”. Ini tidak terkait dengan instance kelas konkret.

Sebagai contoh, metode perbandingan Article.compare(article1, article2) atau metode factory Article.createTodays().

Mereka diberi label dengan kata static dalam deklarasi kelas.

Properti statis digunakan ketika kita ingin menyimpan data tingkat kelas, juga tidak terikat pada sebuah instance.

Sintaksnya adalah:

class MyClass {
  static property = ...;

  static method() {
    ...
  }
}

Secara teknis, deklarasi statis sama dengan menetapkan ke kelas itu sendiri:

MyClass.property = ...
MyClass.method = ...

Properti dan metode statis diwarisi.

Untuk class B extends A prototipe dari kelas B itu sendiri menunjuk ke A: B.[[Prototype]] = A. Jadi jika bidang tidak ditemukan di B, pencarian dilanjutkan di A.

Apa itu properti dalam JavaScript?

Properti JavaScript Properti adalah nilai yang berkaitan dengan objek pada JavaScript. Sedangkan objek JavaScript adalah kumpulan properti yang tidak berurutan. Properti biasanya dapat diubah, ditambahkan, dan dihapus, tetapi beberapa hanya dapat dibaca.

Apa saja objek JavaScript?

Objek JavaScript adalah entitas yang independen di mana ia memiliki metode dan properti. Nilai properti dapat berupa fungsi, dalam hal ini properti tersebut dikenal sebagai metode. dalam JavaScript Anda tidakd apat mendeklarasikan angka, string, dan boolean sebagai objek.