Heim > Artikel > Web-Frontend > Erfahren Sie mehr über JavaScript-Objektzugriffsfunktionen (Getter und Setter)

Erfahren Sie mehr über JavaScript-Objektzugriffsfunktionen (Getter und Setter)

青灯夜游nach vorne: 2019-11-29 14:39:242805Durchsuche

JavaScript-Accessoren (Getter und Setter), ECMAScript 5 (2009) führte Getter und Setter ein. Mit Gettern und Settern können Sie Objektzugriffsfunktionen (berechnete Eigenschaften) definieren.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

JavaScript Getter (get keyword)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2>JavaScript Getters和Setters</h2>

<p> Getters和setter允许您通过方法获取和设置属性。</p>

<p>此示例使用lang属性获取语言属性的值。</p>

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

<script>
    // 新建一个对象。
    var person = {
        firstName: "John",
        lastName : "Doe",
        language : "en",
        get lang() {
            return this.language;
        }
    };
    // 使用getter显示来自对象的数据：
    document.getElementById("demo").innerHTML = person.lang;
</script>

</body>
</html>

JavaScript Setter (Schlüsselwort festlegen)

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JavaScript Getters和Setters</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p> Getters和setter允许您通过方法获取和设置属性。</p>

<p>此示例使用lang属性设置语言属性的值。</p>

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

<script>
    // Create an object:
    var 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 oder Getter verwenden?

Was ist der Unterschied zwischen diesen beiden Beispielen?

Beispiel 1:

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用方法显示对象的数据：
document.getElementById("demo").innerHTML = person.fullName();

Beispiel 2:

var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

Beispiel 1 Zugriff auf fullName als Funktion: person.fullName(). Beispiel 2 greift auf fullName als Eigenschaft zu: person.fullName. Das zweite Beispiel bietet eine einfachere Syntax.

Datenqualität

JavaScript sorgt für eine bessere Datenqualität bei der Verwendung von Gettern und Settern. lang In diesem Beispiel wird das Attribut language verwendet, um den Wert des Attributs in Großbuchstaben zurückzugeben:

// 创建一个对象:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// 使用getter显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

lang In diesem Beispiel wird das Attribut language verwendet, um den Wert in Großbuchstaben im Sprachattribut zu speichern:

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// 使用setter设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

Warum Getter und Setter verwenden?

● Es bietet eine einfachere Syntax

● Es ermöglicht die gleiche Syntax für Eigenschaften und Methoden

● Es gewährleistet eine bessere Datenqualität

● Es ist nützlich, Dinge hinter den Kulissen zu erledigen

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>js</title>
<body>

<h2> JavaScript Getters和Setters </h2>

<p>完美的创建反对象：</p>

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

<script>
    var obj = {
        counter : 0,
        get reset() {
            this.counter = 0;
        },
        get increment() {
            this.counter++;
        },
        get decrement() {
            this.counter--;
        },
        set add(value) {
            this.counter += value;
        },
        set subtract(value) {
            this.counter -= value;
        }
    };
    // Play with the counter:
    obj.reset;
    obj.add = 5;
    obj.subtract = 1;
    obj.increment;
    obj.decrement;
    // Display the counter:
    document.getElementById("demo").innerHTML = obj.counter;
</script>

</body>
</html>

Object.defineProperty()

Die Methode Object.defineProperty() kann auch verwendet werden, um Getter und Setter hinzuzufügen:

// 定义对象
var obj = {counter : 0};
// 定义 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 = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Browserunterstützung

Getter und Setter werden in Internet Explorer 8 oder früher nicht unterstützt:

Internet Explorer

Chrome

FireFox

Safari

Opera th>

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0+	支持	支持	支持	支持

Erfahren Sie mehr über JavaScript-Objektzugriffsfunktionen (Getter und Setter)

9.0+

Unterstützt

Unterstützung div>

Unterstützung

Dieser Artikel stammt aus der Rubrik JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über JavaScript-Objektzugriffsfunktionen (Getter und Setter). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:51cto.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：three.js verwendet GPU, um Objekte auszuwählen und Schnittpositionen zu berechnenNächster Artikel：three.js verwendet GPU, um Objekte auszuwählen und Schnittpositionen zu berechnen

In Verbindung stehende Artikel

Mehr sehen