Question

这有效：

var foo = $("#bar");
foo.html("Hello.");

这不是：

var foo = $("#bar").html;
foo("Hello.");

什么打破了这个功能？

Answer 1

这应该是：

var bar = $("#bar");
var foo = bar.html.bind(bar);
foo("Hello.");

在你的第二个例子中，当你将它分配给foo变量时，html函数丢失了它的调用上下文。

Answer 2

jQuery在调用函数时引用this。如果我们将this设置为bind。

，我们就可以让您的示例有效

https://jsfiddle.net/ripter/6hbqtn5j/

＆＃13;

// Normal case
//$('#bar').html('<h1>Hello World</h1>');

// save the html function for later
// jQuery relies on 'this', so we have to make sure we keep that reference.
var barHtml = $('#bar').html.bind($('#bar'));
barHtml('<h1>Hello from function reference</h1>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar">

</div>

＆＃13;

Answer 3

html()的引用在您的示例中不起作用的原因是因为this的范围在您调用它时在函数内发生了变化。

在正常示例中（即。$('#bar').html('Hello.')），this指的是jQuery对象中保存的DOMElements。

在功能参考版本中，this已更改为指向window。要解决此问题，您需要使用html()调用this方法参考，提供call()的范围。

从下面的示例中可以看出，这不是很有用，因为您需要两次调用DOM来检索#bar元素。

var foo = $("#bar").html;
foo.call($("#bar"), "Hello.");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar"></div>

bind()也会获得相同的结果，并且具有完全相同的缺点。

Answer 4

当你调用html方法时，你需要在那时传递args。简而言之，它不会那样工作。如果你做了

    var myHtml = 'hello world';
    var foo = $('#bar').html(myHtml);

你发现它有效。在调用方法时，参数应该与它相关联...... 你实际上是在分配一个属性＆＃39; html＆＃39;到Jquery对象并且它覆盖了该方法。我很确定......

为什么不能将函数分配给变量并保持其功能？

4 个答案: