js作用域与声明提升

js作用域与声明提升

作用域基本知识

1. js的var声明没有块级作用域，函数有作用域。

if(true){
    var abc = 123;
}
console.log(abc);  //123

function f(){
    var abc = 123;
}
f();
console.log(abc);
// abc is not defined

2. 没有用var定义的为全局变量,用var定义的话看哪里定义。

// 没有用var定义，会在全局作用域中
function f(){
    abc = 123;
}
f();
console.log(abc); // 123

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

1. var进行定义的时候，变量声明会提升。

console.log(a);
var a = 0;

会被拆分为

var a = undefined;
console.log(a);  // undefined
a = 0;

2. function f(){}函数定义的时候也会提升

console.log(f);

function f(){};  

那么两个都会提升，哪个先提升呢？

var f ;
function f(){

}
console.log(f);  //函数f

// 倒过来也是一样的。
function f(){}
var f;
console.log(f);  // 函数f

面试题

有了前面知识点的前提，那么题来了

1. 作用域题

        var scope = "global";
        function checkscope(){
            var scope = "local";
            function f(){
                return scope;
            }
            return f;
        }

        console.log(checkscope()());  // local
        // 不管函数在哪里执行，看哪里声明就可以了。

        var scope = "global";
        function checkscope(){
            var scope = "local";
            function f(){
                return scope;
            }
            return f();
        }

        console.log(checkscope());  // local

有可能和绑定事件或者异步一起考

for (var i = 0; i < 10; i++) {
    setTimeout(() => {
        console.log(i); // 10
    }, 0);
}

// 比如有一组lidom元素
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        console.log(i+1); // 都是同个数
    }
}

2. 函数变量声明提升题

function f(){}
var f = 123;
console.log(f);
// hhhhhh，一般不会考这里简单的。

// 拆分一下
var f ;
function f(){

}
f = 123;
console.log(f);  // 123

var foo = "output"
function foo(foo){
    console.log(foo);
}

foo(foo);  // 报错

补充:
var 可以被delete删除，let，const不行

 var name =  123;
delete name;
console.log(name)    // 报错

// let name = 123;
// delete name;
// console.log(name); // 123