By the end of this tutorial, you’ll use Lodash’s _.bindAll() to lock this to the correct object when methods are passed around as callbacks.
Call _.bindAll(object, methodNames) before passing methods away.
Prevent this from becoming undefined or the wrong object.
Methods on the object are replaced with bound versions.
Register this.handleClick safely with DOM listeners.
Bind several handlers in one call—or all methods at once.
Know when arrow functions or a single .bind() fit better.
_.bindAll()?_.bindAll() is a Lodash util helper that binds selected methods on an object to that object. In JavaScript, extracting a method loses its this context: const fn = obj.greet; fn() often breaks. After _.bindAll(obj, 'greet'), calling obj.greet (even as a detached reference) still sees this === obj.
Think of _.bindAll(view, 'render', 'destroy') as “make sure these methods always run as if they were called on view, even when the browser or a timer invokes them later.”
Unlike Function.prototype.bind, which returns a new function, _.bindAll() mutates the object by replacing each named method with its bound counterpart. That makes it handy in constructors where you want this.onClick to stay stable.
Bind specific methods—or every own method when names are omitted:
_.bindAll(object, [methodNames])object — the object whose methods should be bound (modified in place).methodNames — one or more method name strings, or an array of names._.bindAll(obj) binds every own method Lodash discovers on obj.object (the same reference, for chaining).method.bind(object).import bindAll from "lodash/bindAll";
const user = {
name: "John",
greet() {
console.log("Hello, " + this.name + "!");
}
};
bindAll(user, "greet");
const detached = user.greet;
detached(); // -> "Hello, John!"| Task | Code pattern | Result |
|---|---|---|
| Bind one method | _.bindAll(obj, "greet") | obj.greet keeps this |
| Bind several | _.bindAll(obj, "a", "b") | Multiple handlers fixed |
| Array of names | _.bindAll(obj, ["a", "b"]) | Same as variadic form |
| Bind all methods | _.bindAll(obj) | Every own method bound |
| Single fn alternative | this.fn = this.fn.bind(this) | Native one-off |
| Arrow alternative | handleClick = () => { ... } | Lexical this (classes) |
YesReplaces methods on object
objectSame reference
_.bind()Function category
UtilObject method helper
Every argument to _.bindAll() and what it controls:
object RequiredThe object whose methods will be bound. Lodash mutates this object by assigning bound functions back to the named properties.
_.bindAll(viewModel, "save")methodNames OptionalStrings naming methods to bind. Pass multiple names or one array. If omitted, Lodash binds all own methods on the object.
_.bindAll(obj, "onClick", "onKey")return value objectReturns the same object reference, so you can chain: _.bindAll(obj, "a").init() if init was also bound.
return _.bindAll(this, "render")bound method ImportantAfter binding, obj.method === obj.method still holds, but the function identity changes to a bound wrapper. Do not bind the same method repeatedly in hot loops.
obj.greet = obj.greet.bind(obj)Only methods that exist on the object are bound. Typos in method names are silently skipped—double-check spelling against your object literal.
Practical _.bindAll() patterns with copy-ready code, sample output, and interactive Try It Yourself labs.
Fix detached method references and see why unbound calls fail.
Bind greet so extracting it to a variable no longer loses this.name.
const user = {
name: "John",
greet() {
console.log("Hello, " + this.name + "!");
}
};
_.bindAll(user, "greet");
const sayHello = user.greet;
sayHello();
// -> "Hello, John!"_.bindAll replaces user.greet with user.greet.bind(user). The bound function carries a fixed this, so sayHello() still reads user.name.
Without binding, a detached method sees this as undefined in strict mode (or the global object in sloppy mode).
const counter = {
value: 0,
increment() {
this.value += 1;
return this.value;
}
};
// Works when called on the object
console.log(counter.increment()); // 1
// Breaks when detached (strict mode modules)
const broken = counter.increment;
try {
broken();
} catch (err) {
console.log("Error:", err.message);
}
// Cannot read properties of undefined (reading 'value')
_.bindAll(counter, "increment");
const fixed = counter.increment;
console.log(fixed()); // 2Method call syntax (obj.method()) sets this automatically. Callback registration passes the function alone—binding restores the missing context.
DOM event handlers, multiple methods, and composed objects.
Pass this.handleClick to addEventListener without losing the widget instance.
const widget = {
label: "Save",
clicks: 0,
init() {
document
.getElementById("save-btn")
.addEventListener("click", this.handleClick);
},
handleClick() {
this.clicks += 1;
console.log(this.label + " clicked " + this.clicks + " time(s)");
}
};
_.bindAll(widget, "handleClick", "init");
widget.init();
// Click the button in the DOM to see outputThe browser invokes the listener with this set to the element—not your widget. Binding forces this to stay on widget so this.clicks updates the right object.
Bind every handler a small API object exposes before registering callbacks.
const mathUtils = {
factor: 2,
double(n) {
return n * this.factor;
},
triple(n) {
return n * this.factor * 1.5;
}
};
_.bindAll(mathUtils, "double", "triple");
const d = mathUtils.double;
const t = mathUtils.triple;
console.log(d(5)); // 10
console.log(t(5)); // 15Both methods read this.factor. Binding both in one call is cleaner than repeating .bind(this) in a constructor.
After merging behavior from mixins, bind the imported methods so they share one context.
const loggerMixin = {
log(msg) {
console.log("[" + this.name + "] " + msg);
}
};
const timerMixin = {
startTime: null,
start() {
this.startTime = Date.now();
}
};
const app = Object.assign({ name: "App" }, loggerMixin, timerMixin);
_.bindAll(app, "log", "start");
const logFn = app.log;
app.start();
logFn("Started at " + app.startTime);Mixin methods were copied onto app but still need a stable this. Bind only the methods you plan to pass as callbacks—not every property.
Compare with native binding and modern class patterns.
Three ways to preserve this in a class-style object—pick what fits your codebase.
// 1) Lodash bindAll in constructor-style init
function Panel(name) {
this.name = name;
this.render = function () {
return "Panel: " + this.name;
};
_.bindAll(this, "render");
}
// 2) Native bind (single method)
function PanelNative(name) {
this.name = name;
this.render = function () {
return "Panel: " + this.name;
};
this.render = this.render.bind(this);
}
// 3) Arrow function (lexical this — no bind needed)
const panelArrow = {
name: "Arrow",
render: function () {
const inner = () => "Panel: " + this.name;
return inner();
}
};
const p = new Panel("Lodash");
console.log(p.render()); // Panel: Lodash
console.log(panelArrow.render()); // Panel: ArrowUse _.bindAll() when a plain object or legacy class constructor has several prototype methods to fix at once. For a single handler, native .bind(this) or an arrow class field is usually enough.
_.bindAll() WorksLodash flattens string arguments and arrays into a list—or discovers all own methods if none were passed.
For each name, reads object[name] and replaces it with fn.bind(object).
The object reference is unchanged; only the method properties become bound wrappers.
Pass obj.method to timers, listeners, or arrays—this stays on obj.
_.bindAll() mutates the object—call it once during initialization, not on every render._.bindAll(obj) without names binds all own methods, which may include helpers you never pass as callbacks.this from the enclosing scope.handleClick = () => {} class fields over constructor bindAll.this on a single function._.bindAll() solves the classic JavaScript this problem when methods leave their object—event listeners, timers, and detached references. Bind only the handlers you need, once at setup time, and your callbacks stay predictable.
In modern codebases, arrow functions and native .bind() often replace bindAll, but the Lodash helper remains a concise batch fix for plain objects and legacy class constructors.
init or the constructor—before registering callbacks_.map_.bindAll(this) on every method when only one handler needs itconst fn = obj.methodthis dynamically to callers_.bindAll()Use these points when methods become callbacks.
Methods keep their object.
BasicsReplaces methods in place.
ImportantDOM listener classic use.
PracticalMany names in one call.
PatternArrows or .bind() too.
ModernBackbone.js popularized _.bindAll(this) in view constructors so every events hash handler kept the view as this. The same pattern appears in any object that registers methods with third-party APIs before ES6 class fields existed.
Open the Try It editor, run the examples, and experiment with event handlers and detached methods.
6 people found this page helpful