ES6 javascript中class类的get与set用法实例分析


Posted in Javascript onOctober 30, 2017

本文实例讲述了ES6 javascript中class类的get与set用法。分享给大家供大家参考,具体如下:

与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

上面代码中, prop属性有对应的存值函数和取值函数, 因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 descriptor 对象上的。

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html");
"get" in descriptor // true
  "set" in descriptor // true

上面代码中, 存值函数和取值函数是定义在html属性的描述对象上面, 这与 ES5 完全一致。

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《javascript面向对象入门教程》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
Bootstrap栅格系统的使用详解
Oct 30 #Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 #Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 #Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 #Javascript
vue中的scope使用详解
Oct 29 #Javascript
You might like
PHP中,文件上传
2006/12/06 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
js资料toString 方法
2007/03/13 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
python操作gmail实例
2015/01/14 Python
Python验证码识别的方法
2015/07/10 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
关于Django外键赋值问题详解
2017/08/13 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
详解Python循环作用域与闭包
2019/03/21 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python动态文本进度条的实例代码
2020/01/22 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
硕士学位申请报告
2015/05/15 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers