Using JavaScript new constructor and "this" conflict

Question

I normally use simple objects like this:

var Test = {

    value: '', // A value

    init: function(options) {

        // Set value
        Test.value = options.value;

    }

};

The problem is when I want to use that object more than once on a page. It overwrites itself. E.g:

Test.init({ "value" : "a" });

// Test.value is now "a"

Test.init({ "value" : "b" });

// Test.value is now "b"

This is why I've turned to the new constructor in JavaScript so I can keep the contents of the constructor separate. I am totally new to JavaScript constructors and whether or not this is the correct way to go about it, I am not sure.

I now have it set-up to run like this:

var first = new Test();
first.init({ "value" : "a" });

// first.value is now "a"

var second = new Test();
second.init({ "value" : "b" });

// second.value is now "a"

My problem now is when using this.value inside the constructor.

Here is an example of what I mean. You'll see I set this.value in the init() function. However, when you create a JQuery loop using it's $.each() function, this is overwritten by JQuery so I cannot access the this.value variable or the this.format() function.

function Test() {

    this.value = '';

}

Test.prototype = {

    // Loader
    init: function(options) {

        // Set value
        this.value = options.value;

        // This outputs fine
        console.log(this.value);

        // I'll now create a loop using the JQuery "each" function
        $('li').each(function() {

            // This fails because "this" has now been overwritten by JQuery inside this function
            this.format($(this).attr('data-id'), this.value);

        });

    },

    // Format output
    format: function(id, value) {

        console.log(id + ' : ' + value);

    }

};

var first = new Test();
first.init({ "value" : "a" });

var second = new Test();
second.init({ "value" : "b" });

Here is an example of what error occurs when it is run:

https://jsfiddle.net/8m46u73k/2/

So two questions:

Am I going about this the right way?
How do I get access to functions and variables without using this?

Maybe this is too simple of a solution, but maybe you can save a reference to the Object "this" at the top? i.e var self = this; that way you can reference "self" anywhere you need access to the objects properties. (i.e. your jQuery function) — Sean Thompson, Jun 11 '15 at 22:30

score 0 · Answer 1 · answered Jun 11 '15 at 22:20

0

You need to use this.

To use this in a callback function, use bind() to force the function to always be called with the correct this:

function() { this.whatever; }.bind(this);

answered Jun 11 '15 at 22:20

SLaks

800,742
167
1,811
1,896

Thanks @SLaks. It doesn't seem to work. Have I misunderstood what you mean? I've tried [this](https://jsfiddle.net/8m46u73k/3/) and [this](https://jsfiddle.net/8m46u73k/4/). – Ben Sinclair Jun 11 '15 at 22:28
@BenSinclair: Prototype methods are called with the right `this` (and there is no `this` to bind them to). You only need this for callbacks. You need to learn how Javascript `this` works. – SLaks Jun 11 '15 at 22:31

Chev · Answer 2 · 2015-06-11T22:23:52.753

-1

var Test = {
  value: '', // A value
  init: function(options) {
    // Set value
    Test.value = options.value;
  }
};

The above isn't a class. It's an object literal, which would be more equivalent to an instance of a class.

This is a class:

function Test(value) {
  this.value = value;
}
var test = new Test();

This is a class with methods on the prototype so they aren't duplicated every time you make a new instance of it.

function Car(value) {
  this.value = value;
}
Car.prototype.honkHorn = function () {
  conosle.log("HONK: " + this.value);
};

var car = new Car("I am a car!");
car.honkHorn(); // writes "HONK: I am a car!" to the console.

edited Jun 11 '15 at 22:23

answered Jun 11 '15 at 22:21

Chev

54,842
60
203
309

I've updated my question to the correct wording thank you. However, this isn't really an answer. – Ben Sinclair Jun 11 '15 at 22:23
Well it's not an answer after your update :P Originally you said the problem was "when I use this inside the constructor" and you had no constructor so `this` was referring to the outer scope, not the object. – Chev Jun 11 '15 at 22:24
Well I was going to add another answer, but I'll take the downvote as my clue that it's a waste of time. – Chev Jun 11 '15 at 23:04

Using JavaScript new constructor and "this" conflict

2 Answers2