首先,JavaScript中函数有两种创建方式,即函数声明、函数表达式两种。

  1、函数声明。 

  1. function boo(){
  2. console.log(123);
  3. }
  4. boo()

  2、函数表达式。

  1. var boo = function(){
  2. console.log(123)
  3. }
  4. boo()

  现在来说说函数声明提升。还是以例子来说明吧。

  1. boo(123)
  2. function boo(x){
  3. console.log(x); //
  4. }

  运行后可知,在函数声明中,函数创建前就可以先调用函数。

  由于函数声明提升,其实上述语句相当于这样:

  1. function boo(x){
  2. console.log(x); //
  3. }
  4. boo(123)

  而在函数表达式中,则会是另一番结果。

  1. hoo(456)
  2. var hoo = function(y){
  3. console.log(y) // Uncaught TypeError: hoo is not a function
  4. }

  运行后,发现会报错,为什么呢?这是因为在函数表达式中,函数声明并不会提前,它只是变量会提升而已。所以上述语句相当于:

  1. var hoo;
  2. hoo(456);
  3. hoo = function(y){
  4. console.log(y) // Uncaught TypeError: hoo is not a function
  5. }

  讲到函数声明提升与变量声明提升,这里来举另外一个例子。

  1. var foo = function(){
  2. console.log(123)
  3. }
  4.  
  5. function foo(){
  6. console.log(456)
  7. }
  8. foo()

  最初我一看到这个,毫不犹豫的就说这个结果是456,然而很遗憾,是错的。下面来分析一下,虽然两个函数的函数名是一样的,但是第一种方法是函数表达式,第二种是函数声明,鉴于变量声明提升和函数声明提升,所以上述语句其实相当于:

  1. var foo; // 变量声明提升
  2. function foo(){ // 函数声明提升
  3. console.log(456)
  4. }
  5. foo = function(){ // 变量赋值依然保留在原来位置
  6. console.log(123)
  7. }
  8. foo()

  所以结果显而易见,是123喽。

  最后补一个容易混淆的。

  1. function Foo(){
  2. getName = function(){
  3. console.log(1);
  4. }
  5. return this;
  6. }
  7. Foo.getName = function(){
  8. console.log(2)
  9. }
  10. Foo.prototype.getName = function(){
  11. console.log(3)
  12. }
  13. var getName = function(){
  14. console.log(4)
  15. }
  16. function getName(){
  17. console.log(5)
  18. }
  19. Foo.getName(); // 2
  20. getName(); // 4
  21. Foo().getName(); // 1 foo()执行完成后,将全局的getName也就是window.getName给更改后返回this,而在这里this执行的就是window,所以最后执行的就是window.getName,所以输出1

  22. getName(); // 1 上面已经更改全局的getName,所以依然是1

  23. new Foo.getName(); // 2 new 操作符在实例化构造器的时候,会执行构造器函数,也就是说,foo.getName会执行,输出2

  24. new Foo().getName(); // 3 先new foo()得到一个实例,然后再执行实例的getName方法,这个时候,实例的构造器里没有getName方法,就会执行构造器原型上的getName方法

  25. new new Foo().getName() // 3

JavaScript函数声明提升的更多相关文章

  1. JavaScript 函数声明与函数表达式的区别 函数声明提升(function declaration hoisting)

    解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问).至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真的被 ...

  2. JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别

    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...

  3. Javascript函数声明与函数表达式

    在定义函数时,我们一般使用下面这两种方法: 使用函数声明定义: function sum (a, b) { return a + b; } 使用函数表达式定义: var sum = function ...

  4. 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...

  5. Javascript函数声明与函数表达式的区别

    在定义函数时,我们一般使用下面这两种方法: 使用函数声明定义: 1 2 3 function  sum (a, b) {     return a + b; } 使用函数表达式定义: 1 2 3 va ...

  6. JavaScript 变量声明提升

    JavaScript 变量声明提升 一.变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动 二.在基本的语句(或者说代码块)中(比如:if语句.for语句.while语句.swi ...

  7. javascript 函数声明和函数表达式

    定义js函数的方法有两种,1.函数声明 2.函数表达式 这两种方式的区别是:1.函数声明可以先调用后定义(javascript引擎在解释的时候会把所有的函数声明提升)2.函数表达式必须先定义后使用.看 ...

  8. 浅谈JavaScript变量声明提升

    前段时间阿里实习生内推,一面就被刷了,也是郁闷.今天系统给发通知,大致意思就是内推环节不足以了解彼此,还可以参加笔试,于是赶紧再投一次.官网流程显示笔试时间3月31日,时间快到了,开始刷题.网上搜了一 ...

  9. Javascript 函数声明、调用、闭包

    1 # Javascript 函数声明.调用.闭包 2 # 一.函数声明 3 # 1.直接声明.浏览器在执行前,会先将变量和函数声明进行提升. 4 fn(); 5 function fn () { 6 ...

随机推荐

  1. CentOS7 nginx安装

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  2. 学习rollup.js模块文件打包

    学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点 ...

  3. 解决360随身wifi每天首连频繁断线

    经本人试过几个星期是可以的,需要的话加微新备注:solq123987654

  4. 基于zepto的移动端日期和时间选择控件

    前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...

  5. thinkphp5使用PHPExcel导入Excel数据

    安装PHPExcel扩展类 地址:https://github.com/PHPOffice/PHPExcel ①通过composer安装 ②手动下载, 放在项目的extend目录下 代码中引入 由于P ...

  6. Django学习日记04_模板_overview

    通过Django中的模板,使得设计人员和网站管理有一个对接的接口,实现网页设计和逻辑的分离,因此,模板会处理大量的文本解析内容,django中内部使用了高效的引擎来完成模板解析. 模板设置 在使用模板 ...

  7. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  8. angular4.0 安装最新版本的nodejs、npm、@angular/cli的方法

    在使用ng项目的ui框架时,比如ng-zorro.angular Material,需要安装最新版本的@angular/cli: 配置ng-zorro框架 ng-zorro官网:https://ng. ...

  9. Nginx中并发性能相关配置参数说明

    worker_processes:开启worker进程的数目,通常可设置为CPU核心的倍数.在不清楚的情况下,可设置成一倍于CPU核心数或auto(Nginx将自动发现CPU核心数). worker_ ...

  10. Java中Optional使用注意事项

    前言 之前遇到过使用Optional之后带来的隐含bug,现在强调记录一下不好的用法,防止错用. Optional不能序列化,不能作为类的字段(field) 这点尤为重要,即类要纯粹.如果是POJO就 ...