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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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数据库开发知多少
2006/10/09 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
关于JSON解析的实现过程解析
2019/10/08 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
python更新列表的方法
2015/07/28 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python将字母转化为数字实例方法
2019/10/04 Python
python和php哪个更适合写爬虫
2020/06/22 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
工作表扬信
2015/01/17 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript