gpt4 book ai didi

浏览器中的 Javascript Mediator 找不到实例变量

转载 作者:行者123 更新时间:2023-12-03 02:25:59 25 4
gpt4 key购买 nike

我正在开发一个 HTML/JS 中介器,当用户在字段中输入文本时,该中介器会过滤 data_model。使用了 window.onload = init,并花了四个小时试图找出为什么浏览器中的“this”使其打印调用对象,因此我无法使用“this”获得类实例来引用自身

console.log(this.text_field)
setup_list_view() 中的

工作正常,似乎是因为它在构造函数范围内。在构造函数外部运行它,如下所示:

Cannot set property 'innerHTML' of undefined at HTMLInputElement.handle_text_field_changed 

...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>

<script>
function init() {
var text_field = document.getElementById("text-field");
var list_view = document.getElementById("list-view")
form_mediator = new FormMediator(text_field, list_view)
}

class FormMediator {
constructor(text_field, list_view) {
this.setup_text_field(text_field)
this.setup_list_view(list_view)
}

setup_text_field(text_field) {
this.text_field = text_field;
this.text_field.onchange = this.handle_text_field_changed
}

setup_list_view(list_view) {
this.data_model = ['England', 'Estonia', 'France', 'Germany']
this.list_view = list_view
this.list_view.innerHTML = this.data_model
}

does_string_start_with_text_field_text(text) {
return false;
return text.startsWith('E')
}

handle_text_field_changed(){
this.list_view.innerHTML = 'new content' //this.data_model.filter(this.does_string_start_with_text_field_text)
}
}



window.onload = init
</script>

<input id="text-field"><button>Search</button>
<span id="list-view"></span>

</body>
</html>

非常感谢任何帮助。

最佳答案

您的代码中的问题出现在这一行:

this.text_field.onchange = this.handle_text_field_changed

默认情况下,如果分配给变量或另一个对象的属性,方法将不会携带其原始绑定(bind)上下文。您需要先绑定(bind)这个handle_text_field_changed方法,这样:

this.text_field.onchange = this.handle_text_field_changed.bind(this)

关于浏览器中的 Javascript Mediator 找不到实例变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48937724/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com