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

本文共 2602 字,大约阅读时间需要 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#

 

在JavaScript语言中无块级作用域

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)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

四、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
console.log(window.xxoo);// 输出:undefined

 

在函数内如果这么写:

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

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

 

 
原文连接

 

 
 
 

 

转载于:https://www.cnblogs.com/hjbky/p/8441369.html

你可能感兴趣的文章
java之多态的使用
查看>>
python 第八章 r w a 等文件操作
查看>>
软件工程第二次作业
查看>>
TCP/IP
查看>>
c++ 查找容器中符合条件的元素,并返回iterator(find_if)
查看>>
下载安装Android sdk tools
查看>>
C++ 我想这样用(七)
查看>>
poj-2376 Cleaning Shifts (排序+贪心)
查看>>
mssql 创建触发器
查看>>
2.python数据结构的性能分析
查看>>
DataTables给表格绑定事件
查看>>
jquery操作select(取值,设置选中)
查看>>
图的遍历
查看>>
在Android中自定义捕获Application全局异常,可以替换掉系统的强制退出对话框(很有参考价值与实用价值)...
查看>>
C语言第三次博客作业---单层循环结构
查看>>
DevExpress 程序运行后 layoutView 卡片大小发生变化
查看>>
WPF DevExpress 中GridControl如何设置选中单元格的Style
查看>>
查看python库文档
查看>>
Python网络编程_抓取百度首页代码(注释详细)
查看>>
js动态插入标签代码(insertAdjacentHTML)
查看>>