软件开发培训班 >> 编程开发 >> JavaScript


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添加的属性和自身创建的局部变量关联起来，使其可被外部其它对象所调用获取

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