重学原生js之变量提升

变量声明是所有的编程语言中最基础部分之一。然而,JavaScript 有一个怪异点,称之为变量提升(hositing),这个能够让一个看上去无关紧要的声明变成一个小bug。

一、变量提升

在当前上下文遇到一个变量,如果不是私有的,则向上级上下文中查找一直找到全局上下文为止, 如果全局上下文中也没有:

  1. 如果是获取变量的值,则直接报错

  1. 如果是设置变量的值,则相当于给window(GO)设置一个属性

二、window全局对象和全局变量的关系

1、两者关系

两者之间存在映射关系(创建一个全局变量,也相当于给window设置一个属性)

2、两者优先级

在全局上下文代码执行的时候,遇到一个变量,首先看是否为全局变量(如果是操作全局变量,【var/function声明的会给window也设置一份】),不是全局变量则继续看是否为GO的属性(如果是相当于省略window),如果也不是则按照没有声明这个变量的错误处理

3、window.a为什么是undefined?

直接输出window.a是对象的成员访问,哪怕没有属性a,属性值是undefined,也不会报错

三、变量提升练习题

建议重新读一遍变量提升的概念,再做这三道题。

第一题

console.log(a); 
var a=12; 
function fn(){
    console.log(a); 
    var a=13;   
}
fn();   
console.log(a);

第二题

console.log(a); 
var a=12;
function fn(){
    console.log(a);
    a=13;
}
fn();
console.log(a);

第三题

console.log(a);
a=12;
function fn(){
    console.log(a);
    a=13;   
}
fn();
console.log(a);

第四题


var foo='hello'; 
(function(foo){
   console.log(foo);
   var foo=foo||'world';
   console.log(foo);
})(foo);
console.log(foo);

解析:

1、自执行函数执行:创建一个函数,并且立即把这个函数执行
2、把全局的foo的值'hello'传递给私有上下文中的形参
3、函数执行先形参赋值,再变量提升
4、foo已经存在,==不重复声明==

四、块级作用域中的变量提升

1、块级作用域

代码在执行的时候遇到大括号{}(排除函数、对象的),在看到{}中有let、const、function才会把其当做块级作用域。


if(true) {
    var a = 1
}
// 不是块级作用域

if(true) {
    let a = 1
}
// 是块级作用域

if(true) {
    function a(){}
}
// 是块级作用域

2、函数在块级作用域中的变量提升


console.log(foo)
{
    console.log(foo)
    function foo() {}
    foo = 1;
    console.log(foo)
}
console.log(foo);

// undefined  function 1 function

解析:

1、{}里面有function所以是块级作用域
2、函数在块级作用域中没有,所以会变量提升(所以第二个打印function)
3、==重点== 函数出现在块级作用域中,变量提升阶段,只声明不定义(所以第一个undefined)
4、==重点== 在代码执行的时候浏览器会把function foo()之前的操作,不仅认为是私有的,还会给全局映射一份,之后对foo的操作就认为是私有的了(所以后两个分别1、function)

五、块级作用域变量提升练习题

建议把上面的四句话多读几遍再做

第一题


console.log(foo);
{
    console.log(foo);
    function foo() {} // 此时之前对FOO的操作不会映射,等待最后一次再处理
    foo = 1;
    function foo() {}
    console.log(foo);
}
console.log(foo);   
    

第二题


console.log(foo);
{
    function foo() {}
    foo = 1;
    function foo() {}
    foo = 2;
}
console.log(foo);

练习题答案欢迎留言!

公众号地址,欢迎关注!

你可能感兴趣的:(前端,javascript,ecmascript)