JS闭包原理与三方库实现原理

发布时间 2023-06-04 22:57:33作者: 黄河大道东

一、闭包

原理:外层匿名函数自调用返回其内部作用域某个成员的引用(变量访问权限私有化)

条件:

(1)最外层必须要是匿名函数 + 匿名函数自调用

(2)自调用必须返回外层匿名函数作用域中的某个对象(函数/匿名函数/对象)的引用

(3)将这个引用保存到一个全局变量中,对外提供顶层访问入口

作用:

(1)访问匿名作用域中的方法或者属性,都必须通过匿名函数自调用返回的引用来操作

(2)隔绝作用域,使匿名作用域中的内容不能被直接访问或操作

使用场景:

(1)著名的jquery框架就是这样实现的

(2)全局计数器

(3)......

// 示例一
var a = (function () {
    var count = 0;
    return function () {
        return ++count
    }
})()

// 示例二
var b = (function () {
    var count = 0;
    function c() {
        return ++count
    }
    return c
})()

二、开源JS库基本原理

开源的第三方js库中函数开头的"!"是一元运算符的意思,用任何一元运算符代替都可以

作用:在三方JS库被浏览器导入页面时立即对其内部匿名函数自调用的时候省去一对括号。

  • 没有使用一元运算符的格式:(function(){})()
  • 使用一元运算符后的格式:!function(){}()

JS运算符:https://www.cnblogs.com/hhddd-1024/p/14060660.html

例如这个库:https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.js

!+-function () {
    console.log("库被加载了,并且函数可以缺省一对括号")
}()

// 向自调用的匿名函数传参
var d = (function (value) {
    console.log(value)
    var count = 0;
    return function () {
        return count++
    }
})("这是匿名函数传参的地方")