JavaScript中prototype为对象添加属性的误区介绍

先上需要用到的全部代码片段（截取）

MenuControl.prototype.boxDisplay = false;//是否显示图层选择菜单 
MenuControl.prototype.controlUI; 
MenuControl.prototype.show = function(){ 
if(pointControl.boxDisplay){ 
pointControl.hide(); 
} 
menuBoxDiv.style.display = ""; 
this.boxDisplay = true; 
this.controlUI.style.backgroundColor = '#DDDDDD'; 
}; 
MenuControl.prototype.hide = function(){ 
menuBoxDiv.style.display = "none"; 
this.boxDisplay = false; 
this.controlUI.style.backgroundColor = 'white'; 
}; 
//图层选择开关 
function MenuControl(controlDiv, map) { 
controlDiv.style.padding = '5px'; 
var controlUI = document.createElement('div'); 
this.controlUI = controlUI; 
controlUI.style.backgroundColor = 'white'; 
controlUI.style.height = '18px'; 
controlUI.style.borderStyle = 'solid'; 
controlUI.style.borderWidth = '1px'; 
controlUI.style.cursor = 'pointer'; 
controlUI.style.textAlign = 'center'; 
controlUI.title = '点击启用菜单'; 
controlDiv.appendChild(controlUI); 
var controlText = document.createElement('div'); 
controlText.style.fontFamily = 'Arial,sans-serif'; 
controlText.style.fontSize = '12px'; 
controlText.style.paddingLeft = '4px'; 
controlText.style.paddingRight = '4px'; 
controlText.innerHTML = '<strong>图层选择</strong>'; 
controlUI.appendChild(controlText); 

google.maps.event.addDomListener(controlUI, 'click', function() { 
if(menuControl.boxDisplay){ 
menuControl.hide(); 
}else{ 
menuControl.show(); 
} 
}); 
} 
//点开关框体 
PointControl.prototype.boxDisplay = false;//是否显示图层选择菜单 
PointControl.prototype.controlUI; 
PointControl.prototype.show = function(){ 
if(menuControl.boxDisplay){ 
menuControl.hide(); 
} 
pointBoxDiv.style.display = ""; 
this.boxDisplay = true; 
this.controlUI.style.backgroundColor = '#DDDDDD'; 
}; 
PointControl.prototype.hide = function(){ 
pointBoxDiv.style.display = "none"; 
this.boxDisplay = false; 
this.controlUI.style.backgroundColor = 'white'; 
}; 
function PointControl(controlDiv, map) { 
controlDiv.style.padding = '5px'; 

var controlUI = document.createElement('div'); 
this.controlUI = controlUI; 
controlUI.style.backgroundColor = 'white'; 
controlUI.style.height = '18px'; 
controlUI.style.borderStyle = 'solid'; 
controlUI.style.borderWidth = '1px'; 
controlUI.style.cursor = 'pointer'; 
controlUI.style.textAlign = 'center'; 
controlUI.title = '点击操控点菜单'; 
controlDiv.appendChild(controlUI); 

var controlText = document.createElement('div'); 
controlText.style.fontFamily = 'Arial,sans-serif'; 
controlText.style.fontSize = '12px'; 
controlText.style.paddingLeft = '4px'; 
controlText.style.paddingRight = '4px'; 
controlText.innerHTML = '<strong>点</strong>'; 
controlUI.appendChild(controlText); 

google.maps.event.addDomListener(controlUI, 'click', function() { 
if(pointControl.boxDisplay){ 
pointControl.hide(); 
}else{ 
pointControl.show(); 
} 
}); 
}

做的是谷歌的地图应用，其中有右方有两个div按钮，通过点击打开左方的div子菜单
 
要求是
 
打开前判断该子菜单是否已经为打开状态，如是，则先关闭，后打开

在开关子菜单时，按钮会据相应行为变色

这里就要求在各个按钮的show()方法下操作另一按钮的属性和方法来达到开关的效果

开始时写成这样

MenuControl.prototype.controlUI; 
MenuControl.prototype.show = function(){ 
controlUI.style.backgroundColor = '#DDDDDD';//直接调用属性 
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'white'; 
}

结果无论开关哪一个菜单，都只有“点”按钮变色

原因大概是controlUI莫名定义为全局变量了

后来我试图这样

MenuControl.prototype.controlUI; 
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD';//添加this关键字 
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'white'; 
}

结果还是失败

后来我想通了，大概这样就可以了

MenuControl.prototype.controlUI.style.backgroundColor = "white";//一上来就给你赋值，看你往哪儿跑 
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD'; 
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
this.controlUI.style.backgroundColor = 'white'; 
}

这样至少有错误信息了，不能给undefined添加style属性什么的

于是我绝望了，准备给所有属性也添加上全局变量，这样调用就方便许多

没成想，被自己启发了

于是就有了最开始那段代码

MenuControl.prototype.controlUI;//先建立此属性，挖一个坑 
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD';//使用this关键字调用，实际调用的是this.controlUI对象 
}; 
function MenuControl(controlDiv, map) { 
var controlUI = document.createElement('div');//建立局部变量，并正常赋值 
this.controlUI = controlUI;//将此局部变量反赋给this对象的属性，达到关联引用 
controlUI.style.backgroundColor = 'white';//正常调用引用对象进行操控 
}

这样就将prototype添加的属性和自身创建的局部变量关联起来，使其可被外部其它对象所调用获取

达到成功将同名属性通过类对象进行区分并全局调用