草庐IT

JavaScript 作用域冲突

coder 2023-08-09 原文

我试图理解 JavaScript 中的作用域。如果我在函数外声明一个变量，它就是 GLOBAL。因此，我测试了以下代码以了解执行顺序。在下面的代码中，我希望“demo1”采用全局值“Volvo”，因为我在函数内部声明具有相同名称的局部变量之前呈现该文本。但令我惊讶的是，我看到该值是“未定义的”。

<!DOCTYPE html>
<html>

<body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        var carName = "Volvo";
        myFunction();
        document.getElementById("demo").innerHTML = carName;

        function myFunction() {
            document.getElementById("demo1").innerHTML = carName;
            var carName = "Volvo1";
            document.getElementById("demo2").innerHTML = carName;
        }
    </script>
</body>

</html>

结果:

沃尔沃

未定义

沃尔沃1

我进一步修改以查看如果在函数内声明另一个全局变量会发生什么，如下所示:

<!DOCTYPE html>
<html>

<body>

    <p id="demo"></p>
    <p id="demo1"></p>
    <p id="demo2"></p>

    <script>
        var carName = "Volvo";
        myFunction();
        document.getElementById("demo").innerHTML = carName;

        function myFunction() {
            document.getElementById("demo1").innerHTML = carName;

            //declaring another global variable
            carName = "Volvo1";
            document.getElementById("demo2").innerHTML = carName;
        }
    </script>
</body>

</html>

结果:

沃尔沃1

沃尔沃

沃尔沃1

这次“demo1”采用在函数外部声明的全局变量，即“Volvo”。

有人能给我解释一下吗？

最佳答案

在 JavaScript 中，这称为 Variable hoisting ，定义为:

One of the trickier aspects of JavaScript for new JavaScript developers is the fact that variables and functions are "hoisted."

Rather than being available after their declaration, they might actually be available beforehand.

这意味着您的 carName 变量的第二个 var 声明在函数内排除/消除第一个。

因为如果您在代码的全局范围内(代码的开头)使用var关键字声明了一个变量并且然后在另一个作用域(函数，...)中用 var 关键字重新声明同一个变量 这个第二个声明将排除第一个和这个变量值 变成 undefined。

编辑:

可以看到in the Variable Hoisting section here变量提升的影响以及变量声明和变量赋值的区别:

All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.

It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).

关于JavaScript 作用域冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30647221/

JavaScript作用域strongcode34htmlscopevariable-declarationhoisting

有关JavaScript 作用域冲突的更多相关文章

  1. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  2. git使用常见问题（提交代码，合并冲突） - 2

    文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g

  3. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用？ - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么？describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用？ - 2

    这段代码似乎创建了一个范围从a到z的数组，但我不明白*的作用。有人可以解释一下吗？[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

  6. ruby - 为什么这个 eval 在 Ruby 中不起作用 - 2

    你能解释一下吗？我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'a=2'第二个来源给了我这个表达式来评估:'a+3'这个有效:a=2eval'a+3'这也有效:eval'a=2;a+3'但我真正需要的是这个，但它不起作用:eval'a=2'eval'a+3'我想了解其中的区别，以及如何使最后一个选项起作用。感谢您的帮助。 最佳答案 您可以创建一个Binding，并将相同的绑定(bind)与每个eval相关联调用:1.9.3p194:008>b=binding=>#1.9.3p194:009>eva

  7. ruby-on-rails - Spring 不起作用。 [未初始化常量 Spring::SID::DL] - 2

    我无法运行Spring。这是错误日志。myid-no-MacBook-Pro:myid$spring/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/lib/spring/sid.rb:17:in`fiddle_func':uninitializedconstantSpring::SID::DL(NameError)from/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/li

  8. ruby - mixin方法名冲突时如何选择调用方法？ - 2

    当你在类中包含方法名冲突的模块时，它会使用类定义的方法。有没有办法选择我想运行的？moduleBdefself.hello"helloB"endendclassAincludeBdefself.hello"helloA"endendA.hello#=>thisprints"helloA",whatifIwant"helloB"? 最佳答案 Ben，当你在Ruby中调用一个方法(比如hello)时，会发生以下情况:如果接收者的特征类有一个名为hello的方法，它将被调用。如果不是:如果接收者的类有一个名为hello的实例方法，它将被调

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby-on-rails - Simple_form 必填字段不起作用 - Ruby on Rails - 2

    我在RoR应用程序中有一个提交表单，是使用simple_form构建的。当字段为空白时，应用程序仍会继续下一步，而不会提示错误或警告。默认情况下，这些字段应该是required:true；但即使手动编写也行不通。该应用有3个步骤:NewPost(新View)->Preview(创建View)->Post。我的Controller和View的摘录会更清楚:defnew@post=Post.newenddefcreate@post=Post.new(params.require(:post).permit(:title,:category_id))ifparams[:previewButt

随机推荐