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 17 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
web前端开发也需要日志
Dec 09 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
JavaScript之数组扁平化详解
Jun 03 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 curl模拟浏览器抓取网站信息
2013/10/28 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
django2 快速安装指南分享
2018/01/05 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python发展简史 Python来历
2019/05/14 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
如何设置Java的运行环境
2013/04/05 面试题
年终工作总结范文2014
2014/11/27 职场文书
义诊活动总结
2015/02/04 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers