您的位置是:网站首页>Javascript编程Javascript编程

介绍JavaScript作用域和闭包

少儿编程网2022-01-21 15:27:58Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介免费学习推荐:javascript视频教程JavaScript作用域和闭包在javascript中,如果对作用域和闭包弄不清楚,写代码就会出很多问题,今天对作用域和闭包做一个总结。作用域作用域主要分为全局作用域和局部作用域,其中局部作用域分为函数作用域和块级作用域。全局作用域如果你在大括号({})或

www.pxcodes.com
zNO少儿编程网-https://www.pxcodes.com

免费学习推荐:javascript视频教程zNO少儿编程网-https://www.pxcodes.com

JavaScript作用域和闭包zNO少儿编程网-https://www.pxcodes.com

在javascript中,如果对作用域和闭包弄不清楚,写代码就会出很多问题,今天对作用域和闭包做一个总结。zNO少儿编程网-https://www.pxcodes.com

作用域zNO少儿编程网-https://www.pxcodes.com

作用域主要分为全局作用域和局部作用域,其中局部作用域分为函数作用域和块级作用域。zNO少儿编程网-https://www.pxcodes.com

全局作用域zNO少儿编程网-https://www.pxcodes.com

如果你在大括号({})或者函数的外面定义了一个变量,那么它就是一个全局的变量,它的作用域就是全局作用域。zNO少儿编程网-https://www.pxcodes.com

let a = 1function fun1 () {
	console.log(a) // 结果:1
	function fun2 () {
		console.log(a) // 结果:1
	}
	fun2()}fun1()console.log(a) // 结果:1

变量a就是定义在**外层,它就能在全局任意地方被使用。
值得注意的是,在同一级作用域中,使用let或const声明变量的时候第二个同名会报错,而使用var声明变量的时候,会覆盖前面的变量;zNO少儿编程网-https://www.pxcodes.com

局部作用域zNO少儿编程网-https://www.pxcodes.com

如果你在函数或者大括号({})内定义的变量,就是局部作用域的变量,它能够在该级作用域级任意下级作用域中使用。zNO少儿编程网-https://www.pxcodes.com

function fun1() {
    let a = 100
    console.log(a) // 结果: 100
    function fun2 () {
		console.log(a) // 结果:100
	}
	fun2()}fun1()console.log(a) // 结果: a is not defined

a只能在fun1函数内部包括内部函数中使用,一旦出了fun1的范围就无法使用该变量了。zNO少儿编程网-https://www.pxcodes.com

自由变量的查找zNO少儿编程网-https://www.pxcodes.com

一个变量在当前作用域没有定义却被使用了,就是自由变量。它的执行规则是怎样的呢?
自由变量的查找是向上级作用域,一层一层以此寻找,直至找到为止。如果全局作用域都没有找到,则报错xx is not defined。zNO少儿编程网-https://www.pxcodes.com

let a = 100function fun1 () {
    let a1 = 2

    function fun2 () {
        let a2 = 3
        let a = 0

        function fun3 () {
            let a3 = 4
            a++
            console.log(a + a1 + a2 + a3) // 结果: 10
        }

        fun3()
    }

    fun2()}fun1()console.log(a) // 结果: 100

正如上述代码所示,在fun3函数内,a和a1、 a2都没有定义,但被使用了,在执行的时候,它会往上级作用域中查找,从而找到它们的值。值得注意的一点的是,在全局作用域和fun2的函数中我们都定义了a,但是在fun3中使用的fun2中定义的值,外面的使用的全局作用域的值,也就是说,它往上级查找的时候,只要查找到就会停止查找,会就近使用。作用域间也不会互相干扰。(它们里面存在的变量提升和函数提升可以查看我的另一篇博客有专门的总结)zNO少儿编程网-https://www.pxcodes.com

闭包zNO少儿编程网-https://www.pxcodes.com

闭包是作用域应用的特殊情况,主要有两种表现:(1)函数作为参数被传递。(2)函数作为返回值被返回。zNO少儿编程网-https://www.pxcodes.com

/**
 * 函数作为返回值
 */function create () {
    const a1 = 100
    return function () {
        console.log(a1)
    }}const fn = create()const a1 = 200fn() // 结果: 100/**
 * 函数作为参数
 */function print (fn) {
    const a2 = 300
    fn()}const a2 = 400function fn1 () {
    console.log(a2)}print(fn1) // 结果: 400

上面代码演示了函数的两种表现,值得注意的是:在闭包中,自由变量的查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方!zNO少儿编程网-https://www.pxcodes.com

闭包的实际应用场景zNO少儿编程网-https://www.pxcodes.com

(1)隐藏数据, 如做一个简单的cache工具
(2)函数防抖与节流zNO少儿编程网-https://www.pxcodes.com

相关免费学习推荐:javascript(视频)zNO少儿编程网-https://www.pxcodes.com

以上就是介绍JavaScript作用域和闭包的详细内容,更多请关注少儿编程网其它相关文章!zNO少儿编程网-https://www.pxcodes.com

来源:php中文网zNO少儿编程网-https://www.pxcodes.com

www.pxcodes.com

相关文章:

支持一下 ( )

介绍JavaScript作用域和闭包

      匿名评论
    • 评论
    人参与,条评论
    介绍JavaScript作用域和闭包

微信公众号

免费视频教程

先知道