ECMAScript5中的对象存取器属性:getter和setter介绍


Posted in Javascript onDecember 08, 2014

显然这是一个无关IE(高级IE除外)的话题,尽管如此,有兴趣的同学还是一起来认识一下ECMAScript5标准中getter和setter的实现。在一个对象中,操作其中的属性或方法,通常运用最多的就是读(引用)和写了,譬如说o.get,这就是一个读的操作,而o.set = 1则是一个写的操作。事实上在除ie外最新主流浏览器的实现中,任何一个对象的键值都可以被getter和setter方法所取代,这被称之为“存取器属性”。

毫无疑问,getter负责查询值,它不带任何参数,setter则负责设置键值,值是以参数的形式传递,在他的函数体中,一切的return都是无效的。和普通属性不同的是,存储器属性在只声明了get或set时,对于读和写是两者不可兼得的,当它只拥有了getter方法,那么它仅仅只读,同样的,当它只有setter方法,那么您读到的永远都是undefined。如何声明对象存储器属性呢? 最快捷的途径就是利用对象字面量的语法来写了,请看下述一段代码:

var oo = {

    name : '贤心',

    get sex(){

        return 'man';

    }

};

//显然这是不允许的,因为贤心并不希望外界去改变他是男性的事实,所以对于sex只设置了只读功能

oo.sex = 'woman';

console.log(oo.sex); //结果依然是man

有意思的是,这颠覆了我们以往的理解,就是在方法定义时并未用function关键字。事实上这里的get或set,你可以理解为两种不同状态下的function:包容的一面(写),安全的一面(读),当一种整体被肢解为不同的形态,意味着我们可能不再需要在表现形式上遵循传统,所以我们并没有使用冒号将键和值分开。那么,继续上面的例子。你将如何在存储器属性的基础上变得读写兼备呢,也许下面的一段会给你带来答案:

var oo = {

    name : '贤心',

    get sex(){

        if(this.sexx){

            return this.sexx; 

        }else{

            return 'man'; 

        }

    }, set sex(val){

        this.sexx = val; 

    }

};

//噢,他如此包容,乃至于人们改变他的性别,他也接受

oo.sex = 'woman';

console.log(oo.sex); //结果woman

或许你会觉得这是多此一举的,因为我们完全可以忽视get和set,直接让sex方法具备两种权限。 但之所以我们将get和set单独拿出来,是为了更加清晰地理解ECMAScript5对javascript对象键值操作中,一个更为严谨的诠释。 当然,在IE污染的中国,新型的主流技术总是显得格格不入,在实际的项目开发中,也许你永远不会用到get和set,但谁又能保证以后不会呢……

Javascript 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
树结构之JavaScript
Jan 24 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
vue.js实现简单购物车功能
May 30 Javascript
JavaScript对象之深度克隆介绍
Dec 08 #Javascript
SeaJS 与 RequireJS 的差异对比
Dec 08 #Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 #Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 #Javascript
js继承call()和apply()方法总结
Dec 08 #Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 #Javascript
详解Javascript动态操作CSS
Dec 08 #Javascript
You might like
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
在Python中使用正则表达式的方法
2015/08/13 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
使用django自带的user做外键的方法
2020/11/30 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
双十佳事迹材料
2014/01/29 职场文书
付款委托书范本
2014/10/05 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
公司表扬信格式
2015/05/04 职场文书
欢迎新生标语2015
2015/07/16 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
python多次执行绘制条形图
2022/04/20 Python