Maison >interface Web >js tutoriel >En savoir plus sur les accesseurs d'objets JavaScript (Getter et Setter)

En savoir plus sur les accesseurs d'objets JavaScript (Getter et Setter)

青灯夜游avant: 2019-11-29 14:39:242858parcourir

Accesseurs JavaScript (Getters et Setters), ECMAScript 5 (2009) a introduit les Getters et Setters. Les getters et setters vous permettent de définir des accesseurs d'objets (propriétés calculées).

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

JavaScript Getter (get mot-clé)

<!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 (set password)

<!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>

Utiliser la fonction JavaScript ou Getter ?

Quelle est la différence entre ces deux exemples ?

Exemple 1 :

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

Exemple 2 :

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

Exemple 1 Accédez à fullName en fonction : person.fullName(). L'exemple 2 accède à fullName en tant que propriété : person.fullName. Le deuxième exemple fournit une syntaxe plus simple.

Qualité des données

JavaScript garantit une meilleure qualité des données lors de l'utilisation de getters et de setters. lang Dans cet exemple, le langage d'attribut est utilisé pour renvoyer la valeur de l'attribut en majuscule :

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

lang Dans cet exemple, le langage d'attribut est utilisé pour stocker la valeur en majuscule dans l'attribut de langue :

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

Pourquoi utiliser Getter et Setter ?

● Il fournit une syntaxe plus simple

● Il permet la même syntaxe pour les propriétés et les méthodes

● Il garantit une meilleure qualité des données

● Il est utile de faire des choses en coulisses

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

La méthode Object.defineProperty() peut également être utilisée pour ajouter des Getters et Setter :

// 定义对象
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;

Prise en charge du navigateur

Les Getters et Setter ne sont pas pris en charge dans Internet Explorer 8 ou version antérieure :

Internet Explorer

Chrome

FireFox

Safari

Opera th>