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


Posted in Javascript onOctober 15, 2013

先上需要用到的全部代码片段(截取)

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子菜单
JavaScript中prototype为对象添加属性的误区介绍 
要求是
JavaScript中prototype为对象添加属性的误区介绍 
打开前判断该子菜单是否已经为打开状态,如是,则先关闭,后打开

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

这里就要求在各个按钮的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 相关文章推荐
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
JS前端加密算法示例
Dec 22 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 #Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 #Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 #Javascript
通过js获取div的background-image属性
Oct 15 #Javascript
js日期相关函数总结分享
Oct 15 #Javascript
JavaScript的继承的封装介绍
Oct 15 #Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 #Javascript
You might like
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue-父子组件和ref实例详解
2019/11/10 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
django使用html模板减少代码代码解析
2017/12/12 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python如何实现FTP功能
2020/05/28 Python
pandas按条件筛选数据的实现
2021/02/20 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
求职意向书范文
2014/04/01 职场文书
责任书范本
2014/08/25 职场文书
2014年人大工作总结
2014/12/10 职场文书
暂住证明怎么写
2015/06/19 职场文书
党员反邪教心得体会
2016/01/15 职场文书
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技