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

  1、函数声明。 

function boo(){
console.log(123);
}
boo()

  2、函数表达式。

var boo = function(){
console.log(123)
}
boo()

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

boo(123)
function boo(x){
console.log(x); //
}

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

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

function boo(x){
console.log(x); //
}
boo(123)

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

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

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

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

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

var foo = function(){
console.log(123)
} function foo(){
console.log(456)
}
foo()

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

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

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

  最后补一个容易混淆的。

function Foo(){
getName = function(){
console.log(1);
}
return this;
}
Foo.getName = function(){
console.log(2)
}
Foo.prototype.getName = function(){
console.log(3)
}
var getName = function(){
console.log(4)
}
function getName(){
console.log(5)
}
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1 foo()执行完成后,将全局的getName也就是window.getName给更改后返回this,而在这里this执行的就是window,所以最后执行的就是window.getName,所以输出1

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

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

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

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. 在海航云中部署 keepalived

    **本文属自我学习,不适合转载** 1. 准备工作 1.1 网络方面的准备工作 1.1.1 创建安全组 注意这里要添加 vrrp 协议支持,否则 keepalived 将无法正常工作. 1.1.2 创 ...

  2. linux下新建svn项目

    1.新建项目svnadmin create /mnt/fbdisk/svn/newproject 2.会在svn下面建立newproject目录total 24drwxr-xr-x 2 root ro ...

  3. 我 对jvm 创建线程的一些了解

    1.jvm 每创建一个线程都会对应产生一个该线程的虚拟机栈,栈大小通过-Xss参数来设置,JDK1.5之后默认为1M 2.JVM创建线程需要内存,但这部分内存不使用堆内存(毕竟JVM虚拟机栈).对于3 ...

  4. 关于linux命令ssh的总结

    因为项目计算量比较大,需要将任务分布到多台电脑上面运行,因为对于分布式概念不熟,就想到了linux最简单的ssh协议,远程控制其他电脑,然后写shell脚本统一在所有电脑上运行程序.(我的操作系统为U ...

  5. Robot Framework学习笔记(十一)------ 分层设计

    以百度搜索为例,如果我们需要写5个不同关键字搜索的用例.如果没有分层的思想,那么我们需要写5个用例,并且每个用例都需要重复写打开浏览器.输入关键字.点击按钮.关闭浏览器的步骤.如果使用Robot Fr ...

  6. 我的Python学习笔记(三):私有变量

    一.私有变量的定义 在Python中,有以下几种方式来定义变量: xx:公有变量 _xx:单前置下划线,私有化属性或方法,类对象和子类可以访问,from somemodule import *禁止导入 ...

  7. 【转】Python 爬虫的工具列表【预】

    这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...

  8. 【二分图】洛谷P1640连续攻击游戏

    题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并且每种装备 ...

  9. K:图相关的最小生成树(MST)

    相关介绍:  根据树的特性可知,连通图的生成树是图的极小连通子图,它包含图中的全部顶点,但只有构成一棵树的边:生成树又是图的极大无回路子图,它的边集是关联图中的所有顶点而又没有形成回路的边.  一个有 ...

  10. from Require.js to Webpack(why)

    写在前面: 本文主要参考 From Require.js to Webpack - Part 1 (the reasons),原文作者将项目从 require.js 转移到了 webpack 并详细说 ...