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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php 多个submit提交表单 处理方法
2009/07/07 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
安踏广告词改编版
2014/03/21 职场文书
离职证明格式样本
2015/06/12 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python用tkinter开发的扫雷游戏
2021/06/01 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript