CODEWITHSUNDEEP
javascriptoopobjectscopethis
TJ_Hooker
TJ_Hooker

Reputation: 43

Scoping inside an object - this

I wrote my first own object including methods but I don't really understand the scoping inside of it. I'm programming a small app where I'm going to have to use these mouse parameters all the time. I just want to be able to access these values with a simple

let mouse_positionX = mouse.pos.x;

My first try:

function Mouse() {
  this.now = { x: 0, y: 0};
  this.start = { x: 0, y: 0};
  this.stop = { x: 0, y: 0}
  this.delta = { x: 0, y: 0};

  let getDelta = function(e) {
    return { x: (e.clientX - this.start.x), y:(e.clientY - this.start.y) };
  }

  let move = function(e) {
    this.now = { x: e.clientX, y: e.clientY };
    this.delta = getDelta(e);
  }

  let start = function(e) {
    document.addEventListener('mousemove', move, false);
    this.start = { x: e.clientX, y: e.clientY };
  }

  let stop = function(e) {
    this.stop = { x: e.clientX, y: e.clientY };
    this.delta = getDelta(e);
    document.removeEventListener('mousemove', move, false);
  }

  document.addEventListener('mousedown', start, false);
  document.addEventListener('mouseup', stop, false);
}

const mouse = new Mouse();

But this doesn't work. this inside of one of the "private" functions was pointing to window instead of the object itself:

let start = function(e) {
    document.addEventListener('mousemove', move, false);
    this.start = { x: e.clientX, y: e.clientY };
    console.log(this); // window object
  }

So I used another variable: _self = this outside the functions. _self was than available inside the functions:

function Mouse() {
  this.now = { x: 0, y: 0};
  this.start = { x: 0, y: 0};
  this.stop = { x: 0, y: 0}
  this.delta = { x: 0, y: 0};

  let _self = this;

  let getDelta = function(e) {
    return { x: (e.clientX - _self.start.x), y:(e.clientY - _self.start.y) };
  }

  let move = function(e) {
    _self.now = { x: e.clientX, y: e.clientY };
    _self.delta = getDelta(e);
  }

  let start = function(e) {
    document.addEventListener('mousemove', move, false);
    _self.start = { x: e.clientX, y: e.clientY };
  }

  let stop = function(e) {
    _self.stop = { x: e.clientX, y: e.clientY };
    _self.delta = getDelta(e);
    document.removeEventListener('mousemove', move, false);
  }

  document.addEventListener('mousedown', start, false);
  document.addEventListener('mouseup', stop, false);
}

const mouse = new Mouse();

I'm new to this kind of object usage so I have two questions. I can't find a specific answer or I didn't know what to search for exactly.

A: Why is this inside one of the functions is pointing to the window object instead to the object itself?

B: Is it generally a bad idea to use an object for something like this (and also bind to the document inside an object)?

Upvotes: 1

Views: 42

Answers (1)

RustyJames
RustyJames

Reputation: 133

A:

The global scope in the browser is always window

B:

You're not using object, you're using functions. You could get alot of this functionallity by creating objects WITH functions in them.

var Animal = {
  type: 'Invertebrates', // Default value of properties
  displayType: function() {  // Method which will display type of Animal
    console.log(this.type);
  }
};

var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

var fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output:Fishes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Upvotes: 1

Related Questions