频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
作用域及作用域链简介
2019-02-13 13:52:37           
收藏   我要投稿

作用域

作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,

JavaScript中变量的作用域有:全局作用域和局部作用域

全局作用域:任何函数的内部都可以访问的到

<script> 

? ? ?var oute = "outer";

? ? function fn(){

? ? ? ? ?console.log(oute);

? ? }

? ? fn();//result:outer 

</script>

局部作用域:一般只在固定的代码片段内可访问到,而对于函数外部是无法访问的?

<script>

? ? ? function fn(){

? ? ? ? ? console.log(inner); //undefined

? ? ? ? ?var inner = "inner";

? ? ? ? ?console.log(inner); //inner

? ? ? }

? ? ? fn();

? ? ? ? console.log(inner);// ReferenceError: inner is not defined

</script>

注意:只要函数内定义了一个局部变量,函数在解析的时候都会将这个变量“提前声明”

<script>

? ? ? function fn(){

? ? ? ? ? var inner;?//提前声明了局部变量

? ? ? ? ? console.log(inner); //undefined

? ? ? ? ? inner = "inner";

? ? ? ? ? console.log(inner); //inner

? ? ? }

? ? ? fn();

? ? ? ? console.log(inner);// ReferenceError: inner is not defined

</script>

函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

<script>
? ? ? ?function fn(){
? ? ? ? ? ?inne = "inner";
? ? ? }
? ? ?fn();
? ? ?console.log(inne);//inner
</script>

块级作用域

在java中作用域就是一个{}花括符是块级作用域,而javaScript没有块级作用域,只有函数级作用域。

ES6中的作用域

由于ES5中存在很多问题,所以在ES6中,用let替换了var的声明,不过为了兼容ES5你还是可以使用以前的var。不过还是建议使用let?
let为js添加了新的作用域就是块作用域。

?<script>
      for(let i=0;i<10;i++){
         console.log(i)? ?//0,1,2,3,4,5,6,7,8,9
       }
? ? console.log(i)? ?//i is not defined
</script>

我们就完全可以使用java等语音,来理解变量的声明了,而且使用let声明的变量,再声明是不可以使用的

a=3

?let a =10;

?alert(a)? //?a is not defined

let 不像var那样会发生'变量提升'现象,所以,变量一定要在生命后使用,否则报错

ES6明确规定,如果区块内存在let和const命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域,在语法上称为'暂时性死区'

作用域链(Scope Chain)

红宝书上说:作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问

我的理解就是,根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问。

name="1";
function t(){
    var name="2";
    function s(){
        var name="3";
        console.log(name);
    }
    function ss(){
        console.log(name);
    }
    s();  //3
    ss(); //2
}
t();

延长作用域链

with语句:with语句主要用来临时扩展作用域链,将语句中的对象添加到作用域的头部

person={name:"lhh",age:20,height:165,friend:{name:"wtw",age:21}};
with(person.friend){
    console.log(name); //wtw
}
点击复制链接 与好友分享!回本站首页
上一篇:Object.assign合并多个JavaScript的对象教程
下一篇:前端知识点总结分享
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站