如果我想使用 Function.prototype.bind 创建 jQuery 函数,即需要包装函数,我应该提供哪个 this
值?下面这个简单的例子似乎不起作用:
// e.g.: $.fn.outerHeight() with argument true gets height including margin
$.fn.marginBoxHeight = $.fn.outerHeight.bind($.fn, true);
对于 this
参数,$.fn
是错误的选择。它应该是什么,以便该函数可以访问 jQuery 内部方法(如果需要)?
最佳答案
jQuery.proxy
执行柯里化(Currying)如下:
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 ) {
assert.expect( 9 );
var test2, test3, test4, fn, cb,
test = function() {
assert.equal( this, thisObject, "Make sure that scope is set properly." );
},
thisObject = { foo: "bar", method: test };
// Make sure normal works
test.call( thisObject );
// Basic scoping
jQuery.proxy( test, thisObject )();
// Another take on it
jQuery.proxy( thisObject, "method" )();
// Make sure it doesn't freak out
assert.equal( jQuery.proxy( null, thisObject ), undefined, "Make sure no function was returned." );
// Partial application
test2 = function( a ) {
assert.equal( a, "pre-applied", "Ensure arguments can be pre-applied." );
};
jQuery.proxy( test2, null, "pre-applied" )();
// Partial application w/ normal arguments
test3 = function( a, b ) {
assert.equal( b, "normal", "Ensure arguments can be pre-applied and passed as usual." );
};
jQuery.proxy( test3, null, "pre-applied" )( "normal" );
// Test old syntax
test4 = { "meth": function( a ) {
assert.equal( a, "boom", "Ensure old syntax works." );
} };
jQuery.proxy( test4, "meth" )( "boom" );
// jQuery 1.9 improved currying with `this` object
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" );
} );
<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>
引用文献
关于javascript - 如何柯里化(Currying) jQuery 方法——哪个 `this` 值将传递 jQuery 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34962461/