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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
js转义字符介绍
Nov 05 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
javscript 数组扁平化的实现
Feb 03 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获取post中的json数据的实现方法
2011/06/08 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
初步探究Python程序的执行原理
2015/04/11 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python join方法使用详解
2019/07/30 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
Java基础类库面试题
2013/09/04 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
一年级班主任感言
2014/03/08 职场文书
法人代表委托书
2014/04/04 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python