Use 'this' in Javascript Constructor to access properties

Question

I'm using HTML5 to get photo from Webcam. Then I write a Camera object to handle this, as below:

function Camera(width) {
    this.video = $("video#videoInput");
    this.canvas= $("#editor");

    this.width = 0;
    this.height = 0;
    this.hasGetUserMedia = function() {/*check camera available*/};

    var errorCallback = function(e) {};
    this.turnOn = function() {
        if (this.hasGetUserMedia()) {
            // Good to go!      
            navigator.getUserMedia({video: true}, function(stream) {        
                this.video[0].src = window.URL.createObjectURL(stream);
                //this is video property of Camera
            }, errorCallback);
        } 
    }    
}
var cam = new Camera();
cam.turnOn()

But I can access to Camera properties in some methods, example Camera.turnOn(). when I use this.video, console output undefined error. I know this in this case means navigator object.

So, how do I access to Camera properties inside callback function of another object?

Where your issue is, this references the window object (an alias of the global object in browsers), not "the navigator object", which is a different object referenced by window.navigator. — RobG
– RobG, Commented Nov 29, 2013 at 4:26

Evan Trimboli · Accepted Answer · 2013-11-29 04:06:09Z

3

Save a reference to yourself that you can access in the closure:

function Camera(width) {
    this.video = $("video#videoInput");
    this.canvas = $("#editor");

    this.width = 0;
    this.height = 0;
    this.hasGetUserMedia = function() {/*check camera available*/
    };

    var errorCallback = function(e) {
    };
    this.turnOn = function() {
        if (this.hasGetUserMedia()) {
            var self = this;
            navigator.getUserMedia({
                video: true
            }, function(stream) {
                self.video[0].src = window.URL.createObjectURL(stream);
                //this is video property of Camera
            }, errorCallback);
        }
    }
}

var cam = new Camera();
cam.turnOn()

answered Nov 29, 2013 at 4:06

Evan Trimboli

30.1k6 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Davuz Over a year ago

Oh, solution is simple but very effective! Thank you! //I will accepted for @m59 reputation :D with same answer!

RobG Over a year ago

Rather than self I prefer to use something that indicates it references an instance, say var cam = this.

m59 Over a year ago

@RobG yeah, self makes me think of this, so I've always like that, since it's a lot like this, but lets me know it's the "other" this.

m59 · Accepted Answer · 2013-11-29 04:23:15Z

2

You can store the reference and pass it to anything where you need it (or just use it directly depending on the scope).

var that = this;
someOtherFunction(that);

OR:

you can call another function as though it were this

someotherFunction.call(this);

I would go ahead and cache the reference at the beginning of your function:

function Camera(width) {
  var that = this;

then you have it wherever you might need it.

edited Nov 29, 2013 at 4:23

answered Nov 29, 2013 at 4:06

m59

43.9k14 gold badges122 silver badges139 bronze badges

4 Comments

Davuz Over a year ago

Thank you! It's simple ^^. someotherFunction.call(this) is useful for reuse function.

m59 Over a year ago

@Davuz call() is incredibly helpful when you start dealing with inheritance.

Davuz Over a year ago

before ask, I'm try with navigator.getUserMedia.call(this,...) but i get an error Uncaught TypeError: Illegal invocation

m59 Over a year ago

@Davuz changing the this pointer in this case is not the safest way to go. I would just cache the reference to var that and use it in the callback function. Changing the pointer could mess things up if the function you're calling also needs to refer to itself. Use call() when you NEED to change the this pointer, otherwise just use a reference to the other object.

Collectives™ on Stack Overflow

Use 'this' in Javascript Constructor to access properties

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related