javascript - How do I keep the this context of my original function after calling .apply()? -
i have functiona accepts function parameter. want manipulate arguments of function in functiona , return functionc. found can .apply(), original context of functionb lost , instead replaced functiona.
for example,
var factory = { return { fnb: function() {} } }; fna(fn) { return fnc(params) { var customparams = [params, {something: else}] return method.apply(null, customparams); } } var load = fna(factory.fnb); load(params);
however when execute load(params), lose functionb's context. functionb defined method factory. how can go this? thanks!
i'm going assume method
fn
, , functionb
function assigned object property, , various syntax errors aren't present in actual code:
var obj = { name: "foo", functionb: function() { console.log(this.name); // <== using `this` refer `obj` } }; function functiona(fn) { return function functionc(params) { var customparams = [params, {something: "else"}]; return fn.apply(null, customparams); }; } var load = functiona(obj.functionb); load("a", "b"); // fails because `this` in call `functionb` isn't `obj`
if so, can fix in couple of wasy:
1) using function#bind
whne passing functionb
functiona
:
var load = functiona(obj.functionb.bind(obj)); load("a", "b"); // works
var obj = { name: "foo", functionb: function() { snippet.log(this.name); // <== using `this` refer `obj` } }; function functiona(fn) { return function functionc(params) { var customparams = [params, { something: "else" }]; return fn.apply(null, customparams); }; } var load = functiona(obj.functionb.bind(obj)); load("a", "b"); // works
<!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
2) adding second argument functiona
, as bergi suggested, uses when calling fn
(see in snippet) — approach used many of es5 array
methods, instance:
var obj = { name: "foo", functionb: function() { snippet.log(this.name); } }; function functiona(fn, thisarg) { // <=== accepting thisarg return function functionc(params) { var customparams = [params, { something: "else" }]; return fn.apply(thisarg, customparams); // <=== using }; } var load = functiona(obj.functionb, obj); // <=== passing load("a", "b"); // works
<!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
Comments
Post a Comment