Question

如何在ctx函数中访问loadImage？我已经看到了与此类似的片段，但是当我尝试时它只是不起作用。它总是说这个＆＃39;或者＆＃39; this.ctx＆＃39;或者＆＃39; ctx＆＃39;未定义。

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: Do I need to put this.var for every variable in an object?。

我看到的片段与此完全相同

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

Answer 2

从proptotype方法访问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实例，而是指向图像对象实例。您可以通过在this等变量中保存对正确self的引用来克服它。

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

2 个答案: