ITPub博客

首页 > 应用开发 > Javascript > 为什么使用Getter和Setter?Getter和Setter有什么区别?

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

原创 Javascript 作者:web全栈 时间:2019-09-29 08:44:08 0 删除 编辑

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











来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69942367/viewspace-2658652/ ,如需转载,请注明出处,否则将追究法律责任。

下一篇: PHP 日历函数参考
请登录后发表评论 登录
全部评论

注册时间:2019-07-26

  • 博文量
    49
  • 访问量
    30024