0

I have seen the docs.. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind but I just don't seem get .bind in pure vanilla javascript as a concept.

Can someone please explain. I have seen code examples, but this topic I'm struggling to understand what it actually means.

This question I do feel is different, because I want to understand it from a conceptual view point, not just code examples. For example, if I had a garden object, and I added a function called make apples, it would generate 1 apple. If I had a function called make oranges, it would return 1 orange. What does bind mean, in a simple context please. JavaScript has been very difficult for me and my progress is slow and I'm struggling to get the bind concept.

Donna
  • 7
  • 6
  • In order to understand `.bind` you should understand how `this` works in JavaScript. Read this chapter from "You don't know JS" https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes – caisah Nov 18 '17 at 18:57

2 Answers2

1

bind allows you to change the value of this in a function. bind also creates a new function.

var cat = {
 name: 'cat',
  whatIsThis(){
   console.log('this is ' + this.name)
  }
}
var dog = {
 name: 'dog',
  whatIsThis(){
   console.log('this is ' + this.name)
  }
}

cat.whatIsThis()// this is cat

dog.whatIsThis()// this is dog

var func = cat.whatIsThis.bind(dog)

func()// this is dog

cat.whatIsThis()// this is cat
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • I understand part of this code, and tested in the console and it works exactly like you said. thank you btw. The part I struggle understanding is .. Why is it that when we do var func = cat.whatIsThis.bind(dog) and then when calling func() why isn't var func() both cat and dog, why is it only dog? That part is flying over my head. Thank you again. – Donna Nov 18 '17 at 20:28
  • Oh i see, do you mean why there aren't 2 log statements? `cat.whatIsThis` does not call the function (hence no `this is cat` in the log), it only serves as a reference so that i can assign it to the variable `func`. Once i've assigned `cat.whatIsThis.bind(dog)` to `func`, it no longer remembers anything about cat, even though that's where it came from. It's important to know the difference between `whatIsThis` and `whatIsThis()`. The former is a function reference (you can save to variable, or pass into another function as an argument), the latter is a function call. – Eric Guan Nov 18 '17 at 20:42
  • Ok I think I finally actually understand both this and bind!. THANK YOU for this moment.! – Donna Nov 18 '17 at 21:05
  • Glad i could help. Isn't learning fun :D – Eric Guan Nov 18 '17 at 21:48
0

The keyword this in JavaScript is (generally) bound to the object that caused the function that contains the word this to be invoked. Often times, that object that is bound to this is not the object that we would like for this to be bound to. A full understanding of this binding is essential to really understand JavaScript in depth. Now, I did say that this is "generally" bound to the object that caused the function containing this to be invoked, but there are many reasons why that may not turn out to be the case. I've written about this and what object it will bind to under various circumstances here.

The .bind() method allows us to first make a copy of a function that contains the word this and additionally allows us to override the normal this binding and bind any object we like to the this occurrence in that newly copied function.

It allows us to control the object that this is bound to while giving us a completely new function to work with.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71