菜鸟看前端（作用域和变量提升）

作用域

概念

作用域：一个变量可以起作用的范围，分为全局作用域，局部作用域，ES6中新增的块级作用域

作用域的种类

1. js中首先有一个最外层的作用域,为全局作用域
2. js可以通过函数来创建一个独立的作用域称为函数作用域,函数可以嵌套,作用域也可以嵌套
3. ES6新增了块级作用域{},比如if{} for{},只适用于const let

作用域链

自由变量向上级一层一层寻找,直到找到为止,最高找到全局作用域.

自由变量

概念: 当前作用域没有定义的变量

1. 一个变量在当前作用域没有定义,但被使用啦
2. 向上级作用域,一层一层一次寻找,直到找到为止
3. 如果全局作用域都没有找到,则报错xx is not defined

作用域面试题

// 点击输出下标
let a
for (var i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        console.log(i)
    })
    document.body.appendChild(a)
}

点击效果

分析

修改

let a
for (let i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        console.log(i)
    })
    document.body.appendChild(a)
}

修改后效果

作用域在定义位置已经定义完毕，而不是调用位置，所以一下输出的都是100

变量提升

var声明的变量，function声明的函数存在变量提升
let const 不会变量提升

var声明的变量会把声明提前

console.log(a) // undefined
var a = 10
console.log(a) // 10

函数声明也会把整个函数提升到作用域的最上面

n('jack')；//jack
function fn (name){
console.log(name)
}

函数表达式不能变量提升,只会把申明的var fn 提升到作用域的最顶端

fn("jack");//报错
var fn = function(name) {
console.log(name);
};

变量提升面试题

		// 函数提升
		var x = 30;

		function test() {
			alert(x); // 函数
			var x = 10;
			alert(x); // 10
			x = 20;

			function x() {

			};
			alert(x); // 20
		}
		test();