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 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
我的论坛源代码(十)
2006/10/09 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python单链表简单实现代码
2016/04/27 Python
详解python里的命名规范
2018/07/16 Python
Sanic框架Cookies操作示例
2018/07/17 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
小学生安全演讲稿
2014/04/25 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
购房个人委托书范本
2014/10/11 职场文书
2015年女生节活动总结
2015/02/27 职场文书
教育教学读书笔记
2015/07/02 职场文书
小学教师教育随笔
2015/08/14 职场文书