为什么使用Getter和SetterGetter和Setter有什么区别

64次阅读

共计 1621 个字符，预计需要花费 5 分钟才能阅读完成。

JavaScript 访问器（Getter 和 Setter），ECMAScript 5（2009）介绍了 Getter 和 Setters。Getters 和 setter 允许您定义对象访问器（Computed Properties）。

JavaScript Getter（get 关键字）

   <!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 关键字)

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

为什么使用 Getter 和 Setter？
它提供了更简单的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
在幕后做事情很有用

<!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()方法还可用于添加 Getters 和 Setter

正文完
发表至： javascript
2019-08-30
 0
Javascript-高阶函数after
CSS开关按钮三例
关于javascript:JS-常用的字符串方法总结
只要css就能实现的骨架屏方案