Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用 getter 来解决 class 的属性需求

  ES6 的 class 中只能定义方法,不能定义属性。有时候我们想定义属性就非要到 constructor 里写不可。而且如果 class 是包含 extends 的,在 constructor 中使用 this 就需要先 super 一下。总之这是一件特别烦的事情。那么我们是不是可以用 getter 属性来代替一般属性呢?
  比如这样:
<script> class A { get value() { return 123; } } let a = new A(); console.log(a.value === a.value); // true </script>   如果这个属性是一个基本类型字面量,那么这么干确实没问题。但如果这是一个非幂等的计算结果,或者是一个对象类型就不对了,比如:
<script> class A { get value() { return Math.random(); } } let a = new A(); console.log(a.value === a.value); // false </script> <script> class B { get value() { return {}; } } let b = new B(); console.log(b.value === b.value); // false </script>   为了解决这么问题,我们需要在这个 getter 属性的处理函数中重写 this 上的同名属性,以达到「属性」的效果。比如:
<script> class A { get value() { let result = { _: Math.random() }; Object.defineProperty(this, 'value', { configurable: true, writable: true, value: result }); return result; } }; let a = new A; console.log(a.value === a.value); // true </script>   这个代码可能比较繁琐,而且这里只处理的 getter,如果第一次是一个写操作的话会出错(可是第一次如果是写操作干嘛还要定义,直接什么都不做就好)。将来支持装饰器的话可以封装起来。不过既然有装饰器,一般也会支持属性定义,所以将来我们可以更优雅地处理 class 中的属性。
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^