学习JavaScript中的闭包

时间:2021-08-02
本文章向大家介绍学习JavaScript中的闭包,主要包括学习JavaScript中的闭包使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一、闭包

关于什么是闭包,官方及不同的书籍中都给出了表达不太一样的概念。在自己梳理概念的过程中,也看了很多前辈的学习心得,就我个人而言,我觉得最好理解的是js高程里给的概念:闭包是指有权访问另一个函数作用域中的变量的函数

在JavaScript中,我们知道js作用域中访问变量的权利是由内向外的,也就是内部作用域可以从当前作用域下开始一层一层向外获得外层作用域的变量,但是反之则不能。但是出于种种原因,我们有时候也希望能访问函数内部的变量,闭包就是解决这一需求的,它的本质就是在一个函数内部再定义另一个函数

基于闭包的概念,就可以理解闭包的作用了:

1.可以在函数的外部访问到函数内部的变量

2.让这些变量始终保存在内存中,不会被垃圾收集机制清除

function fun(){
    var num=0;
    return num+=1;
}
var fn1=fun()
console.log(fn1)//1
console.log(fn1)//1

这个例子中两次打印结果都是1,因为变量num属于局部变量,每次fun执行完之后它就把属于自己的变量num连同自己一起销毁。

引入闭包:

function fun(){
    var num=0;
    return function(){
        return num+=1;
    }
}
var fn1=fun()
console.log(fn1())//1
console.log(fn1())//2

这里,匿名函数作为fun的返回值赋值给了fn1,且匿名函数内部引用了fn里的变量num,所以变量num无法被销毁,会一直保存在内存中直到fn1被销毁。

再看一个之前我踩过坑的例子

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());//The window--this指向window,不存在闭包

这一段代码输出The window。因为getNameFunc的返回值是一个匿名函数,匿名函数的执行环境具有全局性,它的this一般指向window,在上面这段代码中匿名函数中的this指向的就是window。

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    var _this = this;
    return function(){
      return _this.name;
    };
  }
};
console.log(object.getNameFunc()());//My Object--this指向object,存在闭包

上面这段代码的输出是My Object。我们知道,如果想要匿名函数的this能够执行当前的Object对象,就要更改this。在这段代码中,我们在匿名函数外添加了一行var _this = this用于更改this的指向。这里的getNameFunc相当于一个闭包。

这个例子也可以体现出闭包的作用:可以延长变量的使用范围

二、闭包的使用场景

原文地址:https://www.cnblogs.com/hwinter/p/15090937.html