CODEWITHSUNDEEP
javascript
Jessica
Jessica

Reputation: 9830

Accessing this in the constructor object

I'm trying to access this in the prototype constructor (I think that's what it's called?).

SomethingUseful.prototype = {
    constructor: SomethingUseful,
    init: init,
    someFunction: someFunction,
    mouseDownHandler: mouseDownHander.bind(this)
}

But this equals window. So I tried doing bind(SomethingUseful), and when I this in the mouseDownHandler, the whole function logs out as plain text, so I can't use things that are in this, in the actual mouseDownHandler function.

What's the correct way to access this of SomethingUseful in the constructor function (again, I probably got the name wrong, and if I did, please correct it, or let me know in the comments)?

Upvotes: 0

Views: 66

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65808

When it comes to object definitions, this is used to declare "instance properties", which are properties that can have values that vary from instance to instance.

Usually, for properties that store functions (a.k.a. methods), that functionality doesn't change from instance to instance, so those properties are usually made on an object's prototype, so that each instance doesn't have to store the exact same functionality as every other instance.

When designing an Object to have instances of it created later, we declare a function, not an object literal because you can't invoke an object.

// This is known as a "constructor function" because it is
// intended to produce (construct) objects that will then
// be bound to instance variables:
function SomethingUseful(){
  // This is a regular variable that is scoped to the function
  // it will not be accessible to instances later.
  var a = 10;
  
  // Because of the word "this", this becomes an "instance property"
  // that each instance of SomethingUseful will have. Each instance
  // will start out with a default value of 20, but each instance 
  // can change that value and it won't affect any other instance
  this.someProperty = 20;  
}

// Methods are not set up in the constructor (so they do not become
// instance properties) instead, they are set up on the constructor's
// prototype and inherited into each instance. All instances share
// the same one prototype:
SomethingUseful.prototype.someMethod = function(){
  // Even though this method is not stored with each instance, it 
  // can access the current instance by using "this"
  return this.someProperty;
};


// Make instances of SomethingUseful by calling the constructor function
// which returns object instances. Those instances are stored in different
// variables and that's how we keep the instances separate from each other
var obj1 = new SomethingUseful();
var obj2 = new SomethingUseful();

// Now that we have used the constructor function to create the instances,
// we can ask those instances what function was used to create them:
console.log("The object stored in obj1 was constructed with: " + obj1.constructor.name);

//Check obj1:
console.log("obj1.someProperty is: " +  obj1.someProperty);
obj1.someProperty = 50;
console.log("obj1.someProperty changed and is now: " + obj1.someProperty)
console.log("obj1.someMethod returns: "  + obj1.someMethod());

//Check obj2:
console.log("obj2.someProperty is: " +  obj2.someProperty);
console.log("obj2.someMethod returns: "  + obj2.someMethod());

You are trying to take care of something that JavaScript takes care of for you. Just define the functionality you need in the event property and then go ahead and make instances of your object. JavaScript will make sure that each instance gets your function.

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816334

Instead of doing this: this.mouseDownHandler = mouseDownHander.bind(this); I want to add it in SomethingUseful.prototype = {.

That's not possible. At the moment you are trying to bind the function to an instance, there is no instance you can bind the function to. Only while or after the constructor was called will there be an instance to bind the function to.

In other words: You are trying to eat the pizza before it was delivered.

Related: How to access the correct `this` context inside a callback?

Upvotes: 1

Related Questions