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 相关文章推荐
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
php多任务程序实例解析
2014/07/19 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python访问类中docstring注释的实现方法
2015/05/04 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
工厂车间标语
2014/06/19 职场文书
2014年标准化工作总结
2014/12/17 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
举起手来观后感
2015/06/09 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle