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中原型继承中的一点思考
Jul 25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 常用函数
2009/12/30 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python类和继承用法实例
2015/07/07 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
详解python metaclass(元类)
2020/08/13 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
《小池塘》教学反思
2014/02/28 职场文书
土地转让协议书
2014/04/15 职场文书
小学生评语大全
2014/04/18 职场文书
校园安全演讲稿
2014/05/09 职场文书
党校个人总结
2015/03/04 职场文书
《确定位置》教学反思
2016/02/18 职场文书