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 核心参考教程 内置对象
Oct 13 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript中对对层的控制
2006/12/29 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
装修致歉信
2014/01/15 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
业务员简历自我评价
2014/03/06 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
初中语文教学随笔
2015/08/15 职场文书
MySQL锁机制
2021/04/05 MySQL