如何使用Object.defineProperties为复杂的Canvas绘图引擎注入不可覆盖的基准坐标-js教程-PHP中文网

canvas绘图引擎应使用object.defineproperties在构造函数中为originx、originy、scale等基准坐标定义不可写、不可配置、可枚举的数据属性，确保实例自有、运行安全且便于调试；动态坐标可用get访问器实现只读实时计算。

如何使用object.defineproperties为复杂的canvas绘图引擎注入不可覆盖的基准坐标

直接用 Object.defineProperties 为 Canvas 绘图引擎设置不可覆盖的基准坐标，核心是把关键坐标（如 originX、originY、scale）定义为**不可写、不可配置、可枚举**的数据属性，并绑定到引擎实例或原型上。这样既保证运行时安全，又不影响调试和遍历。

定义只读基准坐标的正确方式

不能简单赋值，也不能用 Object.defineProperty 单个设置——面对多个坐标属性，Object.defineProperties 更简洁、原子性强，且避免重复写 { writable: false, configurable: false }。

基准坐标应作为引擎实例自身的自有属性（非原型链继承），防止被子类意外覆盖
每个属性的 value 设为初始值，writable: false 阻止重新赋值，configurable: false 防止删除或重定义
enumerable: true 保持可被 for...in 或 Object.keys 发现，便于调试和序列化

典型注入示例：CanvasEngine 构造函数内初始化

在引擎构造阶段一次性注入所有基准坐标，确保从创建起就受保护：

class CanvasEngine {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');

    // 注入不可覆盖的基准坐标
    Object.defineProperties(this, {
      originX: { value: canvas.width / 2, writable: false, configurable: false, enumerable: true },
      originY: { value: canvas.height / 2, writable: false, configurable: false, enumerable: true },
      scale:   { value: 1.0,              writable: false, configurable: false, enumerable: true },
      flipY:   { value: true,             writable: false, configurable: false, enumerable: true }
    });
  }
}

之后执行 engine.originX = 100 不会报错（静默失败），但值不变；delete engine.originX 返回 false，属性依然存在。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

进阶：支持动态计算但禁止手动修改的坐标

若基准需依赖 canvas 尺寸变化（如响应式），可用 get 描述符替代 value，实现“只读但实时”：

Object.defineProperties(this, {
  clientCenterX: {
    get() { return this.canvas.clientWidth / 2; },
    enumerable: true,
    configurable: false // 仍不可删除或改描述符
  },
  clientCenterY: {
    get() { return this.canvas.clientHeight / 2; },
    enumerable: true,
    configurable: false
  }
});

注意：get 属性默认 writable: false 且不可设 value，天然只读；但要禁用 set，必须不提供 set 方法，否则会被视为可写访问器。