Function.bind.bind does not work in JavaScript

That is interesting, I can check if prototype is undefined, that means function is already bound.

To play devil's advocate, I will disagree with this statement.

While you will never run across code that looks like this:

printThis.bind(5).bind(7);

It is very possible (#1) you might run across a function that has been previously bound. And when you try to rebind this function, you might not be aware of why you bind statement is not working.

It is also very possible (#2) that you need to return someone a bound function from a library you create. Not knowing that you are preventing someone down the road from rebinding that function.

Being able to bind a context in JavaScript is a very powerful tool.

const list = { 0: 'first', 1: 'second', 2: 'third', length: 3 };
[].map.call(list, o => o.toUpperCase()); //=> [ 'FIRST', 'SECOND', 'THIRD' ]
//       \
//         I can bind []'s `this` to `list`

First let's imagine you have an object that uses this. Because I am unimaginative, I'll create this contrived example:

// Contrived example just to demo `this`
const MyArray = {
  0: 'first', 1: 'second', 2: 'third', length: 3,
  map(func) {
    const value = []
    for (let i = 0; i < this.length; i++) {
      value.push(func(this[i]))
    }
    return value
  }
}

and it works great!

// 👍 This works great!
MyArray.map(o => o.toUpperCase()) //=> [ 'FIRST', 'SECOND', 'THIRD' ]

But we have a different use case (for reasons) that doesn't work.

// 😢 This does not work!
const map = MyArray.map
map(o => o.toUpperCase()) //=> []

This code doesn't work because calling map will use global as your this.

So you add this creative line to keep map always bound to MyArray:

const MyArray = {
  0: 'first', 1: 'second', 2: 'third', length: 3,
  map(func) {
    const value = []
    for (let i = 0; i < this.length; i++) {
      value.push(func(this[i]))
    }
    return value
  }
}
MyArray.map = MyArray.map.bind(MyArray)

Making this code work as expected...

// 👍 This works great!
const map = MyArray.map
map(o => o.toUpperCase()) //=> [ 'FIRST', 'SECOND', 'THIRD' ]

But what you didn't know is you unknowingly created a bug somewhere else in your application:

// 😢 This stopped working!
const map = MyArray.map

map.call([ 'left', 'middle', 'last' ], o => o.toUpperCase())
//=> [ 'FIRST', 'SECOND', 'THIRD' ]
//   ------------------------------
//                                  \
//                                    ?!?! 😵 WHAT 😵 ?!?!

So to summarize:

Knowing why this happens is important. Once a function is bound, all future bindings will be ignored. So you must always bind with care.

Or you can do what I do and that is write JavaScript 100% free of this ;)

Rethinking JavaScript: The complete elimination and eradication of JavaScript's this.

Doesn't that make it interesting? Nobody writes such thing, but when you are in chains of method calls and wondering what is wrong and why this isn't what it supposed to be, knowing advanced stuff helps in fixing issues easily. I found this when I was trying to optimize event handlers and I used bind without knowing it's side effects.