В то время как вы уже приняли ответ, что нужно отметить, что это вообще плохая идея, чтобы определить, что-то в глобальном пространстве (независимо от того, является ли это переменной или функция).
Проблема с глобальным охватом заключается в том, что в браузерах уже есть много вещей. В текущих браузерах 500+ переменные, определения и функции определены там, и существует высокий риск конфликтов имен. Если существует конфликт имен с вашим именем переменной и уже определенным, результаты могут быть неожиданными и сложными для отладки (распространенными ошибками являются top
, , parent
, name
, self
, title
). Проблема в том, что они либо влияют на поведение вашего браузера, либо что они читаются только, и вы не сможете ничего хранить внутри них.
Если вы измените свой пример, чтобы использовать имя top
вместо a
и вы определили его в глобальном масштабе ваш мог бы, вероятно, выглядеть следующим образом:
var top;
function var1(data) {
top = data;
}
function var2() {
var b = top;
alert(b);
}
var1(1000);
var2();
Теперь вы бы ожидать, что alter(b)
является 1000
, но это (в зависимости от браузера) [object Window]
, потому что top
только для чтения и будет по-прежнему ссылаться на окно top
.
Если вы думаете, используя имя location
, то это намного хуже, и ваша страница будет перенаправлена на новое место.
Та же проблема для функций, если вы назвать одну из вашей функции с именем уже используется браузером в глобальном масштабе (независимо от того, если это переменная или функция) вы получите ошибка как:
Uncaught TypeError: function '....' has already been declared
Таким образом, вы должны проверить каждый браузер в каждой версии вы хотите поддержать, если эти переменные будут защищены. И даже тогда вы не знаете, что вводится для будущих версий. Поэтому вы всегда должны стараться избегать писать что-то в глобальном масштабе как можно больше.
решения, которое позволило бы избежать, чтобы написать что-то в глобальном пространстве будет выглядеть следующим образом (с помощью jQuery
для атташе событий, потому что вы упоминаете в тегах)
<script type="text/javascript">
/* define an anonymous function and directly call it
that param '$' is used to alias jQuery to a short name, 'undefined' is used
to be sure that it is really undefined
('undefined' is not a protected keyword and could have been overwritten)
*/
(function($, undefined) {
var a; /* limits the visibility of 'a' to the scope of the
anonymous function (not visible in the global scope) */
/* defines the function 'var1' in the scope of the anonymous
function (not visible in the global scope) */
function var1(data)
{
a = data;
}
/* defines the function 'var2' in the scope of the anonymous
function (not visible in the global scope) */
function var2()
{
var b = a;
alert(b);
}
/*
because the functions 'var1' and 'var2' are not
visible in the global scope you need define the 'click'
handlers from within this scope.
*/
/*
Register the click events using event delegation.
So for every element with the attribute 'data-action="call-var1"' var1(data)
is called and the same for 'data-action="call-var2"'
*/
$(document).on('click', '[data-action="call-var1"]', function() {
var1(data); // I don't know what 'data' is in your example
});
$(document).on('click', '[data-action="call-var2"]', function() {
var2();
});
})(jQuery); /* we pass jQuery as parameter when calling the anonymous
function for the case '$' is not not jQuery */
</script>
</head>
<body>
<a href="#x" class="overlay" data-action="call-var1"></a>
<input type="button" value="Send" data-action="call-var2" />
</body>
благодаря своей работе – user3048785