最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
當(dāng)前位置: 首頁 - 科技 - 知識(shí)百科 - 正文

JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí)

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:14:25
文檔

JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí)

JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí):先上需要用到的全部代碼片段(截?。? 代碼如下: MenuControl.prototype.boxDisplay = false;//是否顯示圖層選擇菜單 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointCon
推薦度:
導(dǎo)讀JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí):先上需要用到的全部代碼片段(截?。? 代碼如下: MenuControl.prototype.boxDisplay = false;//是否顯示圖層選擇菜單 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointCon

先上需要用到的全部代碼片段(截?。?
代碼如下:
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';
};
//圖層選擇開關(guān)
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 = '點(diǎn)擊啟用菜單';
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();
}
});
}
//點(diǎn)開關(guān)框體
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 = '點(diǎn)擊操控點(diǎn)菜單';
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 = '點(diǎn)';
controlUI.appendChild(controlText);


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

做的是谷歌的地圖應(yīng)用,其中有右方有兩個(gè)div按鈕,通過點(diǎn)擊打開左方的div子菜單

要求是

打開前判斷該子菜單是否已經(jīng)為打開狀態(tài),如是,則先關(guān)閉,后打開

在開關(guān)子菜單時(shí),按鈕會(huì)據(jù)相應(yīng)行為變色

這里就要求在各個(gè)按鈕的show()方法下操作另一按鈕的屬性和方法來達(dá)到開關(guān)的效果

開始時(shí)寫成這樣
代碼如下:
MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
controlUI.style.backgroundColor = '#DDDDDD';//直接調(diào)用屬性
};
function MenuControl(controlDiv, map) {
controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
}

結(jié)果無論開關(guān)哪一個(gè)菜單,都只有“點(diǎn)”按鈕變色

原因大概是controlUI莫名定義為全局變量了

后來我試圖這樣
代碼如下:
MenuControl.prototype.controlUI;
MenuControl.prototype.show = function(){
this.controlUI.style.backgroundColor = '#DDDDDD';//添加this關(guān)鍵字
};
function MenuControl(controlDiv, map) {
controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
}

結(jié)果還是失敗

后來我想通了,大概這樣就可以了
代碼如下:
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';
}

這樣至少有錯(cuò)誤信息了,不能給undefined添加style屬性什么的

于是我絕望了,準(zhǔn)備給所有屬性也添加上全局變量,這樣調(diào)用就方便許多

沒成想,被自己啟發(fā)了

于是就有了最開始那段代碼
代碼如下:
MenuControl.prototype.controlUI;//先建立此屬性,挖一個(gè)坑
MenuControl.prototype.show = function(){
this.controlUI.style.backgroundColor = '#DDDDDD';//使用this關(guān)鍵字調(diào)用,實(shí)際調(diào)用的是this.controlUI對(duì)象
};
function MenuControl(controlDiv, map) {
var controlUI = document.createElement('div');//建立局部變量,并正常賦值
this.controlUI = controlUI;//將此局部變量反賦給this對(duì)象的屬性,達(dá)到關(guān)聯(lián)引用
controlUI.style.backgroundColor = 'white';//正常調(diào)用引用對(duì)象進(jìn)行操控
}

這樣就將prototype添加的屬性和自身創(chuàng)建的局部變量關(guān)聯(lián)起來,使其可被外部其它對(duì)象所調(diào)用獲取

達(dá)到成功將同名屬性通過類對(duì)象進(jìn)行區(qū)分并全局調(diào)用

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí)

JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹_基礎(chǔ)知識(shí):先上需要用到的全部代碼片段(截取) 代碼如下: MenuControl.prototype.boxDisplay = false;//是否顯示圖層選擇菜單 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointCon
推薦度:
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top