js变量提升总结

简介: JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。例1var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Jack'; console.

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

例1

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

在自运行函数内,存在var name = 'jack',所以name会提升到当前作用域最前边,所以 name为undefined。当程序运行到变量的时候,会先在当前作用域内查找该变量,如果找不到,则会向父级作用域查找,如果还是找不到,就会报错

例2

var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;
相当于:
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y

例3

(function(){
    a = 4;
    console.log(a);
    console.log(window.a);
    var a = 3;
    console.log(a);
})()
输出
4
undefined
3

变量提升到当前作用域,window作用域内没有定义a,所以undefined

例4 变量与函数提升

console.log(foo);
function foo(){};
var foo = '12';
console.log(foo);

输出 ƒ foo(){} 和 12;

console.log(foo);
var foo = function(){};
var foo = '12';
输出 undefined

原来函数提升分为两种情况:
一种:函数申明。就是上面A,function foo(){}这种形式
另一种:函数表达式。就是上面B,var foo=function(){}这种形式
第二种形式其实就是var变量的声明定义,因此上面的B输出结果为undefined应该就能理解了。
而第一种函数申明的形式,在提升的时候,会被整个提升上去,包括函数定义的部分

例5

var sayHello;
console.log(typeof (sayHey));//=>function    
  console.log(typeof (sayHo));//=>undefined
  if (true) {
      function sayHey() {
          console.log("sayHey");
      }
      sayHello = function sayHo() {
          console.log("sayHello");
  }
  } else {
      function sayHey() {
          console.log("sayHey2");
      }
      sayHello = function sayHo() {
          console.log("sayHello2");
      }
  }    
  sayHey();// => sayHey2    
  sayHello();// => sayHello

函数声明整体提升,js解析从上到下,提升sayHey,接着提升下面的sayHey,把第一个覆盖了,所以执行sayHey()输出sayHey2
函数表达式不会整体提升,所以输出sayHello

例6

function aa(a,b,c) {
    console.log(a);
    console.log(aa);
    console.log(arguments);
    var a = function(){
        console.log(12);
    };
    var aa = '444';
    arguments = 6;
    console.log(a);
    console.log(aa);
    console.log(arguments);
    function a(){};
}
aa(1,2,3);

VM2311:3 ƒ a(){}
VM2311:4 undefined
VM2311:5 Arguments(3) [ƒ, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM2311:11 ƒ (){
        console.log(12);
    }
VM2311:12 444
VM2311:13 6
undefined


var num1 = 1;
function   fn(num3){
    var num4;
    console.log(num1);    //output    undefined
    console.log(num3);    //output  4
    console.log(num4);    //throw error  “num4 is not defined”
    console.log(num2);    //throw error  “num2 is not defined”
    var num1 = num4 = 2;
    num2 = 3;
    var num3= 5;
}
fn(4);

例7

window.val = 1;
var obj = {
    val: 2,
    dbl: function () {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func();

2\4\8\8
相关文章
|
12天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
12天前
|
JavaScript 前端开发 开发者
js开发:请解释变量提升(hoisting)是什么,以及它是如何工作的。
JavaScript中的变量提升(Hoisting)在编译阶段将`var`声明的变量和函数声明提升到各自作用域顶部。变量默认值为`undefined`,函数声明可先调用后定义。但赋值、`let`和`const`以及函数表达式不被提升。现代实践建议避免依赖此特性,以增加代码可读性。
|
12天前
|
前端开发 JavaScript Java
除了变量提升,JavaScript还有哪些特性?
【2月更文挑战第20天】【2月更文挑战第61篇】除了变量提升,JavaScript还有哪些特性?
|
12天前
|
JavaScript 前端开发
解释 JavaScript 中的变量提升现象。
解释 JavaScript 中的变量提升现象。
17 4
|
12天前
|
JavaScript 前端开发
JavaScript开发基础问题:解释一下变量提升。
JavaScript开发基础问题:解释一下变量提升。
43 5
|
12天前
|
JavaScript 前端开发
变量提升:JavaScript代码是按顺序执行的吗?
变量提升:JavaScript代码是按顺序执行的吗?
29 0
|
9月前
|
JavaScript 前端开发
JavaScript 为什么要进行变量提升,它导致了什么问题?
JavaScript 为什么要进行变量提升,它导致了什么问题?
|
9月前
|
JavaScript
理解js的变量提升
理解js的变量提升
36 0
|
JavaScript 前端开发
深入理解javascript变量提升机制
深入理解javascript变量提升机制
58 0
|
JavaScript 前端开发 程序员
浏览器原理 06 # 变量提升:JavaScript代码是按顺序执行的吗?
浏览器原理 06 # 变量提升:JavaScript代码是按顺序执行的吗?
86 0
浏览器原理 06 # 变量提升:JavaScript代码是按顺序执行的吗?