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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
jquery cookie插件代码类
May 26 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
Vue Element校验validate的实例
Sep 21 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
php动态生成JavaScript代码
2009/03/09 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
js传值 判断
2006/10/26 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
vue组件实例解析
2017/01/10 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python实现log日志的示例代码
2018/04/28 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python实现全排列的打印
2018/08/18 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
大学毕业生简单自荐信
2013/11/05 职场文书
后勤部长岗位职责
2013/12/14 职场文书
安全教育心得体会
2013/12/29 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
论文致谢词范文
2015/05/14 职场文书
经费申请报告
2015/05/15 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL