目录
三、闭包的使用场景
首页 web前端 前端问答 es6有闭包吗

es6有闭包吗

Nov 21, 2022 pm 06:57 PM
javascript es6 闭包

es6有闭包。在es6中,在一个函数内部创建另一个函数,把内嵌的函数称为闭包,它可以访问外部函数的局部变量;简单来说,闭包指有权访问另一个函数作用域中变量的函数。闭包的主要作用:延伸了变量的作用范围。由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。

es6有闭包吗

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

一、变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量。

  • 函数内部可以使用全局变量。

  • 函数外部不可以使用局部变量。

  • 当函数执行完毕,本作用域内的局部变量会销毁。

二、什么是闭包?

在es6中,闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解:一个作用域可以访问另外一个函数内部的局部变量。

闭包:在一个函数内部创建另一个函数,把内嵌的函数称为闭包,它可以访问外部函数的局部变量

	// fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    function fn(){
        let num = 10
        function fun(){
            console.log(num)
        }
        fun()
    }
    fn() //10
登录后复制

闭包的主要作用:延伸了变量的作用范围。

	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法一: 先定义再返回函数
        function fun(){
            console.log(num)
        }
        return fun //返回 fun函数
    }
    let f = fn()
    f() //10
登录后复制
	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法二: 直接返回函数
        return function(){
            console.log(num)
        }
    }
    let f = fn()
    f() //10
登录后复制

三、闭包的使用场景

(1)用来返回值

//以闭包的形式将 name 返回
function fun(){
    let name = 'woniu'

    //定义闭包
    return function f1(){
        return name
    }
}

let ft = fun() //因为fun函数的返回值是f1函数,ft实质是一个函数

let na = ft()  //调用ft函数,实际调用的就是f1函数
console.log(na); //woniu
登录后复制

(2)函数赋值:在函数内部定义函数表达式

var f2
function fn(){
    let name = '曹操'
    f2 = function(){ //闭包,将外部函数的name变量作为闭包的返回值
        return name
    }
}
fn() //必须先调用fn函数,否则f2不是一个函数
console.log(f2());  //曹操
登录后复制

(3)把闭包作为函数的参数

function fn(){
    let name = '蜗牛学苑'

    //定义闭包
    return function callback(){
        return name
    }
}

let f1 = fn() //将fn函数的返回值callback赋给f1
function f2(temp){
    console.log(temp()) //输出temp函数的返回值,实际调用了闭包callback
}
//调用f2函数:将f1作为实参传递给temp
f2(f1)
登录后复制

(4)立即执行函数中使用闭包

//立即执行函数
(function(){
    let name = '蜗牛学苑'
    let f1 = function(){
        return name
    }

    fn2(f1) //调用fn2函数,将闭包f1作为实参传递给fn2函数
})()

function fn2(temp){  //temp是一个形参,接收f1
    console.log(temp()); //对temp的调用,实际调用的是闭包f1
}
登录后复制

(5)循环赋值

(function(){
    for (let i = 1; i <= 10; i++) {
        (
            function(j){
                setTimeout(function(){
                    console.log(j);
                },j*1000)
            }
        )(i)
    }
})()
登录后复制

(6)将闭包封装到对象中

function fun(){
    let name = '蜗牛学苑'
    setName = function(na){ //setName是闭包,用来设置外部函数的变量值
        name = na
    }
    getName = function(){ //getName是闭包,用来返回外部函数的变量值
        return name 
    }

    //外部fun函数的返回值,将闭包封装到对象中返回
    return {
        setUserName:setName,
        getUserName:getName
    }
}
let obj =fun() //将fun函数返回值(对象)赋给obj
console.log('用户名:',obj.getUserName()) //蜗牛学苑
obj.setUserName('石油学苑')
console.log('用户名:',obj.getUserName()) //石油学苑
登录后复制

(7)通过闭包实现迭代

let arr = ['aa','bb','cc']
function fn(temp){ //外部函数的返回值是闭包
    let i = 0
    //定义闭包:迭代获取数组元素并返回
    return function(){
        return temp[i++] || '数组已经遍历结束'
    }
}

let f1 = fn(arr)
console.log(f1()) //aa
console.log(f1()) //bb
console.log(f1()) //cc
console.log(f1()) //数组已经遍历结束
登录后复制

(8)、首次区分(相同的参数,函数不会重复执行)

var fn = (function(){
    var arr = [] //用来缓存的数组
    return function(val){
        if(arr.indexOf(val) == -1){ //缓存中没有则表示需要执行
            arr.push(val) //将参数push到缓存数组中
            console.log('函数被执行了',arr);  //这里写想要执行的函数
        } else {
            console.log('此次函数不需要执行');
        }
        console.log('函数调用完打印一下,方便查看缓存的数组:',arr);
    }
})()

