属性getter和setter

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

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

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

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

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

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

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

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

};

存取器属性定义为一个或两个和属性同名的函数，这个函数定义没有使用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前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！

属性getter和setter相关推荐

第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解
第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解一. 引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...
JavaScript中闭包实现的私有属性的getter()和setter()方法
注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
Java面向对象之静态属性静态方法、访问权限、getter与setter
一.静态 1.static静态的特点 (1)数据共享 (2)属于类的.并不属于对象 (3)优先于对象产生的 2.优于对象产生(构造器解释) 在程序执行时,是先创建静态构造器,再创建通用构造器. pub ...
Vue中computed 计算机属性、getter、setter
计算属性在模板表达式中放入太多逻辑时,会让模板重且难以维护.比如: // 错误示例 <div id="example">{{ message.split('').re ...
计算属性computed里面的getter和setter
参考一: 在 Vue 中,computed 的属性可以被视为是 data 一样,可以读取和设值,因此在 computed 中可以分成 getter(读取) 和 setter(设值),一般情况下是没有 ...
JavaScript基础 - 21 （精确设置对象属性：value、writable、configurable、enumerable、getter、setter）
对象的每个属性,额外有几个选项: value:默认值 writable:是否可写 configurable:是否可以重新配置 enumerable:是否可遍历 get:getter,读取属性时触发, ...
Swift快速入门之getter 和 setter
属性可以用getter和setter方法的形式提供. <code class="hljs lasso has-numbering" style="display: ...
基于注解处理器开发自动生成getter和setter方法的插件
昨天无意中,逛到了lombok的网站,并看到了首页的5分钟视频,视频中的作者只是在实体类中写了几个字段,就可以自动编译为含setter.getter.toString()等方法的class文件.看着挺 ...
[译] Lenses：可组合函数式编程的 Getter 和 Setter（第十九部分）
原文地址:Lenses: Composable Getters and Setters for Functional Programming 原文作者:Eric Elliott 译文出自:掘金翻译计划 ...

属性getter和setter

属性getter和setter相关推荐

最新文章

热门文章