管理资源吧首页>>>教程>>>编程>>>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子菜单

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

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

教程首页 更多教程