Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.

example1 :

  1. var foo = 1;
  2. function bar() {
  3. if (!foo) {
  4. var foo = 10;
  5. }
  6. console.log(foo); //
  7. }
  8. bar();

example2 :

  1. var a = 1;
  2. function b() {
  3. a = 10;
  4. return;
  5. function a() { }
  6. }
  7. b();
  8. console.log(a); //

example3 :

  1. var x = 1;
  2. console.log(x); //
  3. if (true) {
  4. var x = 2;
  5. console.log(x); //
  6. }
  7. console.log(x); //

example4:

  1. function foo() {
  2. var x = 1;
  3. if (x) {
  4. (function () {
  5. var x = 2;
  6. // some other code
  7. } ());
  8. }
  9. // x is still 1.
  10. }

Named Function Expressions

You can give names to functions defined in function expressions, with syntax like a function declaration. This does not make it a function declaration, and the name is not brought into scope, nor is the body hoisted. Here’s some code to illustrate what I mean:

example 5:

  1. foo(); // TypeError "foo is not a function"
  2. bar(); // valid
  3. baz(); // TypeError "baz is not a function"
  4. spam(); // ReferenceError "spam is not defined"
  5.  
  6. var foo = function () { }; // anonymous function expression ('foo' gets hoisted)
  7. function bar() { }; // function declaration ('bar' and the function body get hoisted)
  8. var baz = function spam() { }; // named function expression (only 'baz' gets hoisted)
  9.  
  10. foo(); // valid
  11. bar(); // valid
  12. baz(); // valid
  13. spam(); // ReferenceError "spam is not defined"

example 6:

  1. getName(); //
  2. var getName = function () { console.log(4); };
  3. function getName() { console.log(5); };
  4. getName();//

example 7:

  1. function Foo() {
  2. getName = function () { console.log(1); };
  3. return this;
  4. }
  5. Foo.getName = function () { console.log(2); };
  6. Foo.prototype.getName = function () { console.log(3); };
  7. var getName = function () { console.log(4); };
  8. function getName() { console.log(5); };
  9.  
  10. Foo.getName(); //2
  11. getName(); //
  12. Foo().getName(); //
  13. getName(); //
  14. new Foo.getName(); //
  15. new Foo().getName(); //3
  16. new new Foo().getName(); //

js作用域和变量提升的更多相关文章

  1. js 作用域,变量提升

    先看下面一段代码: 代码执行的结果是: 1st alert : a = 0 2nd alert : a = undefined 5th alert : a = 0 3rd alert : a = 3 ...

  2. JS 作用域与变量提升---JS 学习笔记(三)

    你知道下面的JavaScript代码执行时会输出什么吗? var foo = 1; function bar() { if (!foo) { var foo = 10; } console.log(f ...

  3. JS作用域和变量提升看这一篇就够了

    作用域是JS中一个很基础但是很重要的概念,面试中也经常出现,本文会详细深入的讲解这个概念及其他相关的概念,包括声明提升,块级作用域,作用域链及作用域链延长等问题. 什么是作用域 第一个问题就是我们要弄 ...

  4. JS作用域、变量提升和闭包

    作用域 作用域可以理解为JS引擎执行代码的时候,查找变量的规则. 从确定变量访问范围的阶段的角度,可以分为2类,词法作用域和动态作用域.js是词法作用域. 从变量查找的范围的角度,可以分为3类,全局作 ...

  5. JS 函数作用域及变量提升那些事!

    虽然看了多次js函数作用域及变量提升的理论知识,但小编也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷) ...

  6. JS _函数作用域及变量提升

    虽然看了多次js函数作用域及变量提升的理论知识,但也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷)&g ...

  7. javascript中的变量作用域以及变量提升

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...

  8. javascript中的变量作用域以及变量提升详细介绍

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解变量作用域 “一个变量的作用域表示这个变量存在的上下文 ...

  9. Javascript作用域和变量提升

    下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么 ...

随机推荐

  1. Java虚拟机

    虚拟机每次方法的调用和返回都伴随着栈帧的入栈和出栈,而每个栈帧都包含一个指向运行时常量池中该栈帧所属方法的引用(表明该栈帧执行的是哪个方法),持有这个引用是为了支持方法调用中的动态连接.这些符号引用中 ...

  2. $.each ---- 跳出当前的循环

    有些朋友可能会以为在jquery跳出循环可以直接使用continue和break了,但是使用之后没有效果,因为在jquery中没有这两条命令.后来上网查了下,得到了结果:return false;—— ...

  3. 借助cookie实现子网页修改父网页内容遇到的问题:同一个浏览器访问相同页面,会互相影响。 (已解决)

    问题是这样的,  我把左侧菜单做成了网页, 然后点击左侧菜单选项会改变右侧内容, 也就是子网页访问并修改父网页的内容. 为了兼容性更好, 我没有使用farther,或者opener等方法,  而是用了 ...

  4. (转载)开始iOS 7中自动布局教程(一)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

  5. laravel 生成验证码的方法

    在Laravel中有很多图片验证码的库可以使用,本篇介绍其中之一:gregwar/captcha,这个库比较简单,在Laravel中比较常用.下面我们就来介绍下使用细节: 首先, composer.j ...

  6. 移动端click时间延迟300

    解决移动端click延迟事件方法,,引入fastclick.js  然后在script标签里面写上FastClick.attach(document.body); <!DOCTYPE html& ...

  7. Android课程---关于数据存储的学习(3)之数据库和事务

    DataActivity3.java package com.hanqi.test5; import android.content.ContentValues; import android.dat ...

  8. 【三】用Markdown写blog的常用操作

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  9. HDFS Client 设计实现解析

    前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...

  10. ASP.NET MVC 5 - 控制器

    MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据 ...