首页
周期介绍
周期发展
周期优势
周期市场
周期前景
周期资源

Web前端JS中作用域及作用域链的真面

一、作用域

1定义

作用域是指在程序中定义变量的区域,该位置决定了变量的生命周期。简言之作用域就是变量与函数的可访问范围,即作用域控制着变量和函数的可见性和生命周期。

2分类

在ES6阶段之前,作用域分为两种:全局作用域和函数作用域;进行ES6之后,作用域分为:全局作用域、函数作用域和块级作用域。

1.全局作用域

在该作用域中的对象在代码的任何地方都能访问,其生命周期伴随着页面的生命周期。例如以下内容均在全局作用域中。

(1)window上的属性(在浏览器中)

console.log(window.location.href);//页面地址

(2)最外层的函数

functiontestFun(){console.log(testFun);}testFun();

(3)最外层定义的变量

letval1=10;constval2=20;varval3=30;

(4)未定义直接赋值的变量

val4=40;

(5)js规定的全局对象的属性,三个值(Infinity、NaN、undefined)、九个函数(parseInt、parseFloat、decodeURI、encodeURI……)、一些构造器(Date、Array等)、四个用于当做命名空间的对象(Atomics、JSON、Math、Reflect)。

Math.sin(Math.PI/2);;constdate=newDate();2.函数作用域

在函数内部定义的变量或者函数,并且定义的变量或者函数只能在函数内部被访问。在函数执行结束之后,函数内部定义的变量会被销毁。

functiontest(){varval1=10;functionfun1(){console.log(fun1);}console.log(val1);//10fun1();//fun1}test();//console.log(val1);//val1isnotdefined//fun1();//fun1isnotdefined块级作用域

在ES6阶段,出现了块的概念,新增了块级作用域,同时新增了let、const命令。块级作用域简言之就是使用一对大括号{}包裹的一段代码,通过单独的大括号、if块、while块、for块、try/catch/finallyd等都会产生块级作用域。(对于let和const在块级作用域的特征可见前端百题斩)

//单一括号包括的块{}//if语句if(flag){}//for语句for(leti=0;i10;i++){}//……

二、作用域链

1定义

在每个执行上下文的变量环境中,都包含一个外部引用(成为outer),用来指向外部的指向上下文。当在查找一个变量的时候,如果在当前的变量环境中没有找到,js引擎会继续在outer所指向的执行上下文中查找,把这个查找的链条称为作用域链。(作用域链可以理解为一组对象列表,包含父级和自身的变量对象,因此我们便能通过作用域链访问到父级里声明的变量或者函数。)

2组成

作用域链由两部分组成,分别是[[scope]]属性和AO。

[[scope]]属性:指向父级变量对象和作用域链,也就是包含了父级的[[scope]]和AOAO:自身活动对象,也就是该执行上下文中的变量对象。

扩展:如此[[scope]]包含[[scope]],便自上而下形成一条链式作用域。

3查找规则从当前的执行作用域开始查找变量;如果在当前作用域中找不到该变量,则向上一级进行查找;继续向上一层查找,直到最外层的全局作用域。4实战

下面用一个简单的例子来演示该作用域链,以进一步理解作用域链。

varval1=10;functionfun1(){varval2=20;functionfun2(){varval3=30;console.log(val1+val2+val3);}fun2();}fun1();

总结:结合代码和上述执行上下文的流程图,当执行到console.log(val1+val2+val3);时会在fun2函数作用域中找到val3变量,在fun1函数作用域中找到变量val2,在全局作用域中找到变量val1,最终与该语句相关的三个变量均获取到。其中fun2函数作用域、fun1函数作用域、全局作用域就构成了一条作用域链。

W

想了解更多精彩内容,快来

转载请注明:http://www.usdjo.com/kfal/23900.html

  • 上一篇文章:
  • 下一篇文章: 没有了