p5.js Instance Mode下如何从类内部访问实例变量

你代码中let myColor = 75是p5实例回调函数内部的局部变量，并没有挂载到你传入的p实例对象上，所以在类中通过p.myColor访问自然返回undefined。p实例上只会默认挂载p5内置的方法（比如rect、createCanvas）和你主动绑定到p对象上的自定义属性。

这个需求是可行的，但不推荐让类直接访问sketch内的所有变量，这种做法会让类和当前sketch逻辑强耦合，类的复用性会大幅下降，后续维护过程中很容易出现变量命名冲突、逻辑纠缠的问题。

方案1：将共享变量挂载到p实例（不推荐大量使用） #

直接把需要共享的变量绑定到p对象上，修改index.js代码即可：

import p5 from "p5"
import TestClass from "./_testClass";

let sketch = new p5( (p) => {
    // 把myColor挂载到p实例上，而非声明为局部变量
    p.myColor = 75;

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p)
    }
}, "p5");

修改后你在render方法中访问p.myColor就能拿到对应值，适合少量共享变量的临时场景。

方案2：显式传参（最推荐） #

调用类方法时直接把需要用到的变量作为参数传入，完全不需要修改类对p实例的依赖逻辑，耦合度最低：
修改index.js的调用部分：

p.setup = function() {
    p.createCanvas(1000,1000);
    let t = new TestClass(100,100)
    // 把需要的变量作为参数传给render方法
    t.render(p, myColor)
}

修改_testClass.js的render方法：

render(p, myColor) {
    p.rect(this.x, this.y, 50, 50);
    // 直接使用传入的参数即可
    console.log(myColor);
}

方案3：打包配置对象传入（适合多共享变量场景） #

如果需要共享的变量很多，可以统一封装为一个配置对象传入，避免参数过多的问题：

// index.js里
let sketch = new p5( (p) => {
    let myConfig = {
        myColor: 75,
        // 其他需要共享的变量都可以放这里
        rectSize:50
    };

    p.setup = function() {
        p.createCanvas(1000,1000);
        let t = new TestClass(100,100)
        t.render(p, myConfig)
    }
}, "p5");

// _testClass.js里
render(p, config) {
    p.rect(this.x, this.y, config.rectSize, config.rectSize);
    console.log(config.myColor);
}

内容的提问来源于stack exchange，提问作者uess