本文讲解如何在不破坏封装的前提下，让一个构造函数（如 CircleTool）安全访问另一个构造函数（如 ColourPalette）的当前选中颜色状态，重点解决 this 绑定、作用域隔离与状态共享问题。

本文讲解如何在不破坏封装的前提下，让一个构造函数（如 circletool）安全访问另一个构造函数（如 colourpalette）的当前选中颜色状态，重点解决 `this` 绑定、作用域隔离与状态共享问题。

在基于 P5.js 的绘图应用中，实现严格封装（如私有方法、受控状态）的同时保持模块间协作，是面向对象设计的关键挑战。你遇到的问题本质并非“无法访问私有变量”，而是状态暴露方式不当 + 回调上下文丢失：ColourPalette 中 colourClick 是闭包内私有函数，其内部变量 c 并未对外暴露；而 CircleTool 在事件回调中错误引用了未声明的 colorPalette，且 this 指向了 DOM 元素而非工具实例。

✅ 正确解法：暴露只读状态接口，绑定稳定上下文

ColourPalette 不应暴露私有函数 colourClick（它本就是 UI 交互逻辑），而应提供稳定的公共状态访问器。修改其定义如下：

function ColourPalette() {
    this.colours = ["black", "silver", "gray", /* ... */];
    this.selectedColour = "black"; // 公共可读属性（只读语义由约定保障）

    const self = this;

    const colourClick = () => {
        const current = select("#" + self.selectedColour + "Swatch");
        current.style("border", "0");

        const c = this.id().split("Swatch")[0];
        self.selectedColour = c;
        fill(c);
        stroke(c);

        this.style("border", "2px solid blue");
        // 注意：此处不再 return c —— 状态已同步至 this.selectedColour
    };

    this.loadColours = function() {
        fill(this.colours[0]);
        stroke(this.colours[0]);
        for (let i = 0; i < this.colours.length; i++) {
            const colourID = this.colours[i] + "Swatch";
            const colourSwatch = createDiv();
            colourSwatch.class('colourSwatches');
            colourSwatch.id(colourID);
            select(".colourPalette").child(colourSwatch);
            select("#" + colourID).style("background-color", this.colours[i]);
            colourSwatch.mouseClicked(colourClick);
        }
        select(".colourSwatches").style("border", "2px solid blue");
    };

    this.loadColours();
}

关键改进：

• selectedColour 作为公共属性直接暴露（非 getter/setter，但语义上只读）；
• 移除冗余的 this.selectedColor() 方法，避免混淆；
• 使用 const/let 替代 var，提升作用域安全性。

✅ CircleTool：正确持有并使用 Palette 实例

在 CircleTool 中，需确保：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

1. 正确保存传入的 palette 实例；
2. 在事件回调中通过 self（或箭头函数）维持对工具实例的引用；
3. 直接读取 palette.selectedColour，而非尝试调用私有函数。

修正后的 CircleTool：

function CircleTool(palette) {
    this.name = "circleTool";
    this.icon = "/assets/circle.jpg";
    this.colorPalette = palette; // ✅ 保存引用
    this.axis = "fill"; // 初始化状态
    this.lineOfSymmetry = width / 2;

    const self = this; // ✅ 创建稳定引用
    let startMouseX = -1;
    let startMouseY = -1;
    let drawing = false;

    this.draw = function() {
        if (mouseIsPressed) {
            if (startMouseX === -1) {
                drawing = true;
                startMouseX = mouseX;
                startMouseY = mouseY;
                loadPixels();
            } else {
                updatePixels();
                ellipse(startMouseX, startMouseY, dist(startMouseX, startMouseY, mouseX, mouseY));
            }
        } else if (drawing) {
            drawing = false;
            startMouseX = -1;
            startMouseY = -1;
        }
    };

    this.populateOptions = function() {
        select(".options").html("<button id='directionButton'>Fill circle</button>");

        select("#directionButton").mouseClicked(function() {
            const button = select("#" + this.elt.id);
            if (self.axis === "fill") {
                self.axis = "notFill";
                fill(self.colorPalette.selectedColour); // ✅ 直接读取状态
                button.html('Circle not Filled');
            } else {
                self.axis = "fill";
                noFill();
                button.html('Circle Filled');
            }
        });
    };
}

⚠️ 注意事项与最佳实践

• 禁止直接暴露私有函数：colourClick 是 UI 响应逻辑，不属于业务状态接口。强行暴露会破坏关注点分离。
• this 绑定是核心陷阱：DOM 事件回调中 this 默认指向触发元素。必须用 const self = this 或 ES6 箭头函数（若环境支持）固化上下文。
• 命名统一性：全文统一使用 color（P5.js 官方拼写），如 colorPalette、selectedColor，避免 colour/color 混用导致维护困难。
• 状态同步时机：selectedColor 在用户点击色块时已被实时更新，CircleTool 只需在需要时读取——无需额外同步机制。

通过以上重构，CircleTool 能可靠获取当前选中颜色，同时完全遵守封装原则：ColourPalette 控制状态变更逻辑，CircleTool 仅消费状态，二者职责清晰、耦合最低。