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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
javascript每日必学之多态
Feb 23 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
微信小程序实现点赞业务
Feb 10 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
理解javascript async的用法
2017/08/22 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
python实用代码片段收集贴
2015/06/03 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python Pillow Image Invert
2019/01/22 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
django中ImageField的使用详解
2020/12/21 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
优秀毕业生求职推荐信范文
2013/11/21 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
办公室岗位职责范本
2015/04/11 职场文书