为什么可以'是否将函数分配给变量并保留其功能

Why can't functions be assigned to variables and keep their functionality?

本文关键字：变量 分配 保留 功能 函数 是否 为什么      更新时间：2023-09-26

这很有效：

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

这不是：

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

是什么破坏了功能？

这应该是：

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

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

jQuery在调用它们的函数时引用this。如果我们用类似bind的东西设置this，我们可以使您的示例工作。

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

// 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>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar">
</div>

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

在通常的示例(即$('#bar').html('Hello.')(中，this指的是jQuery对象中的DOME元素。

在函数引用版本中，this已更改为指向window。要解决此问题，需要使用call()调用提供this作用域的html()方法引用。

从下面的示例中可以看出，这并没有多大帮助，因为您需要调用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()也将获得相同的结果，并且具有完全相同的缺点。

当您调用html方法时，您需要在那时传入args。简单地说，它就是不起作用。如果你做了

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

你会发现它有效。当调用一个方法时，参数应该与其关联。。。您实际上是在为Jquery对象分配一个属性"html"，它覆盖了该方法。我很确定。。。

相关文章：