javascript - 在方法中丢失对象 "this"上下文

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

我正在做一些练习，但我在管道方法中丢失“this”上下文时遇到问题:

function Main() {
// something
this.render = function () {
    this.groups.forEach(function(g){
        renderGroup(g);
    });
    return this;
};
// something
this.pipe = function () {  
    this.render();                      // 1
    requestAnimationFrame(this.pipe);   // 2
    return this;
};
// something
}

Ad.1:导致“this 未定义，因此它没有渲染功能”

Ad.2:如果上面有注释，“this”上下文仍然是未定义的，所以管道不是一个函数

初始化:

function init () {
  var m = new Main();
  requestAnimationFrame(m.pipe);
}

window.onload = function () {
  init();
}

完整的目标代码:

function Main() {
this.canvas = document.createElement("canvas");
this.canvas.width = 1366;
this.canvas.height = 768;

this.canvas.style.width = this.canvas.width + "px";
this.canvas.style.height = this.canvas.height + "px";

this.groups = [];
window.app = {};

this.grain = 30 * 1000 * 60;
this.grainWidth = 30;

this.getGroups = function () {return this.groups;}
this.render = function () {
    this.groups.forEach(function(g){
        renderGroup(g);
    });
    return this;
};

this.ctx = this.canvas.getContext("2d");
this.pipe = function () {  
    this.render();        
    requestAnimationFrame(this.pipe);
    return this;
};

document.body.appendChild(this.canvas);

registerEvents();

}

renderGroup 是普通的 forEach。

什么原因导致上下文丢失？

Answer 1

只需绑定(bind)您想要调用管道的上下文

this.pipe = function () {  
    this.render();                      // 1
    requestAnimationFrame(this.pipe);   // 2
    return this;
}.bind(this)