為什么外部JS文件中的默認屬性沒有被對象中用戶定義的屬性覆蓋？
[英]Why default properties in external JS file were not overwritten with user defined properties in object?
問題描述
我有一個HTML和JS文件。 如果用戶想覆蓋外部JS文件中聲明的默認設置，他們要做的就是將以下內容作為內聯腳本包括在內：
<script>
userControls = {
transition : 'fade',
nextText : 'Next'
}
</script>
我面臨的問題是我的外部腳本未使用用戶設置，而是將所有內容都設置為默認設置。
var defControls = { transition : 'default', nextText : 'Next »' }; var userControls = {}; // CHECKS FOR userControls if (Object.getOwnPropertyNames(userControls).length > 0) { var controls = Object.assign({}, defControls, userControls); } else { controls = defControls; } console.log(userControls); console.log(controls); console.log(defControls);
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="styles.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS --> <script type="text/javascript" src="script.js"></script> </head> <body> <!-- SENDS THE NEW PARAMETERS TO script.js --> <script> userControls = { transition : 'fade', nextText : 'Next' } </script> </body> </html>
2 個解決方案
解決方案1
0 2018-09-07 22:22:41
這是因為您在加載js文件后插入了用戶選擇。 首先通過以下控制
if (Object.getOwnPropertyNames(userControls).length > 0)
因此，這將始終為false 。 這就是為什么您不斷獲得默認值的原因。 您應該先插入用戶選擇腳本，或者在js文件中插入一些異步功能。
解決方案2
0 已采納 2018-09-08 21:09:07
您的代碼有四個半錯誤：
- 您必須使用以下代碼編寫內聯腳本：
var userControls = {transition: 'fade', nextText: 'Next'};在外部JS文件之前。 並且不要忘記;最后（這是半個錯誤）。 - 行
var userControls = {};外部JS文件 中的腳本已覆蓋嵌入式腳本中userControls中的設置。 我想您想改寫var controls = {};。 -
var controls = {};您必須在if...else語句之前寫。 - 您編寫
console.log(userControls);而不是console.log(JSON.stringify(userControls));您的代碼只能從IE在開發人員控制台中寫入[object Object]。 但是在Chrome中，它是不錯的選擇。
具有更正代碼的解決方案
<!DOCTYPE html> <html><head> <!-- <link type="text/css" rel="stylesheet" href="styles.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- SENDS THE NEW PARAMETERS TO script.js --> <script type="text/javascript"> var userControls = { transition : 'fade', nextText : 'Next' }; </script> <!-- EXTERNAL SCRIPT THAT ACCEPTS USER'S NEW SETTINGS src="script.js" --> <script type="text/javascript"> var defControls = { transition : 'default', nextText : 'Next »' }; //THIS WAS THE MISTAKE: var userControls = {}; this line has overwrited the settings var controls = {}; // CHECKS FOR userControls if(Object.getOwnPropertyNames(userControls).length > 0) { controls = Object.assign({}, defControls, userControls); } else { controls = defControls; } console.log('userControls =\\n' + JSON.stringify(userControls, null, '\\t')); console.log('controls =\\n' + JSON.stringify(controls, null, '\\t')); console.log('defControls =\\n' + JSON.stringify(defControls, null, '\\t')); </script> </head> <body></body> </html>
為什么我的JavaScript對象屬性被其他實例覆蓋？
[英]Why are my JavaScript object properties being overwritten by other instances?
為什么我可以將命名屬性添加到數組中，就像它是一個對象一樣？
[英]Why can I add named properties to an array as if it were an object?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.