JavaScript对象访问器属性
对象访问器就是setter和getter,他们的作用就是
- 提供另外一种方法来获取或者设置对象的属性值,
- 并且在获取和设置的时候,可以用一定的其他操作。
看下面代码:
<script>
var person = {
_name : "abc", //注意此处的_name有一个下划线
};
Object.defineProperty(person,"name",{
//注意第二个参数的前面没有下划线,所以_name和name是两个不同的属性
set : function(value){
this._name = "new name " + value;
//注意这里是给_name属性赋值
},
get : function(){
return "this is name get by function : " + this._name;
//注意这里是返回字符串加上_name的值
}
});
//到这里,person于是就有了两个属性:_name和name属性 // 直接获取_name属性
console.log(person._name); //abc //通过name属性来间接获取_name的值,因为会执行name属性的getter访问器属性(方法)
console.log(person.name); //this is name get by function : abc // 直接修改_name属性
person._name = "xyz";
console.log(person._name); //xyz //修改name属性,但是name属性的setter访问器属性(方法),会作用到_name属性上
person.name = "wtf"; //该字符串会在前面加上new name,然后在赋值给_name
console.log(person._name); //new name wtf
console.log(person.name); //this is name get by function : new name wtf
</script>
看完代码,你可能觉得setter和getter有点多余,直接使用原来的变量就能实现,为何要多此一举?
其实有些情况setter和getter很使用,比如在设置属性的时候需要将属性值做一些处理,当然这些处理可以在外部定义函数实现,也可以直接处理之后赋值,但是,使用setter和getter更加符合编程的思维,赋值或者获取属性值是不需要进行额外的操作,因为操作已经封装了,并且对外部来说是透明的。
JavaScript对象访问器属性的更多相关文章
- 24 JavaScript对象访问器&JavaScript对象构造器
ES5引入了Getter和Setter Getter和Setter允许定义对象访问器 JavaScript Getter(get关键字):获取对象属性 <script> var perso ...
- javascript对象属性——数据属性和访问器属性
ECMA-262第五版在定义时,描述了属性property的各种特征,定义这些特性是为了实现javascript引擎用的,为了表示该特性是内部值,规范把它们放在了两对儿方括号中,例如[[Enumera ...
- JavaScript对象的两类属性(数据属性与访问器属性)
对JavaScript来说,属性并非只是简单的名称和值,JavaScript用一组特征(attribute)来描述属性 (property). 第一类属性数据属性具有四个特征. value:就是属性的 ...
- JavaScript 数据属性和访问器属性
在JavaScript中对象被定义为"无序属性的集合,其属性可以包含基本值.对象或函数."通俗点讲,我们可以把对象理解为一组一组的名值对,其中值可以是数据或函数. 创建自定义对象通 ...
- JavaScript 属性类型(数据属性和访问器属性)
数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...
- JavaScript 属性类型(数据属性 访问器属性)
ECMA-2把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.” 严格来说,这就相当于说对象是一组没有特定顺序的值.对象的属性或方法都有一个名字,而每个名字映射到一个值.我们可以把E ...
- JavaScript中的数据属性和访问器属性
在学习JavaScript原型(prototype)和原型链(prototype chain)知识的时候,发现数据属性和访问器属性的重要性,通过不断的查找相关知识,浅显理解如下,若有差错,希望不吝赐教 ...
- js对象的数据属性和访问器属性
js面向对象 ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此 ...
- JavaScript数据属性与访问器属性
ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...
随机推荐
- php学习----面向对象
面向对象 项目代码都应该由单个能起子程序作用的对象组成 重用性.灵活性.扩展性 变量 $this 代表自身的对象. PHP_EOL 为换行符. PHP 中创建对象 类创建后,我们可以使用 new 运算 ...
- Servlet(四):转发与重定向、路径问题
在上次的小案例中用到了转发的技术,今天来仔细聊聊转发和重定向的问题,以及一些小知识的汇总. 一.转发 1.转发的概念 转发主要是将浏览器的请求交给另外一个servlet或jsp来处理,借助reques ...
- reportComplaints.js: Uncaught TypeError: Cannot read property 'message' of undefined
vonic 中遇到这么个问题, 一直提示我未定义, 可是明明有定义 var tab={ message:{ number:'', title:'' } } var id= { template: '# ...
- 汲取营养的blog专栏
网路上博客专栏是学习提升.思考深化的好途径,目前发现的博客价值高的平台: (1)EETOP www.eetop.cn (2)CSND www.csdn.net (3)cnblog www.cnblog ...
- ECharts图表之柱状折线混合图
Echarts 官网主页 http://echarts.baidu.com/index.html Echarts 更多项目案例 http://echarts.baidu.com/echarts2/ ...
- 【Teradata】磁盘碎片整理(ferret工具)
DEFRAGMENTcombines free sectors and moves them to the end of a cylinder.PACKDISKfill (or packs) cyli ...
- ES5-ES6-ES7_函数的扩展
call()/apply()/bind()的用法 Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回 function foo() { cons ...
- MySQL高级知识(十五)——主从复制
前言:本章主要讲解MySQL主从复制的操作步骤.由于环境限制,主机使用Windows环境,从机使用用Linux环境.另外MySQL的版本最好一致,笔者采用的MySQL5.7.22版本,具体安装过程请查 ...
- C#基础の迭代器详解
一.什么是迭代器 迭代器(iterator)有时又称游标(cursor)是程序设计的软件设计模式,可在容器(container,例如链表或阵列)上遍访的接口,设计人员无需关心容器的内容. 迭代器模式是 ...
- Python学习之函数进阶
函数的命名空间 著名的python之禅 Beautiful is better than ugly. Explicit is better than implicit. Simple is bette ...