Fixing "this" with bind()

Hey Peter!

Ha! Yea, weird stuff, right! Fortunately, if you keep going to the next tutorial about ES6 and the arrow function, we'll be able to work around all of this in a cleaner way (but because you got through this stuff, you'll really understand how this "this" business works).

So let's check out your solution. I love the this.onRowDelete.bind(this, $row) - that IS the correct way to do this by using bind. You also could have done something crazy like this:

success: function() {
    this.onRowDelete($row);
}.bind(this)

Bananas, right!? You're creating an anonymous function, and so "this" should not be "this" inside of it. But, we bind that anonymous function to this... which allows us to use "this" inside :p.

Anyways, about the let self = this part in onRowDelete(), if you wanted to avoid that, you would do a similar trick:

$row.fadeOut(function () {
    $row.remove();
    this.updateTotalWeightLifted();
}.bind(this));

I hope that makes sense (and that I didn't screw anything up 😉)

Cheers!

Thanks Ryan
That really helps me understand.. mind you I just finished the ES6 course and had to have a moment with ES6 in a dark room for some alone time and some klennex..

I love the other two solutions too, its all about binding it to the function to make sure this is availble as what its been set to before the anonymous function! Thank you for teaching me all that.

Once I finished that it made everything simpler to implement, but knowing how this works is super very important in my opinion.

Hey Graymath technology!

Not quite - but I think this is a good question :). Forget about the "bind" thing for a moment. So, we have some code like this:

this.$wrapper.find('.js-delete-rep-log').on(
    'click',
    this.handleRepLogDelete
);

You need to think of this.handleRepLogDelete as a variable that points to a function. We're basically saying:

Hey jQuery! When this element is clicked, here is the function that you should call.

We don't do this in PHP often, but it's possible. It would be like this:

// I'm just a variable that points to a function
$myFunction = function($str) {
    echo $str;
}

// I'm calling that function!
$myFunction('Call that function!');

So, regardless of the "bind" stuff, what we want to do in JavaScript is pass a reference of a function to jQuery - not actually call that function when we are telling jQuery that we want to listen to some on "click" event. When we add bind later, it's really an unrelated change: we still want to pass a reference to a function, not call that function. When you write this.handleRepLogDelete.bind(this), the bind() function creates a new function and returns a reference to that function. So, we're still passing a reference to a function to jQuery, just a slightly different function that guarantees that "this" will be what we expect :).

I hope that helps! I have problems with this sometimes because PhpStorm likes to auto-complete the ()

Cheers!

Hey there!

It wasn't that the arrow function didn't exist... but rather that we chose to show that in the *next* tutorial - all about the ES6 features: https://knpuniversity.com/s.... Of course, these days, the arrow function is becoming so universal, it should indeed be shown earlier and earlier :). Oh, but bind() does still have a place - even in our new React tutorial, we often use bind to guarantee that callback methods will *always* be bound to this, regardless of how their called. But, the arrow function definitely removes a lot of ugliness.

Cheers!

Hey Ryan,
thanks for your reply!
I understand that you wanted to keep ES6 things separate. On the other hand, when beginning to learn JavaScript, it must feel like an insane language due to this "this" thing (among other weird things). I hope that doesn't put off beginners from exploring more! :)

Hey @asd

Indeed JS is a weird programming language, but after you unveil its mysteries, it's actually fun to work with and especially if you are working with ReactJS

Cheers!

Hey Thao L.
I would preffer to say how *weird* javascript is, but, after you know how it works internally you end-up loving it ;)

Cheers!

Hey Jian,

Do whatever you like most. I think it's easier for you because you just get used to it :) But bind() feature allow you to get rid of "var self = this", and actually, the function behave itself as PHP functions where $this refers to the current object, not to something that calls this function.

Cheers!

Hey Mesut,

We use Darcula PhpStorm theme in our recent screencast, including this one. Check this free tutorial about PhpStorm to know more interesting features in PhpStorm we love and use from screencast to screencast:
https://knpuniversity.com/s...

Cheers!

Hi Max!

If you are referring to use .bind() to guarantee that "this" is this, then absolutely. I was just digging around in the core of a really complex JS library this morning (webpack) and you could see it being used there :).

If you're referring to using var self = this; - this is not (anymore) considered a great practice... but you need to wait until the next tutorial about ES6 to have a better solution. With the tools we have up to now, it's the only way to solve it!

And if you're referring to something entirely... let me know ;).

Cheers!

Hey Ryan! Cool! I was simply wondering as you are trying to refer to PHP al the time (which is great!)...

Best

Max

boykodev

I got you, but that's a detail about callbacks, sometimes you need to control the reference to "this", or you would end up with an unwanted behaviour. In short, JS is WEIRD in general

Have a nice day

Yeah, that's what I've figured. You too!

Haha, nice, you figured out what was the problem. Javascript is kind of a weirdo :p

Hey Maik,

Yeah, good point! We love arrow functions, really - they're our favorite! And you can write them fast - fewer code to type :p But we just do not explain them yet in this course if I'm correct, so we just didn't want to complicate things here. But yeah, if you know the difference and see you can use the arrow function instead - use it! Well, sometimes regular functions might have some valid use cases when better use *them*, but probably most of the time you can use arrow functions instead.

Cheers!