Warum können Funktionen Variablen nicht zugewiesen werden und behalten ihre Funktionalität?

Question

Dies funktioniert:

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

Dies gilt nicht:

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

Was die Funktionalität bricht?

Answer 1

Gut, das sollte:

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

In Ihrem zweiten Beispiel verlor die HTML-Funktion ihren Aufruf Kontext, wenn Sie es auf die foo Variablen zugewiesen.

Answer 2

Wenn Sie die HTML-Methode aufrufen, müssen Sie die Argumente zu diesem Zeitpunkt übergeben. Einfach gesagt, es funktioniert einfach nicht so. Wenn Sie eine

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

würden Sie finden, es funktioniert. Beim Aufruf einer Methode sollten die Argumente damit verknüpft sein ... Sie weisen dem Jquery-Objekt im Wesentlichen eine Eigenschaft 'html' zu und überschreiben die Methode. Ich bin ziemlich sicher, ...

Answer 3

jQuery Referenzen this, wenn Sie ihre Funktionen aufrufen. Wir können Ihr Beispiel funktionieren lassen, wenn wir this mit etwas wie bind setzen.

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>

Answer 4

Der Grund für die Referenz von html() nicht in Ihrem Beispiel nicht funktioniert, weil der Umfang der this hat innerhalb der Funktion geändert, wenn Sie es nennen.

Im normalen Beispiel (z. B. $('#bar').html('Hello.')) bezieht sich this auf die DOMElements, die im jQuery-Objekt enthalten sind.

In der Funktionsreferenz wurde die Version this geändert, um auf window zu zeigen. Um dies zu beheben, müssen Sie die html() Methodenreferenz aufrufen, die den Bereich this mit call() angibt. Wie Sie aus dem folgenden Beispiel sehen können, ist dies nicht sehr hilfreich, da Sie das DOM dann zweimal aufrufen müssen, um das #bar Element abzurufen.

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() würde auch das gleiche Ergebnis erreichen, und haben genau die gleichen Nachteil.