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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
javascript实现下拉菜单效果
Feb 09 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
python 自动提交和抓取网页
2009/07/13 Python
python之import机制详解
2014/07/03 Python
Python抓取京东图书评论数据
2014/08/31 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
GWT都有什么特性
2016/12/02 面试题
分公司经理岗位职责
2013/11/11 职场文书
微笑服务标语
2014/06/24 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS