2016-01-23 4 views
2

Если я хочу создать функцию jQuery, используя Function.prototype.bind, т. Е. Необходимость в функции обертывания, которую я поставлю значение this? Следующий простой пример, кажется, не работает:Как curry методы jQuery - какое значение `this` передаст объект jQuery?

// e.g.: $.fn.outerHeight() with argument true gets height including margin 

$.fn.marginBoxHeight = $.fn.outerHeight.bind($.fn, true); 

$.fn был неправильный выбор здесь this аргумента. Как это должно быть, чтобы функция имела доступ к внутренним методам jQuery, если это необходимо?

+0

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ – null1941

+2

Как правило, в JQuery вы не ссылаетесь или не карри, вы делаете что-то более похожее на '$ .fn.marginBoxHeight = function() {return this.outerHeight (true); } ' – adeneo

+0

Спасибо @adeneo да, я знаю, на самом деле именно так я решил проблему - это скорее академический вопрос. Я должен посмотреть на источник; Я предполагаю, что правильная область может быть чем-то вроде '$ .fn.init' или' $ .fn.init.prototype' – lunelson

ответ

0

jQuery.proxy выполняет выделки следующим образом:

QUnit.test("jQuery.proxy", function(assert) { 

    var thisObject = { foo: "bar", method: test }; 

    // jQuery 1.9 improved currying with `this` object context 
    fn = function() { 
     assert.equal(Array.prototype.join.call(arguments, ","), "arg1,arg2,arg3", "args passed"); 
     assert.equal(this.foo, "bar", "this-object passed"); 
    }; 
    cb = jQuery.proxy(fn, null, "arg1", "arg2"); 
    cb.call(thisObject, "arg3"); 
}); 

QUnit.test("jQuery.proxy", function(assert) { 
 
\t assert.expect(9); 
 

 
\t var test2, test3, test4, fn, cb, 
 
\t \t test = function() { 
 
\t \t \t assert.equal(this, thisObject, "Make sure that scope is set properly."); 
 
\t \t }, 
 
\t \t thisObject = { foo: "bar", method: test }; 
 

 
\t // Make sure normal works 
 
\t test.call(thisObject); 
 

 
\t // Basic scoping 
 
\t jQuery.proxy(test, thisObject)(); 
 

 
\t // Another take on it 
 
\t jQuery.proxy(thisObject, "method")(); 
 

 
\t // Make sure it doesn't freak out 
 
\t assert.equal(jQuery.proxy(null, thisObject), undefined, "Make sure no function was returned."); 
 

 
\t // Partial application 
 
\t test2 = function(a) { 
 
\t \t assert.equal(a, "pre-applied", "Ensure arguments can be pre-applied."); 
 
\t }; 
 
\t jQuery.proxy(test2, null, "pre-applied")(); 
 

 
\t // Partial application w/ normal arguments 
 
\t test3 = function(a, b) { 
 
\t \t assert.equal(b, "normal", "Ensure arguments can be pre-applied and passed as usual."); 
 
\t }; 
 
\t jQuery.proxy(test3, null, "pre-applied")("normal"); 
 

 
\t // Test old syntax 
 
\t test4 = { "meth": function(a) { 
 
\t \t assert.equal(a, "boom", "Ensure old syntax works."); 
 
\t } }; 
 
\t jQuery.proxy(test4, "meth")("boom"); 
 

 
\t // jQuery 1.9 improved currying with `this` object 
 
\t fn = function() { 
 
\t \t assert.equal(Array.prototype.join.call(arguments, ","), "arg1,arg2,arg3", "args passed"); 
 
\t \t assert.equal(this.foo, "bar", "this-object passed"); 
 
\t }; 
 
\t cb = jQuery.proxy(fn, null, "arg1", "arg2"); 
 
\t cb.call(thisObject, "arg3"); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.4.0.css"> 
 
<script src="https://code.jquery.com/qunit/qunit-2.4.0.js"></script> 
 
<div id="qunit"></div> 
 
<div id="qunit-fixture"></div>

Самый простой пример был бы:

var foo = jQuery.proxy(function(){return this('html:first')}, jQuery) 
 
console.log(foo())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Список литературы

 Смежные вопросы

  • Нет связанных вопросов^_^