Rules of "this" keyword in JS

JavaScript
1

So I’m hitting a point in my Udemy course where this was and is being used to bind etc. The instructor said there are two main “rules” to using it.

Here is the “rule” from the slides:

Screenshot 2023-03-13 14.10.28

I need some clarity because I keep getting errors even when I do those rules lol. Can someone explain this to me please? Thanks

2

What code have you written that you are getting errors?

3

Here is my JS and HTML so you can try yourself.

JS

class Timer {
  constructor(durationInput, startButton, pauseButton) {
    this.durationInput = durationInput;
    this.startButton = startButton;
    this.pauseButton = pauseButton;

    this.startButton.addEventListener('click', this.start.bind(this));
  }

  start() {
    this.importantMethodCall()
  }
}

importantMethodCall() {
  console.log('The thing was called!')
}


const durationInput = document.querySelector('#duration');
const startButton = document.querySelector('#start');
const pauseButton = document.querySelector('#pause');

const timer = new Timer(durationInput, startButton, pauseButton);

HTML (linked for JS file)

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input id="duration" />
    <button id="start">Start</button>
    <button id="pause">Pause</button>
    <script src="timer2.js"></script>
  </body>
</html>
1 Like
4

This code represents the class. If you want to have importantMethodCall be a method of this class, then it needs to be nested inside the { and } of the Timer class definition.

5

AHh okay. So the start() method needs to be put in the closing } above it? I see.

6

No, the importantMethodCall method needs to be moved above the last } above the importantMethodCall method.

7

Yeah, lol. That’s my bad. That’s what I meant to say.