Function.bind vs Closure in Javascript : how to choose?

Question

As said here:

http://jqfundamentals.com/book/index.html

Closures can also be used to resolve issues with the this keyword, which is unique to each scope. This mechanism can be particularly useful when dealing with callbacks, though in those cases, it is often better to use Function.bind, which will avoid any overhead associated with scope traversal.

But it doesn't really say how to distinguish between the two cases. I don't understand in fact what the author means by "avoid any overhead associated with scope traversal." Can you explain?

closure method seems to be twice faster jsperf.com/bind-vs-closure-performace — sbr
– sbr, Commented Sep 27, 2012 at 20:41
Link is broken. "Sorry, what you’re looking for isn’t here" — Luke
– Luke, Commented Jul 31, 2015 at 21:20

Raynos · Accepted Answer · 2011-06-18 15:58:31Z

11

What it's referring to are things like this

obj.doSomething = function() {
  var that = this;
  setTimeout(function() {
    // this is the window
    // that is the obj
    that.doSomethingElse();
  }, 50);
};

vs

obj.doSomething = function() {
  setTimeout((function() {
    // this is the obj
    this.doSomethingElse();
  }).bind(this), 50);
};

Benchmark. No noticable difference in chrome.

edited Jun 18, 2011 at 15:58

answered Jun 18, 2011 at 15:47

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

jpillora Over a year ago

Since function calls happen in microseconds and setTimeout is 10milliseconds+, isn't this lack of difference caused by setTimeout's low timing resolution?

Linus Unnebäck Over a year ago

Yes, but which of the two is considered best practice (ie. the "nicest to read")?

dalgard Over a year ago

Using the this keyword is fundamental to object oriented programming. I would recommend against the suggestion given by @Raynos.

Luke Over a year ago

I find the first example nicest to read (...as long as a different variable name is used besides "that". that's confusing IMO.)

Aniruddha Das Over a year ago

@Raynos, If I would like not not use this in javascript, is there a way to do that in the above example shown? I really don't like to use this in javascript but I don't find a way to do that.

|

Pantelis · Accepted Answer · 2011-06-18 15:49:14Z

10

Take a look at this line in the example in the link above

console.log(self.myName, this.myName);

(with self = this; a couple of lines above). The closure defined outerFunction method, exists in a different scope that is why it has a different this value from the outerObj object. (self.myName!=this.myName)

Scope traversal means, when you are reaching to grab a value (variable,object) that exists in a different scope, therefore additional overhead is added (code becomes slower to execute).

Using bind, you 're calling a function with an existing scope, so that scope traversal does not take place.

answered Jun 18, 2011 at 15:49

Pantelis

6,1561 gold badge20 silver badges22 bronze badges

4 Comments

adelphus Over a year ago

code becomes slower to execute - this is completely wrong as indicated by sbr's comment and other SO questions: stackoverflow.com/questions/17638305/…

Luke Over a year ago

Can you provide more context surrounding the line of code you added? The link provided in the original question is no longer valid.

Luke Over a year ago

Also, can you provide any documentation or evidence to explain "when you are reaching to grab a value that exists in a different scope, additional overhead is added". The performance check linked above by @sbr seems to show that closure is the same - even a bit faster.

DanHorner Over a year ago

Not so: self is generally faster than bind in 2015: jsperf.com/bind-vs-closure-setup/6

Trevor · Accepted Answer · 2022-06-16 04:51:45Z

0

jsperf is dead. meet perf.link.

i'm seeing a different victor each time i run the benchmark. my guess is, modern browsers optimize away most of the disadvantages of either of these approaches.

answered Jun 16, 2022 at 4:51

Trevor

13.5k13 gold badges82 silver badges105 bronze badges

Collectives™ on Stack Overflow

Function.bind vs Closure in Javascript : how to choose?

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related