Introduction to prototype's mistake of adding properties to objects in JavaScript

All the code snippets that need to be used first (interception)

 
MenuControl.prototype.boxDisplay = false;//Whether to display the layer selection menu
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'; 
}; 
//Layer selector switch
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 = ' Click enable menu '; 
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> The layer selection </strong>'; 
controlUI.appendChild(controlText); 


google.maps.event.addDomListener(controlUI, 'click', function() { 
if(menuControl.boxDisplay){ 
menuControl.hide(); 
}else{ 
menuControl.show(); 
} 
}); 
} 
//Click on the switch box body
PointControl.prototype.boxDisplay = false;//Whether to display the layer selection menu
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 = ' Click the control menu '; 
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> point </strong>'; 
controlUI.appendChild(controlText); 


google.maps.event.addDomListener(controlUI, 'click', function() { 
if(pointControl.boxDisplay){ 
pointControl.hide(); 
}else{ 
pointControl.show(); 
} 
}); 
} 

It is a map application of Google, where there are two div buttons on the right, by clicking to open the div submenu on the left
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/20131015162943.png? 2013915163028 ">  
The requirement is
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201310/201310151629435.png? 2013915163130 ">  
Determine whether the submenu is already open before opening, if so, close first, then open

In the switch submenu, the button will change color according to the corresponding behavior

This requires that the properties and methods of the other button be manipulated under the show() method of each button to achieve the effect of the switch

Let me write it this way

 
MenuControl.prototype.controlUI; 
MenuControl.prototype.show = function(){ 
controlUI.style.backgroundColor = '#DDDDDD';//Direct call attribute
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'white'; 
} 

As a result, no matter which menu is switched on or off, only the "click" button changes color

The reason is that controlUI is somehow defined as a global variable

Then I tried

 
MenuControl.prototype.controlUI; 
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD';//Add the this keyword
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
controlUI.style.backgroundColor = 'white'; 
} 

It still fails

Then I figured it out, and that's about it

 
MenuControl.prototype.controlUI.style.backgroundColor = "white";//I'm going to assign you a value right from the start, where are you going
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD'; 
}; 
function MenuControl(controlDiv, map) { 
controlUI = document.createElement('div'); 
this.controlUI.style.backgroundColor = 'white'; 
} 

So at least you have an error message, you can't add a style property to undefined or something like that

So, in desperation, I'm going to add global variables to all the properties as well, making it easier to call them

Not to think, inspired by their own

So you have that first piece of code

 
MenuControl.prototype.controlUI;//Create this property and dig a hole
MenuControl.prototype.show = function(){ 
this.controlUI.style.backgroundColor = '#DDDDDD';//Call with this keyword, and the object this.controlui is actually called
}; 
function MenuControl(controlDiv, map) { 
var controlUI = document.createElement('div');//Creates a local variable and assigns it a normal value
this.controlUI = controlUI;//Reverse-assign this local variable to the property of this object for an associated reference
controlUI.style.backgroundColor = 'white';//Normal invocation of the reference object for manipulation
} 

This associates the properties that prototype adds with the local variables that it creates so that they can be called by other external objects

The property of the same name is distinguished by a class object and called globally