首先看一段JS代码,其中使用了两种方式声明了两个函数,分别在不同的地方调用两个函数:

 <script>
'use strict';
// 输出hello函数
console.log(hello);
// 定义hello函数
function hello(){
alert("Hello");
}
// 输出hi变量
console.log(hi);
// 给hi赋一个函数
var hi = function(){
alert("Hi");
}
// 输出变量hi
console.log(hi);
</script>
在JS中,定义函数有两种方式,分别是“函数语句”和“表达式”。
    - 针对hello函数,我在还没有定义它之前就调用了它,并且我定义hello函数使用的“函数语句”定义的方式。
    - 针对hi函数,我使用的是“表达式”的定义方式,也在定义之前和之后调用了该函数。
结果如下所示:

我们可以看到,使用“函数语句”的方式定义的函数可以“先使用,后定义”。而使用“表达式”定义的函数只能“先定义,后使用”。
 
为什么会出现这种情况呢,我谈谈我个人的理解,如果有不对的地方,希望可以帮我纠正一下:
  我们都知道JS默认有一个全局对象window,在运行一段JS代码时:
    第一步:JS引擎会先扫描整个JS代码,把所有全局变量都绑定到window对象上,包括hello和hi这两个变量。此时,window上就有了hello函数(包括函数体)和hi变量(但值为undefined)。
    第二步:开始从第一行执行JS代码,这时虽然还没有执行到hello函数的定义语句,但是window中已经有了函数定义了。而没有执行到hi变量的赋值语句之前,hi变量用于是undefined。
  综上所述:导致了两种函数定义方式导致的“定义”和“使用”的顺序不同。
 
为了验证猜想,我们在JS代码块的开头添加两行console:
 console.log(window.hello);
console.log(window.hi);

输出结果如下:

这其中也牵涉到了“变量提升”的概念,其实都可以用绑定到window对象上来理解:在执行JS代码之前,所有的全局变量(包括函数和变量),都会绑定到window对象上,只是函数会包含函数体,变量仅仅是一个undefined。

我只是个新手,如果有理解上的偏差还望指出,万分感谢!

简单说明一下JS中的函数声明存在的“先使用,后定义”的更多相关文章

  1. JS中的函数声明和函数表达式的区别,即function(){}和var function(){},以及变量提升、作用域和作用域链

    一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...

  2. JS中的函数声明错误

      这个问题是JS的函数声明形参部分不带var. ( 额,基础不扎实.)

  3. js中的函数声明置顶

    函数声明置顶是指 js引擎在读取变量与声明式函数时,会优先读取,例如如下 var a = 1: function a(){}; console.log(a); //这里得到的为1,而不是该functi ...

  4. js中的函数声明和函数表达式的区别

    目录 一.声明与表达式的格式 1.1 声明式的格式: 1.2 表达式的格式: 二.区别 2.1 函数表达式可以直接在后面加括号执行,而函数声明不可以. 2.2 函数表达式可以被提前解析出来 2.3 命 ...

  5. JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype

    一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...

  6. js中的函数,Date对象,Math对象和数组对象

    函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. ...

  7. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  8. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  9. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

随机推荐

  1. MySQL 数据类型总结及选取准则

    整数 整数有 TINYINT, SMALLINT, MEDIUMINT, INT 和 BIGINT 类型. 占用    8          ,  16            24,          ...

  2. UGUI——重写Image类实现进度条

    目的: 游戏中经常会用到进度条,但是美术给的图片用filled一拉伸就很难看,如下图 第一种模式是九宫格模式,第二种是filled.而我们需要的是两种可结合的. 如何实现: 新建一个类,继承image ...

  3. Tomcat中使用commons-io-2.5发生的错误java.lang.ClassNotFoundException: org.apache.commons.io.IOUtils

    关键词:IntelliJ IDEA.Tomcat.commons-io-2.5.jar.java.lang.ClassNotFoundException: org.apache.commons.io. ...

  4. 一步一步实现web程序信息管理系统之三----登陆业务逻辑实现(验证码功能+参数获取)

    本篇紧接着上一篇文章[一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面] 验证码功能 一般验证码功能实现方式为,前端界面访问一个url请求,后端服务代码生成一个图片流返回至浏览器 ...

  5. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  6. CSS 层叠与继承

    三种继承css方式 1.段内继承 <p style="color: red;font-size:50px;">样式原文</p> 原文变成 红色, 原文字体变 ...

  7. 微信小程序-scroll-view组件

    <view class="section"> <view class="section__title">vertical scroll& ...

  8. 护航SMB网络安全 应选择新一代防火墙

    当前,各种规模的企业都遭遇着日益增多的网络攻击,而其中以中小企业(SMB)为代表的广大群体则更加面临敏感数据.公司资产和知识产权不断暴露在风险中的窘境.为了帮助企业应对这一挑战,新一代防火墙的采购与部 ...

  9. 使用nodeJs安装Vue-cli (win10 使用管理员身份)

    TIP:win10下安装,使用管理员身份进行,否则会有权限限制. 1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli.(n ...

  10. java 反射和泛型

    反射 在计算机科学中,反射是指计算机程序在运行时(Run time)可以访问.检测和修改它本身状态或行为的一种能力.[1]用比喻来说,反射就是程序在运行的时候能够“观察”并且修改自己的行为. 要注意术 ...