JavaScript prototype原型添加属性与实例变量关联的正确方式

问题场景：地图控件的状态联动

在做谷歌地图应用时，通常需要在界面放置多个控制面板（例如右侧的图层选择菜单和点开关框体），点击相应的按钮可以打开对应的子菜单

// 假设这是初始化后的效果示意
// 1. 默认隐藏子菜单
// 2. 点击按钮展开对应面板

而在具体的交互逻辑中，往往存在互斥的需求：

// 需求描述
// 如果一个子菜单已经是打开状态，再次点击另一个菜单按钮时，
// 应先关闭当前打开的菜单，再打开新的菜单。

这就要求在各个控件对象的 show() 方法内部，能够操作另一控件对象的属性与方法。为了实现这一目标，我们需要正确地建立原型属性与实例属性之间的关联。

常见误区与失败尝试

第1步：尝试在原型上直接定义属性及行为

起初，开发者可能会尝试在原型链上定义属性和显示方法，但仅使用普通变量名，未区分实例作用域：

MenuControl.prototype.controlUI; // 声明但未初始化为具体DOM
MenuControl.prototype.show = function(){
    controlUI.style.backgroundColor = '#DDDDDD'; // 错误：controlUI是哪里来的？
};
function MenuControl(controlDiv, map) {
    controlUI = document.createElement('div'); // 这里意外定义了全局变量！
    controlUI.style.backgroundColor = 'white';
}

结果分析：无论开关哪一个菜单，都只有“点”按钮变色。原因是 controlUI 在没有 var、let 或 const 的情况下被赋值，变成了全局变量。由于两个构造函数执行后，后执行的覆盖或指向了同一个最后创建的 DOM 元素，导致无法区分。

第2步：尝试添加 this 关键字调用

察觉到了作用域问题后，试图通过 this 来修正方法内的调用：

MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
    this.controlUI.style.backgroundColor = '#DDDDDD'; // 尝试使用 this
};
function MenuControl(controlDiv, map) {
    var controlUI = document.createElement('div');
    // 注意：这里没有将 controlUI 绑定到 this!
    controlUI.style.backgroundColor = 'white';
}

结果分析：仍然失败。虽然方法里用了 this.controlUI，但在构造函数中，我们只是创建了局部变量 controlUI 并赋样式，却忘记将其赋值给 this.controlUI。因此 this.controlUI 始终是 undefined（或者原型上的空值）。

第3步：试图在原型上预先赋值（导致报错）

为了“挖坑”，有人尝试直接在原型上获取样式属性：

MenuControl.prototype.controlUI.style.backgroundColor = "white"; 
MenuControl.prototype.show = function(){
    this.controlUI.style.backgroundColor = '#DDDDDD';
};

结果分析：引发运行时错误（如 Cannot set property of undefined）。因为此时 prototype.controlUI 本身是 undefined，undefined 没有 style 属性。

正确解决方案：原型占位与实例绑定

要解决这个问题，必须明确区分原型层面的属性声明和实例层面的数据绑定。

第4步：正确的关联写法

关键在于两步走：首先在原型上声明属性名（作为索引），然后在构造函数的实例环境中，将本地变量挂载到实例上。

// 1. 在原型上声明 controlUI 属性（可以是 undefined，表示存在此键）
MenuControl.prototype.controlUI;

// 2. 定义 show 方法，内部通过 this 引用实例特有的 controlUI
MenuControl.prototype.show = function(){
    this.controlUI.style.backgroundColor = '#DDDDDD';
};

// 3. 构造函数中处理真实的 DOM 元素
function MenuControl(controlDiv, map) {
    // A. 创建局部变量
    var controlUI = document.createElement('div');
    
    // B. 【关键步骤】将此局部变量赋值给当前实例的 controlUI 属性
    // 这样 menuControl1.controlUI 和 menuControl2.controlUI 指向不同的 div
    this.controlUI = controlUI;
    
    // C. 正常设置样式
    controlUI.style.backgroundColor = 'white';
}

// PointControl 同理...
PointControl.prototype.controlUI;
PointControl.prototype.show = function() {
    if(menuControl.boxDisplay){
        menuControl.hide(); // 互相调用不同实例
    }
    pointBoxDiv.style.display = "";
    this.controlUI.style.backgroundColor = '#DDDDDD';
};

function PointControl(controlDiv, map) {
    var controlUI = document.createElement('div');
    this.controlUI = controlUI; // 同样需要绑定
    controlUI.innerHTML = '<strong>点</strong>';
}

原理解析

这种写法之所以有效，是因为：

• Prototype 中的 controlUI 只是一个占位符，表明该类拥有这个属性，并且所有实例都可以访问到这个方法的定义。
• this.controlUI 在每次 new 一个对象时，都会在该对象实例上创建一个独立的属性。
• 通过 this.controlUI = controlUI，我们将新创建的 DOM 节点挂载到了当前的实例对象上。
• 这样，外部或其他类的实例（如 menuControl）就可以通过 pointControl.controlUI 准确地拿到属于 pointControl 的那个特定 div 元素，从而实现了跨对象操作且互不干扰。

以上就是关于 JavaScript prototype 对象属性添加与实例绑定的详细内容，更多关于 JavaScript this 关键字用法的资料请关注本站其它相关文章！