上一章:JS的数据类型 传送门:
好!话不多少,我们就开始吧。对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~哈哈哈
我们前端的代码一般就三个部分组成html + css +js,一般呢我们的JS又会放在最后执行。
执行上下文:
所谓的执行上下文,就是JS代码执行的环境。Javascript中代码的运行环境分为以下三种:
全局上下文 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境。
函数上下文 - 当执行一个函数时,运行函数体中的代码。
Eval上下文 - 在Eval函数内运行的代码。
这个和作用域有点像。
每次调用一个函数将会创建一个新的执行上下文会,被添加到作用域链的顶部。作用域和执行上下文之间最大的区别是: 执行上下文在运行时确定,随时可能改变;作用域在定义时确定,永远不会改变。其实上面那些看看就好,直接看代码吧。
JS代码在执行之前会先全局中变量提升、函数声明。在函数中变量提升、函数声明(this、函数参数也会提升,函数中的变量提升的范围是这个函数的内部)
变量提升:变量赋值的过程:声明---初始化---赋值
举例子:函数内部的变量提升(全局的变量提升也是同理)function fn(){ console.log(x);//undefined var x = 1; console.log(x);//1 } fn();
这里我们从针对变量x来解说:
1.在执行fn时,为fn创建一个执行环境。(fn函数的执行上下文,也就是在fn这个函数范围内)2.找到fn函数执行上下文中(fn函数范围内),所有用var声明的变量。3.将这些变量初始化为undefined。4.开始执行代码。5.把1赋值给变量x。相当于如下这样:
function fn(){ //把用var声明的变量,提升到顶部,并初始化为undefined var x =undefined; //开始执行代码。 console.log(x);//undefined //把1赋值给变量x。 var x = 1; console.log(x);//1 } fn();
函数声明:
cat();//123 function cat(){ console.log(123); } cat();//123
1.找到所有用function声明的变量,并在环境中创建这些变量。
2.将这些变量初始化并赋值为function(){xxx}3.在环境中从上往下开始执行代码。相当于如下这样:
//1.找到所有用function声明的变量,并在环境中创建这些变量。 //2.将这些变量初始化并赋值为function(){xxx} var cat = function (){ console.log(123); } //3.在环境中从上往下开始执行代码。 cat();//123 cat();//123
这个就是函数声明,在代码执行前,会把function提到顶部。所以如果不行代码,代码块里即使有错误也不会报出来,只有执行时才会运行代码内部东西。
看到这里应该有个初步了解了,那么来看看下面的。加点难度,加深了解。
3543541
为什么fn中的globle拿不到呢?而fn2的globle能拿到值呢?
运用上面学习的知识来分析一波。上面代码在执行前,会经过变量提升、函数声明,所以在准备执行前的代码是这样的://函数声明会在最最顶端 var fn = function (){ console.log(g); } var fn2 = function (){ console.log(g); } //执行函数和变量按照相对位置排列 //执行的相对位置不能变,这3个是在变量g之前执行的就要一直在g之前执行 fn2(); fn(); fn(); var g = undefined; console.log(g);//undefined var g = 'global'; console.log(g);//global //执行的相对位置不能变,这3个是在变量g之后执行的就要一直在g之后执行 fn2(); fn2(); fn();
这里我们可以总结出一点规律:
1.函数声明会在最最顶端2.变量提升,只是在自己的范围内提升3.执行的相对位置不能变和变量按照执行上下文之前的相对位置排列。4.函数执行时,按照执行位置查找变量作用域只会向上查找。下一回:变量作用域与闭包