Question

我正在使用HTML5从网络摄像头获取照片。然后我写一个Camera对象来处理这个问题，如下所示：

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

但我可以通过某些方法访问Camera属性，例如Camera.turnOn()。当我使用this.video时，控制台输出undefined error。我知道this在这种情况下意味着navigator object。

那么，如何在另一个对象的回调函数中访问Camera属性？

Answer 1

保存对您自己的引用，您可以在闭包中访问：

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

Answer 2

您可以存储引用并将其传递给您需要的任何引用（或者根据范围直接使用它）。

var that = this;
someOtherFunction(that);

OR：

你可以调用另一个函数，就好像它是this

一样

someotherFunction.call(this);

我会继续在您的函数开头缓存引用：

function Camera(width) {
  var that = this;

然后你可以随时随地使用它。

在Javascript构造函数中使用“this”来访问属性

2 个答案: