JavaScript_기본 지식에서 객체에 속성을 추가하는 것에 대한 오해 소개

먼저 사용해야 할 코드 스니펫을 모두 업로드하세요(차단)

코드 복사 코드는 다음과 같습니다

MenuControl.prototype.boxDisplay = false;//레이어 선택 메뉴 표시 여부
MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
if( pointControl.boxDisplay){
pointControl.hide();
}
menuBoxDiv.style.display = "";
this.boxDisplay =
this.controlUI.style.BackgroundColor = '#DDDDDD';
};
MenuControl.prototype.hide = function(){
menuBoxDiv.style.display = "none";
this.boxDisplay = false; controlUI.style.BackgroundColor = 'white'};
//레이어 선택 스위치
function MenuControl(controlDiv, map) {
controlDiv.style.padding = '5px'; var controlUI = document.createElement('div');
this.controlUI = controlUI;
controlUI.style.groundColor = 'white';
controlUI.style.height =
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = '포인터'
controlUI.style.textAlign
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 = '레이어 선택';
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.controlUI .style.groundColor = '#DDDDDD';
};
PointControl.prototype.hide = function(){
pointBoxDiv.style.display = "none"; .boxDisplay = false;
this.controlUI.style.backColor = 'white';
function PointControl(controlDiv, map) {
controlDiv.style.padding


var controlUI = document.createElement('div');
this.controlUI = controlUI;
controlUI.style.BackgroundColor =
controlUI.style.height = '18px';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor =
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'; .style.paddingRight = ' 4px';
controlText.innerHTML = '점'
controlUI.appendChild(controlText)


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


은 오른쪽에 두 개의 div 버튼이 있습니다.


요건은


하위 메뉴가 이미 열려 있는지 확인하고, 그렇다면 먼저 닫은 후 다시 열어보세요.

열고 닫을 때. 하위 메뉴에 따라 버튼이 눌러집니다.
여기서 스위치 효과를 얻으려면 각 버튼의 show() 메소드 아래에 있는 다른 버튼의 속성과 메소드를 조작해야 합니다

처음에 이렇게 작성했습니다



코드 복사


코드는 다음과 같습니다.

MenuControl.prototype .controlUI; MenuControl.prototype.show = function(){ controlUI.style.BackgroundColor = '#DDDDDD';//속성 직접 호출 } function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); controlUI.style.BackgroundColor = '흰색'

}


결과적으로 어떤 메뉴를 열거나 닫아도 "클릭" 버튼만 색상이 바뀌게 됩니다

아마도 controlUI가 설명할 수 없을 정도로 전역 변수로 정의되어 있기 때문일 것입니다

나중에 이렇게 해봤습니다

코드 복사 코드는 다음과 같습니다.

MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
this.controlUI.style.groundColor = '#DDDDDD';//이 키워드 추가
}
function MenuControl(controlDiv, map) {
controlUI = document.createElement('div' ; >

코드 복사


코드는 다음과 같습니다.

MenuControl.prototype.controlUI.style.BackgroundColor = "white"; //값이 나타나면 즉시 할당하고 어디로 가는지 확인하세요. MenuControl.prototype.show = function(){ this.controlUI.style. backgroundColor = '#DDDDDD' }; function MenuControl(controlDiv, map) { controlUI = document.createElement('div'); style.BackgroundColor = 'white';

}

적어도 오류 메시지가 있습니다.

그래서 필사적으로요. 모든 속성에 전역 변수를 추가하면 호출이 훨씬 더 편리해질 것입니다.

작동하지 않는 것 같았습니다.

그래서 생각해냈습니다. 첫 번째 코드

코드 복사


코드는 다음과 같습니다.

MenuControl.prototype. controlUI;//먼저 이 속성을 설정하고 구멍을 파세요 MenuControl.prototype.show = function(){ this.controlUI.style.BackgroundColor = ' #DDDDDD';//이 키워드를 사용하여 호출하세요. 실제 호출은 this.controlUI object }; function MenuControl(controlDiv, map) { var controlUI = document.createElement('div') ;//지역 변수를 생성하고 ​​일반적으로 값을 할당합니다. 🎜>this.controlUI = controlUI;//이 지역 변수를 이 개체의 속성에 다시 할당하여 관련 참조를 얻습니다controlUI.style.BackgroundColor = 'white';/ / 일반적으로 조작을 위해 참조 개체를 호출합니다

}

이런 식으로 프로토타입에서 추가한 속성은 자체적으로 생성된 지역 변수와 연관되므로 다른 외부 개체에서 호출하고 얻을 수 있습니다

성공 , 클래스 객체를 통해 동일한 이름을 가진 속성을 구별하고 전역적으로 호출합니다.