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代码
Jan 13 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
财会自我鉴定范文
2013/12/27 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
小学英语复习计划
2015/01/19 职场文书
工程资料员岗位职责
2015/04/13 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
机器人总动员观后感
2015/06/09 职场文书
初二物理教学反思
2016/02/19 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers