属性getter和setter

咱们知道，对象属性是由名字、值和一组特性构成的。在ECMAScript5 中，属性值能够用一个或两个方法替代，这两个方法就是getter和setter。由getter和setter定义的属性称作“存取器属性”，它不一样于“数据属性”，数据属性只有一个简单的值。前端

当程序查询存取器属性的值时，JavaScript调用getter方法（无参数）。这个方法的返回值就是属性存取表达式的值。当程序设置一个存取器属性的值时，JavaScript调用setter方法，将赋值表达式右侧的值当作参数传入setter。从某种意义上讲，这个方法负责“设置”属性值。能够忽略setter方法的返回值。函数

和数据属性不一样，存取器属性不具备可写性。若是属性同时具备getter和setter方法，那么它是一个读/写属性。若是它只有getter方法，那么它是一个只读属性。若是它只有setter方法，那么它是一个只写属性（数据属性中有一些例外），读取只写属性老是返回undefined。this

定义存取器属性最简单的方法是使用对象直接量语法的一种扩展写法：spa

var o={//普通的数据属性    orm

    data_prop:value,//存取器属性都是成对定义的函数对象

    get accessor_prop(){/*这里是函数体*/},继承

    set accessor_prop(value){/*这里是函数体*/}ip

};get

存取器属性定义为一个或两个和属性同名的函数，这个函数定义没有使用function关键字，而是使用get和（或）set。注意，这里没有使用冒号将属性名和函数体分隔开，但在函数体的结束和下一个方法或数据属性之间有逗号分隔。原型

例如，思考下面这个表示点坐标的对象。它有两个普通的属性x和y分别表示对应点的X坐标和Y坐标，它还有两个等价的存取器属性用来表示点的极坐标：

var p={//x和y是普通的可读写的数据属性

    x:1.0,

    y:1.0,//r是可读写的存取器属性，它有getter和setter.

    //函数体结束后不要忘记带上逗号

    get r(){

        return Math.sqrt(this.x*this.x+this.y*this.y);

    },

    set r(newvalue){

        var oldvalue=Math.sqrt(

            this.x*this.x+this.y*this.y

        );

        var ratio=newvalue/oldvalue;

        this.x*=ratio;

        this.y*=ratio;

    },//theta是只读存取器属性，它只有getter方法

    get theta(){

        return Math.atan2(this.y,this.x);

    }

};

注意在这段代码中getter和setter里this关键字的用法。JavaScript把这些函数当作对象的方法来调用，也就是说，在函数体内的this指向表示这个点的对象，所以，r属性的getter方法能够经过this.x和this.y引用x和y属性。

和数据属性同样，存取器属性是能够继承的，所以能够将上述代码中的对象p当作另外一个“点”的原型。

好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同窗记得点击收藏或者点赞哦！