脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → prototype为对象添加属性

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

 更新时间：2013年10月15日 16:32:02   投稿：whsnow  
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添加的属性和自身创建的局部变量关联起来，使其可被外部其它对象所调用获取

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

相关文章

  • 浅析四种常见的Javascript声明循环变量的书写方式

    浅析四种常见的Javascript声明循环变量的书写方式

    这篇文章主要介绍了四种常见的声明循环变量的书写方式,对其进行简单的分析和比较，需要的朋友可以参考下
    2015-10-10
  • 浅谈javascript中的加减时间

    浅谈javascript中的加减时间

    下面小编就为大家带来一篇浅谈javascript中的加减时间。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript入门教程(9) Document文档对象

    JavaScript入门教程(9) Document文档对象

    Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
    2009-01-01
  • JavaScript中的6种运算符总结

    JavaScript中的6种运算符总结

    这篇文章主要介绍了JavaScript中的6种运算符总结,本文总结了算术运算符、赋值运算符、比较运算符、三元运算符、逻辑运算符、字符串连接运算符等,需要的朋友可以参考下
    2014-10-10
  • JavaScript之编码规范 推荐

    JavaScript之编码规范 推荐

    JavaScript是一种语法灵活，简单易懂的脚本语言。正因为灵活，因此很多人在编写代码时，显得很随意，这就导致后期的修改、扩展和维护变得异常困难。遵循统一的编码规范，不仅对C++和Java这种编译型语言很重要，对JavaScript脚本语言也同样如此
    2012-05-05
  • 学习JavaScript的最佳方法分享

    学习JavaScript的最佳方法分享

    你为学习JavaScript 制定的蓝图、路线、行动计划!你不必担心找不到最好的资源，先整理些不好的资源，再确定下一步该学什么。遵循它，一步一步来
    2011-10-10
  • JavaScript 事件对象介绍

    JavaScript 事件对象介绍

    这篇文章主要介绍了JavaScript 事件对象介绍,需要的朋友可以参考下
    2015-04-04
  • JavaScript操作Cookie详解

    JavaScript操作Cookie详解

    这篇文章主要介绍了JavaScript操作Cookie详解,本文讲解了什么是Cookie、Cookie基础知识、Cookie常见问题、cookie 有两种清除方式、Cookie基础用法、Cookie高级用法等内容,需要的朋友可以参考下
    2015-02-02
  • 每日十条JavaScript经验技巧(二)

    每日十条JavaScript经验技巧(二)

    本文是每日十条JavaScript经验技巧系列文章的第二篇，同样给大家汇总介绍10条个人在项目中的一些经验，分享给大家，希望大家能够喜欢
    2016-06-06
  • js setTimeout 常见问题小结

    js setTimeout 常见问题小结

    主要包括this指向问题、向setTimeout传入参数等相关问题，下面与大家分享下以上问题的解决方法，感兴趣的朋友可以参考下
    2013-08-08

最新评论