Last active
December 12, 2015 02:58
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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