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 document.referrer判断访客来源网址
May 15 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python实现的简单算术游戏实例
2015/05/26 Python
Python 内置函数complex详解
2016/10/23 Python
浅析Git版本控制器使用
2017/12/10 Python
Python3远程监控程序的实现方法
2019/07/15 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
电大本科自我鉴定
2014/02/05 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
民事和解协议书格式
2014/11/29 职场文书
建国大业观后感600字
2015/06/01 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
会计岗位工作总结
2015/08/12 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android