var foo = '123'; function print() { var foo = '456'; this.foo = '789'; console.log(foo); } print();

时间: 2024-05-30 17:12:30 浏览: 102

JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍

5星 · 资源好评率100%

在JavaScript中，函数的定义可以通过多种方式进行，其中最常见的两种是使用`function`关键字直接声明，以及使用变量赋值的方式定义一个匿名函数或具名函数表达式。这两种方式在JavaScript引擎的处理过程中有所区别，主要体现在变量提升（hoisting）行为上。首先来看第一种方式，即使用`function`关键字声明函数，例如： ```javascript function foo() { // ... } ``` 当我们使用这种方式定义函数时，JavaScript引擎会把函数声明提升到当前作用域的顶部。这意味着无论函数的实际声明代码出现在哪里，其声明都会被视为在作用域顶部。因此，即使在函数声明之前调用该函数，代码也能够正常运行。这种行为有时被称为“函数声明提升”（Function Declaration Hoisting）。现在，让我们转到第二种方式，即使用变量赋值定义函数，例如： ```javascript var foo = function() { // ... }; ``` 这种方式实际上定义了一个函数表达式，它可以是具名的也可以是匿名的。与函数声明不同，变量赋值定义的函数不会被提升。变量本身（如上例中的`foo`）会被提升，但是函数的赋值操作不会被提升。因此，变量在声明之前是未定义的，如果在函数赋值之前尝试调用该函数，将会得到一个`TypeError`。这里存在一个重要的区别点：函数声明的提升只提升函数声明本身，而变量赋值的提升则只提升变量声明。在JavaScript中，函数声明的优先级高于变量声明，所以在同一作用域中，如果以这两种方式声明了相同名称的函数，函数声明会覆盖变量声明。这就是“函数声明覆盖”（Function Declaration Overriding）现象。举个例子说明： ```javascript console.log(foo()); // 这里会输出 'there' 而不是 'here' function foo() { return 'here'; } function foo() { return 'there'; } // 上述代码在引擎中的处理类似于： function foo() { return 'there'; // 第二个函数声明覆盖了第一个 } console.log(foo()); ``` 当我们使用匿名函数表达式时，情况稍有不同： ```javascript console.log(foo()); // TypeError: foo is not a function var foo; foo = function() { return 'here'; }; foo = function() { return 'there'; }; // 上述代码在引擎中的处理类似于： var foo; function foo() { return 'here'; // 但这行代码不会执行，因为赋值的提升只会提升变量声明 } foo = function() { return 'there'; }; console.log(foo()); ``` 在这个例子中，第一个函数表达式在赋值之前是未定义的，所以尽管它被放在了变量声明之后，但仍然无法在声明之前被调用。因此，调用`foo()`时会抛出一个错误。在编程实践中，推荐使用函数声明或具名函数表达式，这样可以避免提升所带来的混淆。具名函数表达式可以在调试时给出有意义的函数名，这有助于理解堆栈跟踪和错误信息。理解这两种函数定义方式的差异对于编写可预测、健壮的JavaScript代码至关重要。这不仅涉及到提升的机制，还关系到函数作用域、闭包以及函数覆盖等其他重要概念。学习和掌握这些基础知识点有助于避免常见的错误，并能够编写出更加安全、高效的JavaScript代码。

该段代码的输出结果是什么？输出结果为"456"。在函数内部先通过 var 关键字声明了一个名为 foo 的局部变量，然后将其赋值为"456"。接着将函数的 this.foo 属性值设为"789"。最后打印出局部变量 foo 的值"456"。由于局部变量 foo 与全局变量 foo 不同，因此全局变量 foo 的值仍为"123"，并未受到影响。

阅读全文

var foo = '123'; function print() { var foo = '456'; this.foo = '789'; console.log(foo); } print();

相关推荐

foo2zjs-1008-install.sh 自动安装脚本

foo2zjs-1007-install.sh 自动安装脚本

SublimeRubyToggleString:Sublime Text 2插件，用于切换Ruby字符串文字（例如“ foo” =>'foo'=>％Q {foo}）

gulp-dotdot:用于将 foo..bar(...) 符号转换为 foo.bar.bind(foo, ...) 的 Gulp 插件

ember-no-implicit-this-codemod：用于从“ {{foo}}”重构为“ {{this.foo}}”的模板codemod

dotdot:在 Node 加载时用 foo.bar.bind(foo) 替换 foo..bar() 以缩短常见的 JS 语法

foo

foo_input_sacd-0.5.11.zip_ dsd_FOO-INOUT-SACD_foo_input_sacd0._f

foovar::sparkles:特殊:sparkles:仓库

com.foo-20050206.203652.jar

function foo的原型与prototype属性解惑

foo2zjs.tar.gz

foo-react-charts:foo.software上使用的图表组件

com.foo-1.0.jar

com.foo-1.0.2.jar

google-foo.bar:我针对Google提出的foo.bar编程挑战提出的意见

地级市GDP及产业结构数据-最新.zip

2006-2023年上市公司资产误定价Misp数据集（4.9万样本，含原始数据、代码及结果，最新）.zip

最新推荐

地级市GDP及产业结构数据-最新.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

如何结合PID算法调整PWM信号来优化电机速度控制？请提供实现这一过程的步骤和代码示例。

Vue.js开发利器：chrome-vue-devtools插件解析