是否使用了“；耐用物品“；JavaScript的良好实践？

根据道格拉斯·克罗克福德（Douglas Crockford）的书《JavaScript：好的部分》（JavaScript:the Good Parts）中的定义，持久对象是一个函数式的对象，它的所有方法都不使用这个或那个。请查看以下示例：

这是持久对象的一个示例：

const MyObj = function()
{
  const myObj = BaseObject();

  const inp = create( "input" );
  inp.type = "checkbox";
  const txt = doc.createTextNode("");
  myObj.control = create( "label" );
  myObj.control.appendChild( inp );
  myObj.control.appendChild( txt );

  myObj.setState = state => inp.checked = state;

  myObj.getState = () => inp.checked;

  myObj.setCaption = cap =>
  {
    txt.textContent = cap;
  }
  return myObj;
}

const MyObj = function()
{
  const myObj = BaseObject();

  myObj.inp = create( "input" );
  myObj.inp.type = "checkbox";
  myObj.txt = doc.createTextNode("");
  myObj.control = create( "label" );
  myObj.control.appendChild( myObj.inp );
  myObj.control.appendChild( myObj.txt );

  myObj.setState = function(state)
  { 
      this.inp.checked = state; **// Look at here**
  }

  myObj.getState = function() 
  {
      return this.inp.checked;
  }

  myObj.setCaption = cap =>
  {
    this.txt.textContent = cap;
    this.callABaseObjectMethode(); **// Look at here**
  }
  return myObj;
}

这是一个非持久对象的示例：

const MyObj = function()
{
  const myObj = BaseObject();

  const inp = create( "input" );
  inp.type = "checkbox";
  const txt = doc.createTextNode("");
  myObj.control = create( "label" );
  myObj.control.appendChild( inp );
  myObj.control.appendChild( txt );

  myObj.setState = state => inp.checked = state;

  myObj.getState = () => inp.checked;

  myObj.setCaption = cap =>
  {
    txt.textContent = cap;
  }
  return myObj;
}

const MyObj = function()
{
  const myObj = BaseObject();

  myObj.inp = create( "input" );
  myObj.inp.type = "checkbox";
  myObj.txt = doc.createTextNode("");
  myObj.control = create( "label" );
  myObj.control.appendChild( myObj.inp );
  myObj.control.appendChild( myObj.txt );

  myObj.setState = function(state)
  { 
      this.inp.checked = state; **// Look at here**
  }

  myObj.getState = function() 
  {
      return this.inp.checked;
  }

  myObj.setCaption = cap =>
  {
    this.txt.textContent = cap;
    this.callABaseObjectMethode(); **// Look at here**
  }
  return myObj;
}

---

我想知道拥有耐用物品（这是免费的）是否是一种好的做法。重要的因素是JavaScript代码的性能、安全性、可伸缩性和灵活性。

您的两个示例都不是很好的示例

它们每次都为方法分配内存

您的

myObj

开头有

BaseObject

的方法和字段。但在您说：

为setState方法分配内存并附加到实例之后

下面是

原型

：

MyObj.prototype.setState = state => this._state = state;

MyObj.prototype.getState = () => Object.assign({}, this._state);

原型是一次分配并与类实例关联的静态对象

现在，让我们从代码中生成组件（只是为了好玩）：

类组件
{
构造函数（初始状态）{
这个._state=initialState？initialState:{}；
this.\u masterNode=document.createElement（this.constructor.name）；
这个._eventListeners={}；
}
createElement（标记名，属性={}，onStateChange）{
常量元素=document.createElement（标记名）；
分配（元素、属性）；
如果（状态更改）{
this.on（'stateChanged'，（newState）=>{
onStateChange（新闻状态，元素）；
});
}
返回元素；
}
createInput（名称、类型、状态更改）{
返回这个.createElement（'input'，{name，type}，onStateChange）；
}
createLabel（labelFor、onStateChange）{
返回此.createElement（'label'，{for:labelFor}，onStateChange）；
}
createTextNode（文本，onStateChange）{
const textNode=document.createTextNode（文本）；
如果（状态更改）{
this.on（'stateChanged'，（newState）=>{
onStateChange（newState、textNode）；
});
}
返回文本节点；
}
附加子元素（元素）{
此._masterNode.appendChild（元素）；
}
设置状态（状态）{
赋值（此状态，状态）；
this.emit（'stateChanged'，this.\u state）；
}
getState（）{
返回Object.assign（{}，this.\u状态）；
}
打开（eventName，侦听器）{
如果（！this._eventListeners[eventName]）this._eventListeners[eventName]=[]；
此.u eventListeners[eventName].push（侦听器）；
}
发射（事件名称、负载）{
如果（！this._eventListeners[eventName]）返回；
日志（eventName，payload）；
此.u eventListeners[eventName].forEach（方法=>{
方法（有效载荷）；
});
}
附件（容器）{
container.appendChild（此.\u主节点）；
}
}
const form=新组件（）；
//创建标签
const label=form.createLabel（'termsAndConditions'）；
//使用状态侦听器创建复选框
const checkbox=form.createInput（'something'，'checkbox'，'，
（新闻状态，元素）=>{
if（newState.agreedWithTC==true）{
element.checked=true；
返回；
}
element.checked=false；
});
//“按单击状态操作”复选框
checkbox.onclick=（）=>{
如果（复选框。选中）{
form.setState（{agreedWithTC:true}）；
返回；
}
form.setState（{agreedWithTC:false}）；
};
//将复选框附加到标签
label.appendChild（复选框）；
const textNode=form.createTextNode（'同意T&C'，
（新闻状态，元素）=>{
textNode.textContent=textNode.textContent.replace（‘（同意）’，’）.replace（‘（未同意）’，’）；
if（newState.agreedWithTC==true）{
textNode.textContent+='（已商定）'；
返回；
}
textNode.textContent+='（未约定）'；
});
//创建文本节点并将其附加到标签
label.appendChild（textNode）；
//将标签附加到表单
表格.附件（标签）；
//将整个组件实例附加到容器
form.appendTo（document.getElementById（'container'））；
设置间隔（（）=>{
form.setState（{agreedWithTC:！form.getState（）.agreedWithTC}）；
}, 1000);
切换到ES6类定义、扩展等或使用
原型
“它的所有方法都不使用
这个
或
那个
”-如果不是“那个”变量，你认为
myObj
是什么？重命名它没有帮助。我第一次听到
持久对象
。我知道可变和不可变的对象。我知道封装技术。所以您所写的只是在玩私有变量。而
这
只是引用调用函数的上下文。顺便说一句，好的部分是一本旧书（2008）。所以在读了那本书之后，寻找一些解释ES6的东西，ES7@Bergi谢谢你的评论。我把答案改了一点。还请注意，在书中，作者说“所有的对象方法都没有利用这个或那个”，谢谢你的回答。但我读了几篇文章，不想在JavaScript中使用“类”，就像我认为你必须使用Babel、WebPack和ES6、ES7和TypeScript一样