预编译作用域作用域链变量提升函数提升闭包

2021-09-01

预编译

G0 & Ao

GO: 页面创建后就会自动创建一个全局对象（Global Object)

 浏览器环境里GO:window;node环境里GO:global

里面存放着许多原始的属性和方法(例如:Arrary;Date;console.log()…..)

AO: 函数在执行前创建的活动对象（Active Object）

一.预编译

例子:

var a = 20
function b() {
    var a = 10
    var c = 20
    console.log(c) //20
	console.log(30)
    function c() {
        console.log(a)
        var a = 40
        console.log(a)
	}
    c() // c is not a function
}
b()

//预编译
GO: {
    a:undefined,
    b:function b() {...}
}
b-AO: {
    a:undefined,
    c:undefined ---> function() {...}
}
c-AO: {
	a:undefined        
}
//解释执行代码
GO: {
    a = 20,
    b:function b() {console.log(30)}
}
b-AO: {
 	a:10,
    c:20
}
//看上面 c已经变成20了,不在是一个函数 所以会报错  c is not a function
c-AO: {
	a:undefined        
}

代码执行前首先会进行预编译
- 查找变量声明，作为GO属性，值赋予undefined；
- 查找函数声明，作为GO属性，值赋予函数体；
执行代码
- 解释一句执行一句
- 执行过程中肯定会修改所在活动对象里面的属性的值(个人理解)

二.作用域

2.1全局作用域

GO: {

}

2.2局部作用域(函数作用域)

AO: {

}

三.作用域链

例如:

var a = 10
function b() {
    var b = 20
	console.log(b)
    function c() {
        console.log(a)
    }
    c()
}
b()

执行此段代码之前,各个函数其实已经在预编译阶段有了自己的作用域链

b函数 b-AO —-> GO
c函数 c-AO —–> b-AO —–> Go
- c执行的时候,由于自己的AO里面没有变量a,会依次向上寻找变量a
- 如果找到就打印结果
- 没有找到就打印undefined (或者报错 a is not defind)

四.变量提升

用关键字 var 声明的变量在预编译阶段会提升到当前所在代码快的最前面

五.函数提升

用function关键字声明的函数在编译阶段也会进行提升

六.闭包

定义:在函数内部被返回的函数并且被保存到外部那么就形成了闭包

闭包列子:

var arr;
function foo() {
	for(var i = 0; i < 10; i++) {
        arr[i] = function() {
        	console.log(i)
		}
	}
	return arr
}

var res = foo()

for(var i = 0; i < arr.length; i++) {
    res[i]()
}

输出结果: 10 10 10 10 10 10 10 10 10 10
原理: 由于函数被保存的数组里面并且被返回出来所以形成了闭包
- 当执行完for循环的时候知识为arr每一个元素赋值为一个函数
- 在函数执行是内部的i才会被赋值此时i已经为10了

解决方案:

var arr;
function foo() {
	for(var i = 0; i < 10; i++) {
        (function(j){
            arr[j] = function() {
        	console.log(j)
			}
        }(i))
	}
	return arr
}

var res = foo()

for(var i = 0; i < arr.length; i++) {
    res[i]()
}

结果: 0 1 2 3 4 5 6 7 8 9

原理: 利用一个立即执行函数让arr的每一个函数与立即执行函数形成一个闭包在arr被执行的时候,就会利用闭包里面的值j