博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
五句话搞定JavaScript作用域
阅读量:5344 次
发布时间:2019-06-15

本文共 2657 字,大约阅读时间需要 8 分钟。

JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕...

一、“JavaScript中无块级作用域”

在Java或C#中存在块级作用域,即:大括号也是一个作用域。

 

public static void main (){    if(1==1){        String name = "seven";    }    System.out.println(name);}// 报错
java

 

public static void Main(){    if(1==1){        string name = "seven";    }    Console.WriteLine(name);}// 报错
C#
function Main(){    if(1==1){        var name = 'seven';    }    console.log(name);}// 输出: seven

 补充:标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域。

二、JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。

 

function Main(){    var innerValue = 'seven';} Main(); console.log(innerValue); // 报错:Uncaught ReferenceError: innerValue is not defined

 

 三、JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。

 

xo = 'alex';  function Func(){    var xo = "seven";    function inner(){        var xo = 'alvin';        console.log(xo);    }    inner();}Func();

 

 

如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:

当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

答案是alvin

四、JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。

示例一:

xo = 'alex'; function Func(){    var xo = "seven";    function inner(){         console.log(xo);    }    return inner;} var ret = Func();ret();// 输出结果: seven

上述代码,在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时,由于其代指的是inner函数,此函数的作用域链在执行之前已经被定义为:全局作用域 -> Func函数作用域 -> inner函数作用域,所以,在执行【ret();】时,会根据已经存在的作用域链去寻找变量。

 示例二:

xo = 'alex'; function Func(){    var xo = "eirc";    function inner(){         console.log(xo);    }    xo = 'seven';    return inner;} var ret = Func();ret();// 输出结果: seven

上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时,在执行【var ret = Func();】时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行【ret();】时,就只能找到“seven”。

示例三:

 

xo = 'alex';
function Bar(){ console.log(xo);} function Func(){ var xo = "seven"; return Bar;} var ret = Func();ret();// 输出结果: alex

 

上述代码,在函数被执行之前已经创建了两条作用域链:

  • 全局作用域 -> Bar函数作用域
  • 全局作用域 -> Func函数作用域

当执行【ret();】时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。

 

 五、声明提前

在JavaScript中如果不创建变量,直接去使用,则报错:

 

console.log(xxoo);// 报错:Uncaught ReferenceError: xxoo is not defined

 

 JavaScript中如果创建值而不赋值,则该值为 undefined,如:

var xxoo;console.log(xxoo);// 输出:undefined

 在函数内如果这么写:

function Foo(){    console.log(xo);    var xo = 'seven';} Foo();// 输出:undefined

 上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。

 

六、面试题案例:

    
Title

得到结果:

 

 

 

 代码:有var that = this,   输出:“my object”
没有var that = this, 输出: this window 

转载于:https://www.cnblogs.com/renfanzi/p/5664008.html

你可能感兴趣的文章
UVALive 5908 更新一下线段相交模板
查看>>
[转]开发Visual Studio风格的用户界面--MagicLibrary使用指南
查看>>
DS1-3
查看>>
Oracle的四种连接方式【转载】
查看>>
信息系统项目管理师论文范文 论文写作指导 论信息系统项目进度管理
查看>>
第一周作业javaee strainmap
查看>>
Ubuntu查看CPU占用和使用情况
查看>>
201521123097《Java程序设计》第六周学习总结
查看>>
正则写计算器
查看>>
java指令备忘
查看>>
ios学习--第三方框架-MBProgressHUD以及扩展
查看>>
RGB和HSB的转换推算
查看>>
Android 4.2蓝牙介绍
查看>>
MyBatis的底层实现原理
查看>>
如何实现基于ssh框架的投票系统的的质量属性
查看>>
Git的学习和使用
查看>>
[hdu1506]单调队列(栈)
查看>>
02-职业/工作词汇(English)
查看>>
桥接模式
查看>>
SQL Server Profiler:使用方法和指标说明
查看>>