JavaScript-tilbehør

Indholdsfortegnelse

JavaScript-tilbehør (Getters og Setters)

ECMAScript 5 (ES5 2009) introducerede Getter og Setters.

Gettere og sættere giver dig mulighed for at definere objekttilbehør (Computed Ejendomme).

JavaScript Getter (Get-søgeordet)

Dette eksempel bruger en lang egenskab til at hente værdien af egenskaben language.

Eksempel

// 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;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set object properties via methods.</p>

<p>This example uses a lang property to get the value of the language property:</p>

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

<script>
// 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;
</script>

</body>
</html>

JavaScript Setter (det indstillede søgeord)

Dette eksempel bruger en lang egenskab til at indstille værdien af egenskaben language.

Eksempel

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;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

<p>This example uses a lang property to set the value of the language property.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "NO",
  set lang(value) {
    this.language = value;
  }
};

// Set a property using set:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

JavaScript-funktion eller getter?

Hvad er forskellene mellem disse to eksempler?

Eksempel 1

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();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object data can be accessed using property stored as a function.</p>

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

<script>
// Create an object:
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();
</script>

</body>
</html>

Eksempel 2

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;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Methods</h2>

<p>Object data can be accessed using a getter.</p>

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

<script>
// Create an object:
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;
</script>

</body>
</html>

Eksempel 1 få adgang til fuldt Navn som en funktion: person.fuldt Navn().

Eksempel 2 få adgang til fuldnavn som en egenskab: person.fuldt navn.

Det andet eksempel giver en enklere syntaks.

Datakvalitet

JavaScript kan sikre bedre datakvalitet ved brug af gettere og sættere.

Brug af egenskaben lang i dette eksempel returnerer værdien af egenskaben language med store bogstaver:

Eksempel

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

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

Brug af egenskaben lang i dette eksempel gemmer et stort bogstav værdi i egenskaben language:

Eksempel

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

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

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Getters and setters allow you to get and set properties via methods.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

// Set a property using set:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
</script>

</body>
</html>

Hvorfor bruge getters og settere?

Det giver enklere syntaks
Det tillader ens syntaks for egenskaber og metoder
Det kan sikre bedre datakvalitet
Det er nyttigt til at gøre ting bag kulisserne

Object.defineProperty()

Metoden Object.defineProperty() kan også bruges til at tilføje Getters og Settere:

Et modeksempel

// Define object
const 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 the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Getters and Setters</h2>

<p>Perfect for creating counters:</p>

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

<script>
// Define an object
const 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>