js中getter和setter用法实例分析


Posted in Javascript onAugust 14, 2018

本文实例讲述了js中getter和setter用法。分享给大家供大家参考,具体如下:

在学习Vue计算属性时,有一句“计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter”。

getter和setter到底是什么?于是我查找了资料:

在Es5中可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上。getter是一个隐藏函数,会在获取属性值时调用。setter也是一个隐藏属性,会在设置属性值时调用。

例子:

var myObject = {
  get a(){
    return 2
  }
  };
  Object.defineProperty(
  myObject,       //目标对象
  "b",          //属性名
  {  //描述符
    //给b设置一个getter
    get:function(){
    return this.a*2
     },
    //确保b会出现在对象的属性列表中
    enumerable:true
  }
);
console.log(myObject.a) //2
console.log(myObject.b) //4

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试结果如下:

js中getter和setter用法实例分析

不管是对象文字语法中的get a( ) { ...... },还是defineProperty(......)中的显式定义,二者都会在对象中创建一个不包含值的属性,对于这个属性的访问会自动调用一个隐藏函数,它的返回值会被当作属性访问的返回值。(也就是说myObject.a不用加执行括号,vue中计算属性默认有getter,调用计算属性不用在后面加"( )")

var obj = {
  //给a定义一个getter
  get a(){
  return 2;
  }
};
obj.a = 3;
console.log(obj.a); //2

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun,测试结果如下:

js中getter和setter用法实例分析

由于对a只定义了getter,所以对a的set操作会忽略赋值操作,不会抛错。而且即便有合法的setter,由于我们自定义的getter只会返回2,所以set操作是没有意义的。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
分页栏的web标准实现
Nov 01 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 #Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 #Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 #Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 #jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 #jQuery
layui的table单击行勾选checkbox功能方法
Aug 14 #Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 #Javascript
You might like
测试php函数的方法
2013/11/13 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
python调用fortran模块
2016/04/08 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
大整数数相乘的问题
2012/07/22 面试题
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
中班幼儿评语大全
2014/04/30 职场文书
个人课题方案
2014/05/08 职场文书
党支部换届选举方案
2014/05/08 职场文书
教师个人总结范文
2015/02/11 职场文书
走近毛泽东观后感
2015/06/04 职场文书
英雄儿女观后感
2015/06/09 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL