变量提升(Hoisting):在ES6之前,函数声明变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。

注意: 1. JavaScript 仅提升声明,而不提升初始化。2. ES6 中不存在变量提升的概念。

1. 变量提升

变量未声明:

function fn () {
console.log(name);
}
fn(); // 报错: ReferenceError: name is not defined

变量在使用后声明:

function fn () {
console.log(name);; // undefined
var name;
}
fn();

变量在使用后声明并初始化:

function fn () {
console.log(name);; // undefined
var name = 'cedric';
}
fn();

上面函数等效于下面:

function fn () {
var name;
console.log(name);; // undefined
name = 'cedric';
}
fn();

2. 函数表达式的提升

function fn () {
console.log(fn2);; // undefined
console.log(fn2());; // 报错 Error: fn2 is not a function
var fn2 = function() { };
}
fn ();

可见,在一个函数表达式声明前,可以访问其函数名,但是调用此函数会报错!!

3. 函数声明的提升

function fn () {
console.log(fn2); // fn2() {console.log('console in fn2');}
fn2(); // console in fn2
function fn2() {
console.log('console in fn2');
};
}
fn ();

在函数声明前,既可以访问函数名,也可以调用此函数。

4. 易错

var a = 1;
function fn() {
console.log( a); // undefined
var a = 2;
}
fn();
var a = 1;
function fn() {
console.log( a); // 1
a = 2;
}
fn();
var a = 1;
function fn() {
if (!a) {
var a = 2;
}
console.log( a); // 2
}
fn();
var a = 1;
function fn() {
if (!a) {
a = 2;
}
console.log( a); // 1
}
fn();

JavaScript 变量提升的更多相关文章

  1. 回归基础: JavaScript 变量提升

    from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...

  2. JavaScript变量提升 面试题

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. JavaScript变量提升和函数声明预解析

    1.首先理解函数作用域 在JavaScript中,变量的定义并不是以代码块作为作用域的,而是以函数作用作用域的.也就是说,如果变量是在某个函数中定义的,那么它在函数以外的地方是不可见的.而如果该变量是 ...

  4. javascript变量提升

    提升是一种将变量和函数的声明移到函数作用域(如果不在任何函数内的话就是全局作用域)最顶部的机制. 提升影响了变量的生命周期,一个变量的生命周期包含3个阶段: 声明——创建一个新变量,例如var myV ...

  5. 最通俗易懂的javascript变量提升

    a = 'ghostwu'; var a; console.log( a ); 在我没有讲什么是变量提升,以及变量提升的规则之前, 或者你没有学习过变量提升,如果按照现有的javascript理解, ...

  6. javascript变量提升详解

    js变量提升 对于大多数js开发者来说,变量提升可以说是一个非常常见的问题,但是可能很多人对其不是特别的了解.所以在此,我想来讲一讲. 先从一个简单的例子来入门: a = 2; var a; cons ...

  7. 160622、详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  8. 详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  9. 对javascript变量提升跟函数提升的理解

    在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){ ...

随机推荐

  1. 互联网,IT,大数据,机器学习,AI知识tag云

    互联网基础: tcp/ip网络,linux运维,DNS,ipv6 web前端: javascript, es6, 组件化开发, vuejs, angularjs, react html5, css3, ...

  2. deep learning自学知识积累笔记

    推荐系统的演变过程 协同过滤(英雄所见略同)思想为类似喜好的人的选择必然也类似.比如小学男生普遍喜欢打手游,中年大叔普遍喜欢射雕英雄传 随后有了SVD奇异值分解,但是SVD要求不能太稀疏,因此有了隐语 ...

  3. Android Activity切换与Activity间数据交互

    在Android程序内部, startActivity借助Intent来启动一个子Activity(使用父子关系进行表述,只为表达清晰,Android中并未有父子Activity的概念).如下: In ...

  4. 如何让VB6代码编辑器垂直滚动条随鼠标滚轮滚动

    VB6毕竟是很老的产品了,它的代码编辑器垂直滚动条并不能随鼠标的滚轮而滚动,这个问题会让我们在编写代码的时候觉得很不方便,不过还是有一种方法可以解决这个问题的.    先下载一个微软发布的“VB6ID ...

  5. MSChart 设置饼图颜色 图例背景色 图例显示位置

    chartField.Series.Clear();            chartField.ChartAreas.Clear();            chartField.Legends.C ...

  6. if 和 elif 的区别

    if:    如果一个判断中用if, 程序他会遍历所有的if, 即使你的判断条件遍历到了, 也会继续执行, 直到遍历完所有的if. elif:  而elif呢, 则效率很高. 只要遍历到你的判断条件, ...

  7. 阿里八八Alpha阶段Scrum(9/12)

    今日进度 叶文滔: 成功完成多级悬浮按钮,并添加与日程输入界面的连接.debug了一些对接产生的问题 黄梅玲: 合并单日项目至多日.获取json数据 王国超: 完成了初步的多日界面,pull至项目.进 ...

  8. 团队作业6--展示博客(Alpha版本)

    一.团队展示: 1.队名:软件1412--博客管理系统 2.队员学号(标记组长) 曾海明(组长):201421122036   周雅静(组员):201421122003  王珏(组员):2014211 ...

  9. python爬虫(二)

    python爬虫之urllib 在python2和python3中的差异 在python2中,urllib和urllib2各有各个的功能,虽然urllib2是urllib的升级版,但是urllib2还 ...

  10. node学习笔记_02 API详解

    一.知识点:url.parse方法 方法说明: 讲一个URL字符串转换成对象并返回. 语法:url.parse(urlStr, [parseQueryString], [slashesDenoteHo ...