JavaScript getter setter的使用

Get/Set是ECMAScript 5 新增的特性，如果不考虑兼容低端浏览器，可以使用。

废话不多说，直接上Get/Set的具体案例，经验都是一点一点从实践中获得的。

---

首先我们来明确需求：我希望通过一个输入框输入出生年份，JS不调用函数直接通过变量赋值的方式就能计算出年龄并在呈现在页面上。

第一步，在页面上定义一个input标签，用于触发事件。

<input type="text" placeholder="请输入年份" id="testInput"/>

第二步，在JS里定义一个对象，对象里使用Get/Set

(function(){
    var age=18;
    var p={
        get r(){    //使用get set的时候，不使用function关键字
            return age;
        },
        set r(value){   //通过变量的方式获取传入的值，注意，这里不是function
            if(value>100){
                age=new Date().getFullYear() - value; //获取当前年份，减去输入的值，同时为age赋值
            }else{
                age=value;
            }
        }
    };

    var testEl=document.getElementById("testInput");
    testEl.onblur=function(){
        p.r=this.value; //通过变量赋值的方法将Input的值赋给r，此处不能使用p.r()的函数调用方式，因为p.r不是一个function
        var node=document.getElementsByTagName("script")[0];
        var hm=document.createElement("div");
        var textNode=document.createTextNode("输出的结果："+p.r);
        hm.appendChild(textNode);
        node.parentNode.insertBefore(hm,node);//将执行的结果呈现在页面上
    }
})();

运行的结果：

---

以下是摘自JavaScript权威指南：
如果属性同时具有getter和setter方法，那么它是一个读/写属性。
如果它只有getter方法，那么它是一个只读属性。
如果它只有setter方法，那么它是一个只写属性（数据属性中有一些例外），读取只写属性总是返回undefined。