在Custom Element构造函数调用中维护JS作用域

Question

我正在尝试一种新的模式， 每个新创建的Card元素 使用constructor范围来存储（私有）变量：

伪代码：

class CardtsCard extends HTMLElement {
    constructor(){
       let private = 666;
       Object.assign(this,{
          getPrivate : () => console.log(private)
       });
    }
    get private(){
       //can not access scope in constructor
       return 42;
    }
}

所以：

 el.getPrivate(); // outputs 666
 el.private;      // outputs 42

---

I have loads of getters and setters
and sticking data ON my elements with this.whatever=value feels a bit weird.

我可以把它扩展到：

class CardtsCard extends HTMLElement {
    constructor(){
       let private = new Map();
       Object.assign(this,{
          setPrivate : (data,value) => private.set(data,value),
          getPrivate : (data) => private.get(data)
       });
    }
}

---

问题：我不是JS范围专家，有缺点吗？

Answer 1

无论何时在第一个示例中调用构造函数，都必须创建一个包含这些“私有”变量的闭包。对于一些不会导致任何开销的元素，但对于许多元素，您可能会看到性能和内存开销。

关于你的第二个例子：Map查找不能内联，属性查找可以，所以它们更高效（你只会注意到许多操作）。

您通过此设置有什么好处？公共方法getPrivate不是真的私有不是吗？如果您需要私有变量，请以某种方式将它们标记为私有，并相信每个人都使用该代码来适当地处理它。