本文讲解如何在不破坏封装的前提下，让一个构造函数（如 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 <p>关键改进：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img
src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a>
<p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- selectedColour 作为公共属性直接暴露（非 getter/setter，但语义上只读）；
- 移除冗余的 this.selectedColor() 方法，避免混淆；
- 使用 const/let 替代 var，提升作用域安全性。
✅ CircleTool：正确持有并使用 Palette 实例
在 CircleTool 中，需确保：
- 正确保存传入的 palette 实例；
- 在事件回调中通过 self（或箭头函数）维持对工具实例的引用；
- 直接读取 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 仅消费状态，二者职责清晰、耦合最低。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
