JavaScript 变量和函数提升问题总结

一 什么是JavaScript 变量提升?

-- JS程序运行时,

(a)变量的声明会被解释器"提升"到方法体内的顶部,初始化赋值操作不提升按顺序执行

(b)函数体内未声明的变量,解释器会在函数体外声明变量,成为全局变量

(c)声明过的函数,整个函数体会被解释器提升到方法体的顶部,初始化赋值操作按顺序执行

1-1 变量提升

eg:变量的声明提升,初始化赋值不提升。

<script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      console.log(a);  // undefined  
      var a = ‘a‘;   //此a为局部变量,没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // 3
</script>

上述代码相当如下:

<body>
 <script>
    var a;
    console.log(a);    // undefined
    a=3;               // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      var a; 
      console.log(a);  // undefined  
      a = ‘a‘;        //没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);  // 3
  </script>
</body>

对比改掉函数中a的var声明

<script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    function fn() { 
      console.log(a);  //变成了 3  
      a = ‘a‘;       //此a变成全局变量,没有这一句上下输出的结果都变为3
      console.log(a); // a
    }
    fn();
    console.log(a);  //变成了 a
</script>

上述代码相当如下:

 <script>
    console.log(a);    // undefined
    var a=3;           // 若没有var声明,会报错 a is not defined
    console.log(a);    // 3
    var a;
    function fn() { 
      console.log(a);  // 3  
      a = ‘a‘;        //没有这一句上下输出的结果都变为3
      console.log(a);  // a
    }
    fn();
    console.log(a);    // a
 </script>

ps:所以为避免调用函数后,可能修改了外部的变量,函数内的变量都要声明初始化,规范化。

1-2 函数提升

eg:声明式函数将整个函数体提升到顶部,字面量式函数只提升声明过的变量

<script>
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    function f1() {}
    var f2 = function () {}; //若没有var声明,上面结果报错f2 is not defined
    console.log(f2);         //function () {}
</script>

上述代码相当如下:

<script>
    function f1() {}         //提前
    var f2;                  //提前
    console.log(f1);         //function f1() {}
    console.log(f2);         //undefined
    f2 = function () {};     //若没有var声明,上面结果报错f2 is not defined
    console.log(f2);         //function () {}
</script>

ps:为避免出现一些意料不到的变量提升的错误,在每一个变量的作用域开始之前,声明并初始化变量,留意函数体中未声明的变量自动变成全局变量后,导致的种种情况

原文地址:https://www.cnblogs.com/fermin/p/9062311.html

时间: 2024-10-09 09:04:22

JavaScript 变量和函数提升问题总结的相关文章

js 变量、函数提升

先简单理解下作用域的概念,方便对变量与函数提升的概念的理解 function foo() { var x = 1; if (x) { var x = 2; } console.log(x); } foo();// 2 结果为2,可见js中并没有块级作用域的概念 可以使用下面的方法创造自己的作用域,这样不会干扰到外部变量 function foo() { var x = 1; if (x) { (function() { var x = 2; }()); } console.log(x); } f

死磕JavaScript变量和函数的预解析

预解析:在解析代码之前做一些处理 预解析做什么处理? 把变量的声明提前了----提前到当前所在的作用域的最上面 函数的声明也会被提前---提前到当前所在的作用域的最上面 那么我们现在开始举几个例子 1.观察下方的第一个红框中的代码,猜猜它的结果是什么? 通过运行我们发现,代码竟然神奇的没有报错?但是输出的也不是下面赋值的1而是undefined,这到底是为什么呢?其实这就是因为js引擎的预解析将num这个变量的声明提前到作用域的最上方(num是全局变量所以提前到最外层也就是script标签内的最

JavaScript 变量、函数与原型链

定义 || 赋值 1-函数的定义 函数定义的两种方式: “定义式”函数:function fn(){ alert("哟,哟!"); } “赋值式”函数:var fn = function(){ alert("切可闹!"); } @页面加载时,浏览器会对JavaScript代码进行扫描,并将 定义式函数进行预处理(类似C等的编译).[函数声明提升] 处理完再由上至下执行,遇到赋值式函数 则只是将函数赋值给一个变量,不进行预处理,待调用时才进行处理. @在定义前面调用函

轻松学习 JavaScript——第 5 部分:简化函数提升

为了理解函数提升,让我们从以下代码开启我们的学习之旅: console.log(foo); var foo = 9;</pre> 应该输出什么呢? 在任何其他编程语言中,这里的输出将会是reference error.但是,在JavaScript中,你将得到undefined作为输出.为什么?因为JavaScript会提升变量到执行上下文的顶部.执行上下文可以是声明变量的函数,也可以是声明变量的JavaScript文件.所以,让我们用函数重写上面的代码片段: function abc() {

278 执行上下文、执行上下文栈:变量提升与函数提升,执行上下文,执行上下文栈,全局执行上下文,函数执行上下文,练习题

变量提升与函数提升 变量提升: 在变量定义语句之前, 就可以访问到这个变量(undefined) 函数提升: 在函数定义语句之前, 就执行该函数 先有变量提升, 再有函数提升 变量声明提升.函数声明提升 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_变量声明提升.函数声明提升</title> &l

javascript变量声明与函数声明提升

在JavaScript中,在声明变量或者函数前就使用变量或者函数,会产生以外的错误.这些在很多JS的笔试题中都会出现. 先看下面这道题: 1 (function( ) { 2 var x = foo( ); 3 var foo = function foo( ){ 4 return "foobar" : 5 } 6 return x; 7 })( );问:上面函数的返回值是() A.类型错误B.foobarC.undefinedD.foo( )答案应该选A,而不是D.说到这原因大家应该

JavaScript系列文章:变量提升和函数提升

第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函数提升 3. 为什么要进行提升 4. 最佳实践 那么,我们就开始进入主题吧. 1. 变量提升 通常JS引擎会在正式执行之前先进行一次预编译,在这个过程中,首先将变量声明及函数声明提升至当前作用域的顶端,然后进行接下来的处理.(注:当前流行的JS引擎大都对源码进行了编译,由于引擎的不同,编译形式也会有

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

在写javascript代码的时候,经常会碰到一些奇怪的问题,例如: console.log(typeof hello); var hello = 123;//变量 function hello(){//函数声明 } console.log(typeof hello); var hello = function(){//函数表达式 } console.log(typeof hello);//function number function 对于为什么会是这样的一个结果:function numb

Javascript中函数及变量定义的提升

<html> <head> <title>函数提升</title> <script language="javascript" type="text/javascript"> //在全局对象中声明两个全局函数,反模式 function foo() { alert("global foo"); } function bar() { alert("global bar")