Javascript 未捕获类型错误：xyz不是函数（从字符串内部调用时）

尝试在类Textbox的render函数中声明的输入模糊上绑定validate（）函数扩展了HtmleElement（Part-A），但出现以下错误

detail.html:1未捕获类型错误：this.validate不是函数 （但是将validate（）函数放置在字符串外部函数调用的外部时，可以访问该函数）

第A部分

class HTMLElement {
  constructor( ) {
    this.value = false;
  }

  validate() {
    console.log('A')
  }

}

class Textbox extends HTMLElement {
  constructor( ) {
    super();
  }

  render( elem_id, default_value, display_name, placeholder, permission ) {
    /*** this.validate() will work here but not inside onblur function ***/
    var string = "";
    string += "<input type='text' class='form-control' id='"+elem_id+"' value='"+default_value+"' placeholder='" + placeholder + "' onblur='this.validate()' >"
    return string;
  }

}

---

我可能做错了什么？

问题是，您正在生成一个字符串，然后将其附加到DOM中，只有在这一点上，它才会被解析为DOM元素并添加到页面中。这发生在

render

方法的上下文之外，并且与该方法或创建该方法的对象没有链接。此外，事件处理程序仅设置为字符串

“this.validate（）”

，该字符串将在全局上下文中执行

要保留对

validate

方法的访问权，必须在执行

render

时将其作为处理程序附加。在我看来，最好的方法是避免生成字符串并以编程方式创建元素的步骤：

• 将创建节点
• 可以添加属性
• 还有你需要的任何课程
• 不要设置

  onblur

  属性，而是添加适当的处理程序作为直接属性

这将生成元素，然后您可以在将它们一次全部添加到DOM之前将它们累加到DOM中，这将为您节省多次插入和潜在的性能损失

最后，可以通过普通的domapi添加元素，但通常已经足够了

因此，我们得到以下结果：

类HtmleElement{
构造函数（）{
this.value=false；
}
验证（）{
console.log（'A'）
}
}
类Textbox扩展HtmleElement{
构造函数（）{
超级（）；
}
渲染（元素id、默认值、显示名称、占位符、权限）{
/***以编程方式创建输入元素并设置所有相关属性***/
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
元素.classList.add（“表单控件”）；
setAttribute（“id”，elem_id）；
setAttribute（“值”，默认值）；
setAttribute（“占位符”，占位符）；
element.addEventListener（“blur”，（）=>this.validate（））
返回元素；
}
}
常量元素\u ARR={
“文本”：文本框
}
类元素{
构造函数（类名，opts）{
返回新元素\u ARR[className]（opts）；
}
}
函数renderForm（）{
变量ds={
“字段”：[
{“id”：“f_name”，“type”：“text”，“is_mandatory”：1，“display_name”：“First name”，“default”：“permission”：“hidden/editable/readonly”，“placeholder”：“Sample placeholder 1”}，
{“id”：“f_name”，“type”：“text”，“is_mandatory”：0，“display_name”：“Hellp name”，“default”：“permission”：“hidden/editable/readonly”，“placeholder”：“Sample placeholder 2”}
]
}, 
ks=JSON.parse（JSON.stringify（ds）），
//只是元素的“容器”。
//如有需要，可添加到document.createElement（“表单”）
form=document.createDocumentFragment（），
elementor；
for（设u=0；u
.form控件{
保证金：5px；
边框样式：虚线；
边框颜色：黑色
}
问题在于，您正在生成一个字符串，然后将其附加到DOM中，只有在这一点上，它才会被解析为DOM元素并添加到页面中。这发生在
render
方法的上下文之外，并且与该方法或创建该方法的对象没有链接。此外，事件处理程序仅设置为字符串
“this.validate（）”
，该字符串将在全局上下文中执行

要保留对
validate
方法的访问权，必须在执行
render
时将其作为处理程序附加。在我看来，最好的方法是避免生成字符串并以编程方式创建元素的步骤：


将创建节点
可以添加属性
还有你需要的任何课程
不要设置
onblur
属性，而是添加适当的处理程序作为直接属性

这将生成元素，然后您可以在将它们一次全部添加到DOM之前将它们累加到DOM中，这将为您节省多次插入和潜在的性能损失

最后，可以通过普通的domapi添加元素，但通常已经足够了

因此，我们得到以下结果：


类HtmleElement{
构造函数（）{
this.value=false；
}
验证（）{
console.log（'A'）
}
}
类Textbox扩展HtmleElement{
构造函数（）{
超级（）；
}
渲染（元素id、默认值、显示名称、占位符、权限）{
/***以编程方式创建输入元素并设置所有相关属性***/
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
元素.classList.add（“表单控件”）；
setAttribute（“id”，elem_id）；
setAttribute（“值”，默认值）；
element.setAttribute（“占位符”，位置
const ELEMENT_ARR = {
  "text":Textbox
}

class Elements {
  constructor( className, opts ) {
    return new ELEMENT_ARR[className](opts);
  }
}

function renderForm(){
  var ds = {
    "fields":[
      {"id":"f_name","type":"text","is_mandatory":1,"display_name":"First Name","default":"", "permission":"hidden/editable/readonly","placeholder":"Sample Placeholder 1" },
      {"id":"f_name","type":"text","is_mandatory":0,"display_name":"Hellp Name","default":"","permission":"hidden/editable/readonly", "placeholder":"Sample Placeholder 2"  }
    ]
  }, ks = JSON.parse(JSON.stringify(ds)), form_str="", elementor;

  for (let u = 0 ; u < ks['fields'].length; u++) {

    let type = ks['fields'][u].type,
        elem_id = ks['fields'][u].id,
        is_mandatory = ks['fields'][u].is_mandatory,
        default_value = ks['fields'][u].default,
        display_name = ks['fields'][u].display_name,
        placeholder = ks['fields'][u].placeholder,
        permission = ks['fields'][u].permission;

    elementor = new Elements( type )
    form_str += elementor.render( elem_id, default_value, display_name, placeholder, permission )
  }
  return form_str;
}

window.onload = function(){

  document.getElementById('formGenx').innerHTML = renderForm();
};