Skip to content

Instantly share code, notes, and snippets.

@jeffschwartz
Last active December 12, 2015 02:58
Show Gist options
  • Save jeffschwartz/4702726 to your computer and use it in GitHub Desktop.
Save jeffschwartz/4702726 to your computer and use it in GitHub Desktop.
How to make using call.bind(somefunction) on a protytpe method easier. For instance, using this technique, instead of calling Array.prototype.slice.call(arguements) you can just call slice(arguments). Neat!
/*
* This shows one of my favorite JavaScript constructs that
* you can use to make using call.bind(somefunction) on a prototype method
* easier.
*
* This example show how to make calling Array.prototype.slice.call(somethis)
* easier by allowing you to just call slice. This technique isn't just
* limited to slice and can be used with any prototype method.
*/
/*
* Wrap everything up in function scope
*/
(function ( window ) {
"use strict";
window.x = {};
var unboundSlice = Array.prototype.slice;
/*
* The bind() function creates a new function (a bound function) with the same function body (internal
* Call attribute in ECMAScript 5 terms) as the function it is being called on (the bound function's
* target function) with the this value bound to the first argument of bind(), which cannot be overridden.
* bind() also accepts leading default arguments to provide to the target function when the bound function
* is called. A bound function may also be constructed using the new operator: doing so acts as though the
* target function had instead been constructed. The provided this value is ignored, while prepended
* arguments are provided to the emulated function.
* See https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
*/
/*
* As used in the example below, 'bind' is being applied to 'Function.prototype.call' (its 'target' function)
* making 'unboundslice' the context of 'call' (i.e. 'unboundSlice.call'). The result is then assigned to 'slice'.
* Now, whenever we call 'slice' it is like calling 'slice.call' and requires that we pass the context (the 'this')
* as the first parameter and the 'beginAt' value as the second parameter.
*/
var slice = Function.prototype.call.bind( unboundSlice );
x.getParamsArray = function ( beginAt ) {
console.log( "beginAt=", beginAt );
console.log( "arguments=", arguments );
return slice( arguments, beginAt );
};
})( window );
console.log( x.getParamsArray( 1, 1, 2, 3, 4, 5, 6, 7 ) ); // [1, 2, 3, 4, 5, 6, 7]
/*
* Underscore provides its own wrapper on top of es5
* making it even more convenient to use.
*
* Here's the same idea as above but implemented using Underscore.js.
*
* Pros: In my opinion this is so much nicer to read, not to mention
* less lines of cod.
*
* Cons: requires Underscore.js but in the larger scope of things this isn't really an issue imo.
*/
(function ( window ) {
"use strict";
window.x = {};
x.slice = _.bind( Array.prototype.slice, [1, 2, 3, 4, 5, 6, 7 ] );
})( window );
console.log( x.slice( 1 ) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment