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实现自定义对话框的代码
Jun 15 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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
一个取得文件扩展名的函数
2006/10/09 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue单元格多列合并的实现
2020/11/26 Vue.js
python学习数据结构实例代码
2015/05/11 Python
python 接口返回的json字符串实例
2018/03/27 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
捐书寄语赠言
2014/01/18 职场文书
人事助理自荐信
2014/02/02 职场文书
心理健康日活动总结
2014/05/08 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
React 高阶组件HOC用法归纳
2021/06/13 Javascript