ACCESSO AGLI OGGETTI JAVASCRIPT

ECMAScript 5 (ES5 2009) ha introdotto Getter e Setter.

Esse consentono di definire gli oggetti di accesso (proprietà calcolate).

LA KEYWORD GET

Questo esempio usa una proprietà lang per ottenere il valore della proprietà language.

// Create an object:
const person = {
firstName: “John”,
lastName: “Doe”,
language: “en”,
get lang() {
return this.language;
}
};

// Display data from the object using a getter:
document.getElementById(“demo”).innerHTML = person.lang;

LA KEYWORD SET

Questo esempio usa una proprietà lang per impostare il valore della proprietà language.

const person = {
firstName: “John”,
  lastName: “Doe”,
  language: “”,
set lang(lang) {
    this.language = lang;
  }
};

// Set an object property using a setter:
person.lang = “en”;

// Display data from the object:
document.getElementById(“demo”).innerHTML = person.language;

FUNCTION OR GETTER?

const person = {
firstName: “John”,
lastName: “Doe”,
fullName: function() {
return this.firstName + ” ” + this.lastName;
}
};

// Display data from the object using a method:
document.getElementById(“demo”).innerHTML = person.fullName();

const person = {
firstName: “John”,
lastName: “Doe”,
get fullName() {
return this.firstName + ” ” + this.lastName;
}
};

// Display data from the object using a getter:
document.getElementById(“demo”).innerHTML = person.fullName;

Il secondo esempio fornisce una sintassi più semplice.

PERCHE’ USARE GETTER E SETTER?

Fornisce una sintassi più semplice
Consente la stessa sintassi per proprietà e metodi
Può garantire una migliore qualità dei dati
È utile per fare cose dietro le quinte

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>GETTER AND SETTER</title>
</head>
<body>
    <script type="rocketlazyloadscript">    
        /*--Il metodo Object.defineProperty() può essere utilizzato 
            anche per aggiungere Getter e Setter:*/
            
        // Define object
        const obj = {counter : 0};

// Define setters
        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 the counter:
        obj.reset;
        obj.add = 15;
        obj.subtract = 10;
        obj.increment;
        obj.decrement;
        console.log(obj.counter);
    </script>
</body>
</html>

LINK AGLI OGGETTI JAVASCRIPT

OGGETTI JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB