Prototype in JavaScript to add attributes to an object introduction _ Basics

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

Copy Code code as follows:

MenuControl.prototype.boxDisplay = false;//Whether the layer selection menu is displayed
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> layer selection </strong> ';
Controlui.appendchild (Controltext);


Google.maps.event.addDomListener (Controlui, ' click ', function () {
if (Menucontrol.boxdisplay) {
Menucontrol.hide ();
}else{
Menucontrol.show ();
}
});
}
Point Switch frame body
PointControl.prototype.boxDisplay = false;//Whether the layer selection menu is displayed
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 on the control Point 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 ();
}
});
}

Do is Google's map application, which has two div buttons to the right, by clicking Open the Div submenu to the left

To be

Before opening to determine if the submenu is already open, if so, close first, and then open

When you switch a submenu, the button will change color according to the corresponding behavior

This requires that you operate the properties and methods of another button under the Show () method of each button to achieve the effect of the switch

At first it was written like this

Copy Code code as follows:

MenuControl.prototype.controlUI;
MenuControl.prototype.show = function () {
ControlUI.style.backgroundColor = ' #DDDDDD ';//Direct Call Property
};
function Menucontrol (controldiv, map) {
Controlui = document.createelement (' div ');
ControlUI.style.backgroundColor = ' white ';
}

Results no matter which menu the switch, only the "dot" button color

The reason is probably that controlui is defined as a global variable.

And then I tried this.

Copy Code code as follows:

MenuControl.prototype.controlUI;
MenuControl.prototype.show = function () {
This.controlUI.style.backgroundColor = ' #DDDDDD ';//Add this keyword
};
function Menucontrol (controldiv, map) {
Controlui = document.createelement (' div ');
ControlUI.style.backgroundColor = ' white ';
}

The result is still a failure

And then I figured it out, I guess that's it.

Copy Code code as follows:

MenuControl.prototype.controlUI.style.backgroundColor = "white"; I'll give you a value, see where you run.
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 there's an error message, you can't add a style attribute to undefined or anything

So I was desperate, ready to add a global variable to all the attributes, which makes it much easier to call

No Chengxiang, inspired by myself.

So there's the first piece of code.

Copy Code code as follows:

menucontrol.prototype.controlui;//set this property first, dig a hole
MenuControl.prototype.show = function () {
This.controlUI.style.backgroundColor = ' #DDDDDD ';//call using this keyword, the actual call is This.controlui object
};
function Menucontrol (controldiv, map) {
var controlui = document.createelement (' div ');//create local variable, and assign value normally
This.controlui = controlui;//This local variable to the property of the This object to reach the associated reference
ControlUI.style.backgroundColor = ' white ';//normal invoke reference object for manipulation
}

This associates the properties added by prototype with the local variables created by itself so that they can be invoked by other objects outside the

Success to differentiate and globally invoke a property of the same name through a class object