从公共方法访问私有对象变量

Question

如何在loadImage函数中访问ctx ？ 我已经看到了像这样工作的片段，但是当我尝试它时却不起作用。 它总是说'this'或'this.ctx'或'ctx'是未定义的。

var MyClass= function(canvasId){
  var canvas = document.getElementById(canvasId);
  var ctx = canvas.getContext("2d");
};
MyClass.prototype.loadImage = function(imageSrc){
    var image = new Image();
    image.src = imageSrc;
    //cannot access this or ctx
    image.onload = function(){
        this.ctx.drawImage(image,0,0);
    };
    //can't even access it here:
    ctx.drawImage(image,0,0);

};
//window.onload = function(){
 var myObject= new MyClass("myCanvas");
 myObject.loadImage('myImage.jpg');

Answer 1

如何在函数loadImage中访问ctx？

你不能。 除非您在构造函数的作用域内创建loadImage函数。 请参阅Javascript：是否需要为对象中的每个变量都放置this.var？ 有关详细信息。

我已经看到了像这样工作的片段

然后，这些片段也不起作用。

Answer 2

从原型方法访问ctx的唯一方法是使用this关键字将其设置为实例属性。

var MyClass = function (canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext("2d");
};

MyClass.prototype.loadImage = function (imageSrc) {
    var image = new Image();
    image.src = imageSrc;

    var self = this;
    image.onload = function () {
        self.ctx.drawImage(image, 0, 0);
    };

    this.ctx.drawImage(image, 0, 0);
};

请注意，在图像onload处理程序内部，您具有不同的上下文： this不再指向MyClass实例，而是指向图像对象实例。 例如，可以通过在诸如self this的变量中保存一个适当的引用来克服它。