ECMAScript 5 Objek JS

ECMAScript 5 menambahkan banyak Metode Objek baru ke JavaScript.

// Menambah atau mengubah properti objek
Object.defineProperty(object, property, descriptor)

// Menambah atau mengubah banyak properti objek
Object.defineProperties(object, descriptors)

// Mengakses Properti
Object.getOwnPropertyDescriptor(object, property)

// Mengembalikan semua properti sebagai array
Object.getOwnPropertyNames(object)

// Mengembalikan properti enumerable sebagai array
Object.keys(object)

// Mengakses prototipe
Object.getPrototypeOf(object)

// Mencegah penambahan properti ke objek
Object.preventExtensions(object)
// Mengembalikan nilai true jika properti dapat ditambahkan ke objek
Object.isExtensible(object)

// Mencegah perubahan properti objek (bukan nilai)
Object.seal(object)
// Mengembalikan nilai true jika objek disegel
Object.isSealed(object)

// Mencegah perubahan apa pun pada objek
Object.freeze(object)
// Mengembalikan nilai true jika objek dibekukan
Object.isFrozen(object)

Section Artikel

1 Mengubah Nilai Properti
2 Mengubah Data Meta
3 ES5 memungkinkan getter dan setter diubah:
4 Mendaftar Semua Properti
5 Mendaftar Properti yang Dapat Dihitung
6 Menambahkan Properti
7 Menambahkan Getters dan Setter
8 Contoh Penghitung

Mengubah Nilai Properti

Sintaks

Object.defineProperty (objek, properti, {nilai: nilai})

Contoh ini mengubah nilai properti:

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Object.defineProperty() </h2>

<p> Contoh ini mengubah nilai properti. </p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN" 
};
// Change a property
Object.defineProperty(person, "language", {value:"NO"})
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Mengubah Data Meta

ES5 memungkinkan data meta properti berikut diubah:

writable: true // Nilai properti dapat diubah
enumerable: true // Properti dapat disebutkan
Configurable: true // Properti dapat dikonfigurasi ulang

writable: false // Nilai properti tidak dapat diubah
enumerable: false // Properti tidak dapat dihitung
Configurable: false // Properti tidak dapat dikonfigurasi ulang

ES5 memungkinkan getter dan setter diubah:

// Mendefinisikan getter
get: function () {return language}
// Mendefinisikan setter
set: fungsi (nilai) {bahasa = nilai}

Contoh ini menjadikan bahasa hanya-baca:

Object.defineProperty(person, "language", {writable:false});

Contoh ini membuat bahasa tidak dapat dihitung:

Object.defineProperty(person, "language", {enumerable:false});

Mendaftar Semua Properti

Contoh ini mencantumkan semua properti suatu objek:

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Object.getOwnPropertyNames() </h2>

<p> Contoh ini mencantumkan properti suatu objek. </p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
}
// Change Property
Object.defineProperty(person, "language", {enumerable:false});
// Display Properties
document.getElementById("demo").innerHTML = Object.getOwnPropertyNames(person);
</script>

</body>
</html>

Mendaftar Properti yang Dapat Dihitung

Contoh ini mencantumkan hanya properti yang dapat dihitung dari suatu objek:

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Object.keys() </h2>

<p> Contoh ini mencantumkan properti yang dapat dihitung dari suatu objek. </p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
}
// Change Property
Object.defineProperty(person, "language", {enumerable:false});
// Display Properties
document.getElementById("demo").innerHTML = Object.keys(person);
</script>

</body>
</html>

Menambahkan Properti

Contoh ini menambahkan properti baru ke objek:

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Object.defineProperty() </h2>

<p> Contoh ini menambahkan properti baru ke objek. </p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};
// Add a property
Object.defineProperty(person, "year", {value:"2008"})
document.getElementById("demo").innerHTML = person.year;
</script>

</body>
</html>

Menambahkan Getters dan Setter

Metode Object.defineProperty () juga bisa digunakan untuk menambahkan Getters dan Setter:

<!DOCTYPE html>
<html>
<body>

<h2> JavaScript Object.defineProperty() </h2>

<p> Contoh ini menggunakan metode defineProperty() untuk menambahkan getter dan setter. </p>

<p id="demo"></p>

<script>
// Create an object:
var person = {firstName:"John", lastName:"Doe"};

// Define a getter
Object.defineProperty(person, "fullName", {
  get : function () {return this.firstName + " " + this.lastName;}
});

// Display full name
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Contoh Penghitung

<!DOCTYPE html>
<html>
<body>

<h2> Getter dan Setter JavaScript </h2>

<p> Sempurna untuk membuat penghitung: </p>

<p id="demo"></p>

<script>
// Define an object
var obj = {counter:0};

// Define Setters and Getters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});

// Play with counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

javascript