fn(10)
fn(10)
fn(1000)
fn(20)
fn(1000)
登录后复制

注意

(1)搞清除谁是闭包函数

(2)分清楚闭包的返回值、外部函数的返回值

四、闭包总结

  • 闭包是什么:闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)。

  • 闭包的作用是什么:延伸变量的作用范围。

没有产生闭包,因为并没有局部变量,所以访问到的是全局变量 The Window

let name = &#39;The Window&#39;
    let object = {
        name: &#39;My Object&#39;,
        getNameFunc(){
            return function(){
                return this.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //The Window
登录后复制

产生了闭包:因为 this 在函数内部被赋值给了 that,指向的是 object 这个对象。

	let name = &#39;The Window&#39;
    let object = {
        name: &#39;My Object&#39;,
        getNameFunc(){
            let that = this
            return function(){
               return that.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //My Object
登录后复制

使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

【推荐学习:javascript视频教程

以上是es6有闭包吗的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

C++ lambda 表达式中闭包的含义是什么? C++ lambda 表达式中闭包的含义是什么? Apr 17, 2024 pm 06:15 PM

在C++中,闭包是能够访问外部变量的lambda表达式。要创建闭包,请捕获lambda表达式中的外部变量。闭包提供可复用性、信息隐藏和延迟求值等优势。它们在事件处理程序等实际情况中很有用,其中即使外部变量被销毁,闭包仍然可以访问它们。

C++ Lambda 表达式如何实现闭包? C++ Lambda 表达式如何实现闭包? Jun 01, 2024 pm 05:50 PM

C++Lambda表达式支持闭包,即保存函数作用域变量并供函数访问。语法为[capture-list](parameters)->return-type{function-body}。capture-list定义要捕获的变量,可以使用[=]按值捕获所有局部变量,[&]按引用捕获所有局部变量,或[variable1,variable2,...]捕获特定变量。Lambda表达式只能访问捕获的变量,但无法修改原始值。

C++ 函数中闭包的优点和缺点是什么? C++ 函数中闭包的优点和缺点是什么? Apr 25, 2024 pm 01:33 PM

闭包是一种嵌套函数,它能访问外层函数作用域的变量,优点包括数据封装、状态保持和灵活性。缺点包括内存消耗、性能影响和调试复杂性。此外,闭包还可以创建匿名函数,并将其作为回调或参数传递给其他函数。

解决闭包导致的内存泄漏问题 解决闭包导致的内存泄漏问题 Feb 18, 2024 pm 03:20 PM

标题:闭包引起的内存泄漏及解决方法引言:闭包是JavaScript中一个非常常见的概念,它可以让内部函数访问外部函数的变量。然而,闭包在使用不当的情况下可能导致内存泄漏。本文将探讨闭包引起的内存泄漏问题,并提供解决方法及具体代码示例。一、闭包引起的内存泄漏问题闭包的特性是内部函数可以访问外部函数的变量,这意味着在闭包中引用的变量不会被垃圾回收。如果使用不当,

函数指针和闭包对Golang性能的影响 函数指针和闭包对Golang性能的影响 Apr 15, 2024 am 10:36 AM

函数指针和闭包对Go性能的影响如下:函数指针:稍慢于直接调用,但可提高可读性和可复用性。闭包:通常更慢,但可封装数据和行为。实战案例:函数指针可优化排序算法,闭包可创建事件处理程序,但会带来性能损失。

闭包在 Java 中是如何实现的? 闭包在 Java 中是如何实现的? May 03, 2024 pm 12:48 PM

Java中的闭包允许内部函数访问外部的作用域变量,即使外部函数已经退出。通过匿名内部类实现,内部类持有一个外部类的引用,使外部变量保持活动。闭包增强了代码灵活性,但需要注意内存泄漏风险,因为匿名内部类对外部变量的引用会保持这些变量的活动状态。

PHP 函数的链式调用和闭包 PHP 函数的链式调用和闭包 Apr 13, 2024 am 11:18 AM

是的,可以通过链式调用和闭包优化代码简洁性和可读性:链式调用可将函数调用链接为一个流畅接口。闭包可创建可重用代码块,并在函数外部访问变量。

golang函数闭包在测试中的作用 golang函数闭包在测试中的作用 Apr 24, 2024 am 08:54 AM

Go语言函数闭包在单元测试中发挥着至关重要的作用:捕获值:闭包可以访问外部作用域的变量,允许在嵌套函数中捕获和重用测试参数。简化测试代码:通过捕获值,闭包消除了对每个循环重复设置参数的需求,从而简化了测试代码。提高可读性:使用闭包可以组织测试逻辑,使测试代码更清晰、更易于阅读。

See all articles