为什么这两个 javascript 函数不等价?
Why are these two javascript functions not equivalent?
此函数有效:
function refreshCodeMirror(){
$("textarea").each(function(){
var codeMirror = $(this).data('codeMirror');
setTimeout(function(codeMirror){
return function () {
codeMirror.refresh();
}
}(codeMirror), 10)
});
}
但是当我试图将其简化为:
function refreshCodeMirror(){
$("textarea").each(function(){
var codeMirror = $(this).data('codeMirror');
setTimeout(codeMirror.refresh, 10)
});
}
简化不起作用。
一些(可能不相关的)上下文:
在 django 模板中的 bootstrap tab-header 的 onclick 中调用 refreshCodeMirror 函数:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
{% for field in form_tab_fields %}
<li role="presentation"{% if forloop.first %} class="active"{% endif %}>
<a class="tab-header" href="#{{ field.id_for_label }}_tab" data-toggle="tab" onclick="refreshCodeMirror()">{{ field.label_tag }}</a>
</li>
{% endfor %}
</ul>
<div class="tab-content">
{% for field in form_tab_fields %}
<div role="tabpanel"
class="form-group tab-pane{% if forloop.first %} active{% endif %}"
id="{{ field.id_for_label }}_tab">
{{ field }}
{{ field.errors }}
</div>
{% endfor %}
</div>
</div>
</div>
上面的第一个函数一切正常,虽然我想删除所有冗余的刷新调用,但它们似乎并不重要,当我使用单个文本区域时(通过传递元素 ID),上面的工作函数停止工作。
问题是你失去了上下文。
不直接在对象上调用且未手动绑定到上下文的函数在全局上下文中调用。
var obj = {
print: function() {
document.write('<pre>' + this + '</pre>');
}
};
obj.print();
var p = obj.print;
p();
当你使用setTimeout
或其他类似的功能时,就像这样做:
function setTimeout(f, time) {
wait(time);
f();
}
因此您的 refresh
函数期望 this
等于您的 codeMirror
实例,但它等于 window
或 undefined
(取决于如果您处于严格模式,则打开)。
有几种方法可以解决这个问题。一种是将一个新函数传递给 setTimeout
,您可以在其中调用原始函数。
setTimeout(function() {
codeMirror.refresh();
}, 10);
另一种方法,它使用 bind
将函数的副本传递给它,并将 this
设置为正确的对象。
setTimeout(codeMirror.refresh.bind(codeMirror), 10);
此函数有效:
function refreshCodeMirror(){
$("textarea").each(function(){
var codeMirror = $(this).data('codeMirror');
setTimeout(function(codeMirror){
return function () {
codeMirror.refresh();
}
}(codeMirror), 10)
});
}
但是当我试图将其简化为:
function refreshCodeMirror(){
$("textarea").each(function(){
var codeMirror = $(this).data('codeMirror');
setTimeout(codeMirror.refresh, 10)
});
}
简化不起作用。
一些(可能不相关的)上下文:
在 django 模板中的 bootstrap tab-header 的 onclick 中调用 refreshCodeMirror 函数:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
{% for field in form_tab_fields %}
<li role="presentation"{% if forloop.first %} class="active"{% endif %}>
<a class="tab-header" href="#{{ field.id_for_label }}_tab" data-toggle="tab" onclick="refreshCodeMirror()">{{ field.label_tag }}</a>
</li>
{% endfor %}
</ul>
<div class="tab-content">
{% for field in form_tab_fields %}
<div role="tabpanel"
class="form-group tab-pane{% if forloop.first %} active{% endif %}"
id="{{ field.id_for_label }}_tab">
{{ field }}
{{ field.errors }}
</div>
{% endfor %}
</div>
</div>
</div>
上面的第一个函数一切正常,虽然我想删除所有冗余的刷新调用,但它们似乎并不重要,当我使用单个文本区域时(通过传递元素 ID),上面的工作函数停止工作。
问题是你失去了上下文。
不直接在对象上调用且未手动绑定到上下文的函数在全局上下文中调用。
var obj = {
print: function() {
document.write('<pre>' + this + '</pre>');
}
};
obj.print();
var p = obj.print;
p();
当你使用setTimeout
或其他类似的功能时,就像这样做:
function setTimeout(f, time) {
wait(time);
f();
}
因此您的 refresh
函数期望 this
等于您的 codeMirror
实例,但它等于 window
或 undefined
(取决于如果您处于严格模式,则打开)。
有几种方法可以解决这个问题。一种是将一个新函数传递给 setTimeout
,您可以在其中调用原始函数。
setTimeout(function() {
codeMirror.refresh();
}, 10);
另一种方法,它使用 bind
将函数的副本传递给它,并将 this
设置为正确的对象。
setTimeout(codeMirror.refresh.bind(codeMirror), 10);