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 相关文章推荐
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
Element Dialog对话框的使用示例
Jul 26 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防注入代码
2010/04/07 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
表单JS弹出填写提示效果代码
2011/04/16 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JS简单计算器实例
2015/01/20 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
ant design实现圈选功能
2019/12/17 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
python实现抖音点赞功能
2019/04/07 Python
python自动下载图片的方法示例
2020/03/25 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
Python jieba库分词模式实例用法
2021/01/13 Python
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
三年级音乐教学反思
2014/01/28 职场文书
公司办公室岗位职责
2014/03/19 职场文书
质量月活动总结
2014/08/26 职场文书
初中班干部工作总结
2015/08/10 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python