JavaScript | 函数定义的两种方法;预编译与执行

HTML5学堂(码匠):在JavaScript当中,函数的定义有两种常见方法,这两种方法有何不同?与这种不同点息息相关的“预编译与执行”又是什么意思?

1.如何定义函数

方法1:函数声明

方法2:函数表达式,又叫函数字面量

2.声明函数的代码实例

2.1.函数声明

基本语法

function functionName(arg0, arg1, ..., argn) {
    // 函数体 - HTML5学堂
}

代码范例

2.2.函数表达式(函数字面量)

基本语法

var functionName = function(arg0, arg1, ..., argn) {
    // 函数体 - HTML5学堂
};

代码范例

3.两种声明方法的不同点比较

在JavaScript运行过程中分为编译和执行两个阶段,在编译阶段解析器会先读取函数声明,并使其在执行任何代码之前可以访问;

因此,对于“函数声明”,在执行代码之前,函数就会先被读取,因此,在开发时可以把函数声明放在调用语句的后面

但是,对于“函数表达式”,则必须等到执行阶段解析器执行到它所在的代码行时,才会真正被解释执行

相关知识 - 预编译与执行

预编译期与执行期

JS的解析过程分为两个阶段:预编译期与执行期。

预编译期JS会对本代码块中的所有声明的变量(var声明的变量)和函数进行处理,但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但并不进行赋值

代码范例:

代码运行结果

undefined 'HTML5学堂(码匠)'

代码解析

预编译时,对声明的变量开辟了内存空间,但是没有赋值,所以变量里面的值是undefined。执行期的时候,代码是从上往下执行,没有对第一个username进行赋值,所以第一个username输出undefined。

第二个username会输出'HTML5学堂(码匠)',是因为代码执行到var a = 'HTML5学堂(码匠)'; 的时候为username进行赋值了,覆盖之前undefined的值。

Plus

JS引擎是按照代码块(<script></script>)来进行预处理和执行的,也就是说预处理的只是当前执行代码块的声明函数和变量。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-03-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4798
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2667
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2112
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2517
来自专栏魂祭心

原 canvas绘制clock

4024
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25210
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2506
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5267
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3075

扫码关注云+社区