Accessing this in the constructor object

Question

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)?

What exactly are you trying to accomplish? See this for a detailed explanation of `this`. http://stackoverflow.com/questions/40722379/callback-with-this-confusion/40722549 — Scott Marcus, Dec 08 '16 at 19:57
@ScottMarcus Instead of doing this: `this.mouseDownHandler = mouseDownHander.bind(this);` I want to add it in `SomethingUseful.prototype = {`. Hope this clarifies it. — Jessica, Dec 08 '16 at 20:00
[Your prototype definition is weird](http://stackoverflow.com/q/17474390/1048572). And no, you cannot bind a method to an instance on the prototype, as there is no instance (`this`) during the definition and the method is shared. Do it in the constructor instead! — Bergi, Dec 08 '16 at 20:06

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

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?

edited May 23 '17 at 11:53

Community

1
1

answered Dec 08 '16 at 20:02

Felix Kling

795,719
175
1,089
1,143

Actually, it's more like trying to eat the pizza before it has been cooked. – Scott Marcus Dec 08 '16 at 20:03
Does the constructor gets called when I create a new instance of `somethingUseful`? – Jessica Dec 08 '16 at 20:10
`SomethingUseful` *is* the constructor (I assume you have something like `function SomethingUseful() { ... }`) . – Felix Kling Dec 08 '16 at 20:14

Scott Marcus · Answer 2 · 2016-12-08T20:21:05.043

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.

Accessing this in the constructor object

2 Answers2