Erfahren Sie mehr über JavaScript-Objektzugriffsfunktionen (Getter und Setter)-js-Tutorial-php.cn

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

青灯夜游

Freigeben： 2019-11-29 14:39:24

nach vorne

2904 Leute haben es durchsucht

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

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Beispiel 2:

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;

Nach dem Login kopieren

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!