JavaScript中prototype为对象添加属性的误区介绍
时间:2024-04-19 09:46:30
先上需要用到的全部代码片段(截取)
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添加的属性和自身创建的局部变量关联起来,使其可被外部其它对象所调用获取
达到成功将同名属性通过类对象进行区分并全局调用
标签:JavaScript,prototype,对象,添加属性


猜你喜欢
python 矩阵增加一行或一列的实例
2023-02-16 20:19:29

交互设计实用指南系列(9)—一次点击
2010-02-08 12:42:00

在XPath查询中指定轴(转自MSSQL手册)
2008-09-04 14:23:00
Keras搭建孪生神经网络Siamese network比较图片相似性
2023-01-27 04:16:28

mysql修改密码的三方法和忘记root密码的解决方法
2024-01-24 18:45:12
在RedHat系Linux上部署Python的Celery框架的教程
2023-07-30 15:49:37

树莓派安装OpenCV3完整过程的实现
2023-11-06 06:26:08

如何处理好网页色彩搭配
2007-08-10 13:22:00
asp最简单的生成验证码代码
2011-03-07 11:05:00
如何go语言比较两个对象是否深度相同
2024-02-18 21:21:58
MySQL多表查询与7种JOINS的实现举例
2024-01-12 23:34:32

Python使用random模块生成随机数操作实例详解
2022-06-28 21:50:27
详解MySQL插入和查询数据的相关命令及语句使用
2024-01-19 00:34:20

Python图像处理之图片拼接和堆叠案例教程
2022-04-08 13:36:04

mysql 开启慢查询 如何打开mysql的慢查询日志记录
2024-01-20 20:48:35
MySQL8.0/8.x忘记密码更改root密码的实战步骤(亲测有效!)
2024-01-27 07:04:26

js字符串操作方法实例分析
2024-04-25 13:11:56
Django利用elasticsearch(搜索引擎)实现搜索功能
2022-04-30 01:59:37

PHP实现根据数组某个键值大小进行排序的方法
2023-11-15 00:35:55
javascript 函数声明与函数表达式的区别介绍
2024-04-23 09:08:50