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实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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 str_replace的替换漏洞
2008/03/15 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
Vue filter介绍及详细使用
2018/04/04 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python如何实现代码检查
2019/06/28 Python
三个python爬虫项目实例代码
2019/12/28 Python
基于python实现计算两组数据P值
2020/07/10 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
Linux内核产生并发的原因
2012/07/13 面试题
恒华伟业笔试面试题
2015/02/26 面试题
《伯牙绝弦》教学反思
2014/03/02 职场文书
供货协议书
2014/04/22 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
大学生党员自我评价
2015/03/04 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle