関数を変数に代入して機能を維持できないのはなぜですか？

Question

これは動作します：

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

これにはない：

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

機能を破りますか？

Answer 1

まあこれはすべき：あなたがfoo変数に割り当てられたときに、あなたの2番目の例では

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

、HTMLの機能は、その呼び出しのコンテキストを失いました。

Answer 2

htmlメソッドを呼び出すと、その時点でargsを渡す必要があります。簡単に言えば、それはそのようには機能しません。あなたがした場合

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

あなたはそれが動作すると思います。メソッドを呼び出すときに引数が関連付けられている必要があります。 Jqueryオブジェクトに 'html'というプロパティを割り当てていて、メソッドを上書きしています。私はかなり確信している ...

Answer 3

jQueryの参照thisを呼び出すと、その機能が呼び出されます。 thisをbindのようなものに設定すると、あなたの例が働くことができます。

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

thisの範囲は、あなたがそれを呼び出す関数内で変更されたためhtml()の参照はあなたの例では動作しない理由があります。

通常の例（$('#bar').html('Hello.')）では、thisはjQueryオブジェクト内に保持されているDOMElementsを参照しています。

thisの機能参照バージョンがwindowを指すように変更されました。これを修正するには、call()を使用してthisのスコープを提供するhtml()メソッドリファレンスを呼び出す必要があります。

以下の例からわかるように、#bar要素を取得するためにDOMを2回呼び出す必要があるため、これはあまり役に立ちません。

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()も同じ結果を達成するため、正確な同じ欠点を持っているでしょう。