网上找了两个经典的例子

  1. var foo = 1;
  2. function bar() {
  3. if (!foo) {
  4. var foo = 10;
  5. }
  6. alert(foo);
  7. }
  8. bar(); // 10
  1. var a = 1;
  2. function b() {
  3. a = 10;
  4. return;
  5. function a() {}
  6. }
  7. b();
  8. alert(a);// 1

在JavaScript中,函数、变量的声明都会被提升(hoisting)到该函数或变量所在的scope的顶部。即——JavaScript的变量提升。

javascript中一个名字(name)以四种方式进入作用域(scope),其优先级顺序如下:

  • 语言内置:所有的作用域中都有 this 和 arguments 关键字;
  • 形式参数:函数的参数在函数作用域中都是有效的;
  • 函数声明:形如function foo() {};
  • 变量声明:形如var bar;

名字声明的优先级如上所示。也就是说如果一个变量的名字与函数的名字相同,那么函数的名字会覆盖变量的名字,无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的,不受以上优先级的影响。

  1. (function(){
  2. var foo;
  3. console.log(typeof foo); //function
  4. function foo(){}
  5. foo = "foo";
  6. console.log(typeof foo); //string
  7. var foo;
  8. })();
  1. function test() {
  2. foo(); // TypeError "foo is not a function"
  3. bar(); // "this will run!"
  4. var foo = function () { // function expression assigned to local variable 'foo'
  5. alert("this won't run!");
  6. }
  7. function bar() { // function declaration, given the name 'bar'
  8. alert("this will run!");
  9. }
  10. }
  11. test();

变量的提升(Hoisting)只是其定义提升,而变量的赋值并不会提升

再来看一个例子,下面两段代码其实是等价的:

  1. function foo() {
  2. if (false) {
  3. var x = 1;
  4. }
  5. return;
  6. var y = 1;
  7. }
  8. function foo() {
  9. var x, y;
  10. if (false) {
  11. x = 1;
  12. }
  13. return;
  14. y = 1;
  15. }

创建一个函数的方法有两种:

一种是通过函数声明function foo(){}

另一种是通过定义一个变量var foo = function(){}

  1. function test() {
  2. foo(); // TypeError "foo is not a function"
  3. bar(); // "this will run!"
  4. var foo = function () { // function expression assigned to local variable 'foo'
  5. alert("this won't run!");
  6. }
  7. function bar() { // function declaration, given the name 'bar'
  8. alert("this will run!");
  9. }
  10. }
  11. test();

var foo首先会上升到函数体顶部,然而此时的fooundefined,所以执行报错。而对于函数bar, 函数本身也是一种变量,所以也存在变量上升的现象,但是它是上升了整个函数,所以bar()才能够顺利执行。

本文参考自:

http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html

https://segmentfault.com/a/1190000003114255

https://segmentfault.com/a/1190000005794611


作者博客:pspgbhu

作者GitHub:https://github.com/pspgbhu

欢迎转载,但请注明出处,谢谢!

javascript中变量提升的理解的更多相关文章

  1. JavaScript中变量提升是语言设计缺陷

    首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...

  2. JavaScript中变量提升------Hoisting

    原谅链接:http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html 因为这个问题很是经典,而且容易出错,所以在介绍一次.哈哈.莫怪 ...

  3. Javascript中变量提升的问题

    一.函数声明变量提升 函数声明具有变量提升的问题,所以在函数被声明之前就可以访问. //else中的语句相当于将if中的function重写,因此无论flag为何值,返回的方法始终为重写后的方法. / ...

  4. Javascript中变量提升的问题(五)

    一.函数声明变量提升   函数声明具有变量提升的问题,所以在函数被声明之前就可以访问. console.log(getValue()); function getValue() { return 'a ...

  5. 关于javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...

  6. JavaScript中变量和函数声明的提升

    现象: 1.在JavaScript中变量和函数的声明会提升到最顶部执行. 2.函数的提升高于变量的提升. 3.函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4.匿名函数不会提升. ...

  7. JavaScript 中变量、作用域和内存问题的学习

    这是我学习JavaScript的第二篇文章,之前做过几年的Java开发,发现JavaScript虽然也是面向对象的语言但是确实有很多不同之处.就本篇博客,主要学习总结一下最近学习到的JavaScrip ...

  8. JavaScript的变量提升机制

    变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); ...

  9. JavaScript中变量声明有var和没var的区别

    JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...

随机推荐

  1. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  2. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  3. javascript之Object.defineProperty的奥妙

    直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age ...

  4. Web安全相关(四):过多发布(Over Posting)

    简介 过多发布的内容相对比较简单,因此,我只打算把原文中的一些关键信息翻译一下.原文链接如下: http://www.asp.net/mvc/overview/getting-started/gett ...

  5. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  6. springmvc+mybatis+spring 整合 bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  7. 【干货分享】流程DEMO-人员调动流程

    流程名: 调动 流程相关文件: 流程包.xml 流程说明: 直接导入流程包文件,即可使用本流程 表单:  流程:  图片:3.png DEMO包下载: http://files.cnblogs.com ...

  8. (转)利用libcurl和国内著名的两个物联网云端通讯的例程, ubuntu和openwrt下调试成功(四)

    1. libcurl 的参考文档如下 CURLOPT_HEADERFUNCTION Pass a pointer to a function that matches the following pr ...

  9. ABP(现代ASP.NET样板开发框架)系列之7、ABP Session管理

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之7.ABP Session管理 ABP是“ASP.NET Boilerplate Project (ASP.NET ...

  10. Windows操作系统下tomcat安装版图文教程

    下载tomcat安装文件,官方下载地址是:http://tomcat.apache.org/,本文以tomcat-7.0.26版本为例进行安装过程的说明: 1.双击apache-tomcat-7.0. ...