关于javascript:深入理解JavaScript闭包之闭包的使用场景

本篇文章是上一篇 深刻了解 JavaScript 闭包之什么是闭包文章的下篇，闭包的应用场景。

根底概念

1. 函数作用域

定义在函数中的参数和变量在函数内部是不可见的。

2. 块级作用域（公有作用域）

任何一对花括号中的语句都属于一个快，在这之中的所有变量在代码块外都是不可见的，咱们称之为块级作用域。大多数类 C 语言都领有块级作用域，JS却没有，比方在 for 循环中定义的 i，出了for 循环还是有这个 i 变量。

3. 公有变量

公有变量包含函数的参数，局部变量和函数外部定义的其余函数。

4. 动态公有变量

公有变量是每个实例都是独立的，而动态公有变量是共用的。

5. 特权办法

有权拜访公有变量的办法称为特权办法。

6. 单例模式

确保一个类只有一个实例，即屡次实例化该类，也只返回第一次实例化后的实例对象。该模式不仅能缩小不必要的内存开销，并且能够缩小全局的函数和变量抵触。
能够来看一个简略的例子：

let userInfo = {getName() {},
    getAge() {},
}

下面代码中，应用对象字面量创立的一个获取用户信息的对象。全局只裸露了一个 userInfo 对象，比方获取用户名，间接调用 userInfo.getName()。userInfo 对象就是单例模式的体现。如果把 getName 和 getAge 定义在全局，很容易净化全局变量。命名空间也是单例模式的体现。平时开发网站中的登录弹窗也是一个很典型的单例模式的利用，因为全局只有一个登录弹窗。更多的能够看从 ES6 重新认识 JavaScript 设计模式(一): 单例模式这边文章。

7. 构造函数模式

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {console.log(obj.name);
    }
}

const person1 = new Person('litterstar', 18);
console.log(person1);

特点：

1. 能够应用 constructor 或 instanceof 辨认对象实例的类型
2. 应用 new 来创立实例

毛病：

1. 每次创立实例时，每个办法都要被创立一次

8. 原型模式

function Person() {}

Person.prototype.name = 'litterstar';
Person.prototype.age = 18;
Person.prototype.sayName = function () {console.log(this.name);
}
const person1 = new Person();

特点：
办法不会被反复创立

毛病：

1. 不能初始化实例参数
2. 所有的属性和办法都被实例共享

构造函数模式 和 原型模式

闭包的利用场景

1. 模拟块级作用域

比方咱们能够应用闭包能使上面的代码依照咱们预期的进行执行（每隔 1s 打印 0,1,2,3,4）。

for(var i = 0; i < 5; i++) {(function(j){setTimeout(() => {console.log(j);
        }, j * 1000);
    })(i)
}

咱们应该尽量避免往全局作用域中增加变量和函数。通过闭包模仿的块级作用域

2. 公有变量

JavaScript 中没有公有成员的概念，所有属性都是私有的。然而有公有变量的概念，任何在函数中定义的变量，都能够认为是公有变量，因为在函数的内部不能拜访这些变量。公有变量包含函数的参数，局部变量和函数外部定义的其余函数。

来看上面这个例子

function add(a, b) {
    var sum = a + b;
    return sum;
}

在 add 函数外部，有 3 个公有变量，a, b, sum。只能在函数外部拜访，函数里面是拜访不到它们的。然而如果在函数外部创立一个闭包，闭包能够通过本人的作用域链就能够拜访这些变量。所以利用闭包，咱们就能够 创立用于拜访公有变量的私有办法（也称为特权办法）。

有两种在对象上创立特权的办法。
第一种，在构造函数中定义特权办法

function MyObject() {
    // 公有变量和公有函数
    var privateVariable = 10;
    function privateFunction() {return false;}
    // 特权办法
    this.publicMethod = function() {
        privateVariable++;
        return privateFunction;
    }
}

这个模式在构造函数外部定义了公有变量和函数，同时创立了可能拜访这些公有成员的特权办法。可能在构造函数中定义特权办法，是因为特权办法作为闭包有权拜访在构造函数中定义的所有变量和函数。
下面代码中，变量 privateVariable 和函数 privateFunction() 只能通过特权办法 publicMethod()来拜访。在创立 MyObject 实例后，只能应用 publicMethod来拜访 变量 privateVariable 和函数 privateFunction()

第二种，利用公有和特权成员，能够暗藏哪些不应该被间接批改的数据。

function Foo(name){this.getName = function(){return name;};
};
var foo = new Foo('luckyStar');
console.log(foo.name); //  => undefined
console.log(foo.getName()); //  => 'luckyStar'

下面代码的构造函数中定义了一个特权办法 getName(), 这个办法能够在构造函数里面应用，能够通过它拜访外部的公有变量 name。因为该办法是在构造函数外部定义的，作为闭包能够通过作用域链拜访 name。公有变量 name 在 Foo的每个实例中都不一样，因而每次调用构造函数都会从新创立该办法。

在构造函数中定义特权办法的毛病就是你必须应用构造函数模式。之前一篇文章 JavaScript 的几种创建对象的形式 中提到构造函数模式会针对每个实例创立同样一组新办法，应用动态公有变量实现特权能够防止这个问题。

3. 动态公有变量

创立特权办法也通过在公有作用域中定义公有变量或函数来实现。

(function() {
    var name = '';
    //
    Person = function(value) {name = value;}
    Person.prototype.getName = function() {return name;}
    Person.prototype.setName = function(value) {name = value;}
})()

var person1 = new Person('xiaoming');
console.log(person1.getName()); // xiaoming
person1.setName('xiaohong');
console.log(person1.getName()); // xiaohong

var person2 = new Person('luckyStar');
console.log(person1.getName()); // luckyStar
console.log(person2.getName()); // luckyStar

下面代码通过一个匿名函数实现块级作用域，在块级作用域中 变量 name 只能在该作用域中拜访，同样的通过闭包 (作用域链) 的形式实现 getName 和 setName 来拜访 name, 而 getName 和 setName 又是原型对象的办法，所以它们成了 Person 实例的共享方法。
这种模式下，name 就变成了一个动态的、由所有实例共享的属性。在一个实例上调用 setName() 会影响所有的实例。

4. 模块模式

模块模式是为单例创立公有变量和特权办法。单例(singleton)，指的是只有一个实例的对象。

var singleton = {
    name: value,
    method: function() {},
}

下面应用对象字面量的形式来创立单例对象，这种实用于简略的利用场景。简单点的，比方改对象须要一些公有变量和公有办法

模块模式通过单例增加公有变量和特权办法可能使其加强。

var singleton = function() {
    var privateVarible = 10;
    function privateFunction() {return false;}

    return {
        publicProperty: true,
        publicMethod: function() {
            privateVarible++;
            return privateFunction();}
    }
}

模块模式应用了一个返回对象的匿名函数。在这个匿名函数外部，首先定义了公有变量和函数.

加强模块模式

var singleton = function() {
    var privateVarible = 10;
    function privateFunction() {return false;}

    var object = new CustomType();
    object.publicProperty = true;
    object.publicMethod = function() {
        privateVarible++;
        return privateFunction();}
    // 返回这个对象
    return object;
}

在返回对象之前退出对其加强的代码。这种加强的模块模式适宜单例必须是某种类型的实例。

Vue 源码中的闭包

1. 数据响应式 Observer 中应用闭包(省略闭包之外的相干逻辑)

function defineReactive(obj, key, value) {
    return Object.defineProperty(obj, key, {get() {return value;},
        set(newVal) {value = newVal;}
    })
}

value 还函数中的一个形参，属于公有变量，然而为什么在内部应用的时候给 value 赋值，还是能达到批改变量的目标呢。

这样就造成了一个闭包的构造了。依据闭包的个性，内层函数能够援用外层函数的变量，并且当内层放弃援用关系时外层函数的这个变量，不会被垃圾回收机制回收。那么, 咱们在设置值的时候，把 newVal 保留在 value 变量当中，而后 get 的时候再通过 value 去获取，这样，咱们再拜访 obj.name时，无论是设置值还是获取值，实际上都是对 value 这个形参进行操作的。

2. 后果缓存

Vue 源码中常常能看到上面这个 cached 函数(接管一个函数，返回一个函数)。

/**
* Create a cached version of a pure function.
*/
function cached (fn) {var cache = Object.create(null);
return (function cachedFn (str) {var hit = cache[str];
    return hit || (cache[str] = fn(str))
})
}

这个函数能够读取缓存，如果缓存中没有就存一下放到缓存中再读。闭包正是能够做到这一点，因为它不会开释内部的援用，从而函数外部的值能够得以保留。

当初再看源码或者当初再看本人写的代码的时候，就会发现，不经意间其实咱们曾经写过和见过很多闭包了，只是之前可能不太意识而已。比方这篇文章 记忆化技术介绍——应用闭包晋升你的 React 性能也提到了闭包。

React Hooks 中闭包的坑

咱们先来看一下应用 setState 的更新机制：

在 React 的setState函数实现中，会依据一个变量 isBatchingUpdates 判断是间接更新this.state 还是放到 队列中回头再说。而 isBatchingUpdates 默认是false, 也就示意setState 会同步更新 this.state。然而，有一个函数 batchedUpdates，这个函数会把isBatchingUpdates 批改为 true，而当React 在调用事件处理函数之前就会调用这个 batchedUpdates，造成的结果，就是由 React 管制的事件处理程序过程setState 不会同步更新this.state。

晓得这些，咱们上面来看两个例子。

上面的代码输入什么？

class Example extends React.Component {constructor() {super();
     this.state = {val: 0};
   }
   
   componentDidMount() {this.setState({val: this.state.val + 1});
     console.log(this.state.val);    // 第 1 次 log
 
     this.setState({val: this.state.val + 1});
     console.log(this.state.val);    // 第 2 次 log
 
     setTimeout(() => {this.setState({val: this.state.val + 1});
       console.log(this.state.val);  // 第 3 次 log 1 
 
       this.setState({val: this.state.val + 1});
       console.log(this.state.val);  // 第 4 次 log 2
     }, 0);
   }
 
   render() {return null;}
 };

打印后果是：0, 0, 2, 3。

1. 第一次和第二次都是在 react 本身生命周期内，触发 isBatchingUpdates 为 true，所以并不会间接执行更新 state, 而是退出了 dirtyComponents，所以打印时获取的都是更新前的状态 0
2. 两次 setState 时，获取到 this.state.val 都是 0，所以执行时都是将 0 设置为 1，在 react 外部会被合并掉，只执行一次。设置实现后 state.val值为 1。
3. setTimeout 中的代码，触发时 isBatchingUpdates 为 false，所以可能间接进行更新，所以连着输入 2, 3

下面代码改用 react hooks 的话

import React, {useEffect, useState} from 'react';

const MyComponent = () => {const [val, setVal] = useState(0);

    useEffect(() => {setVal(val+1);
        console.log(val);

        setVal(val+1);
        console.log(val);

        setTimeout(() => {setVal(val+1);
            console.log(val);

            setVal(val+1);
            console.log(val);
        }, 0)
    }, []);
    return null
};

export default MyComponent;

打印输出: 0, 0, 0, 0。

更新的形式没有扭转。首先是因为 useEffect 函数只运行一次，其次 setTimeout 是个闭包，外部获取到值 val 始终都是 初始化申明的那个值，所以拜访到的值始终是 0。以例子来看的话，并没有执行更新的操作。

在这种状况下，须要应用一个容器，你能够将更新后的状态值写入其中，并在当前的 setTimeout中拜访它，这是 useRef 的一种用例。能够将状态值与 ref 的current属性同步，并在 setTimeout 中读取以后值。

对于这部分具体内容能够查看 React useEffect 的陷阱。React Hooks 的实现也用到了闭包，具体的能够看 超性感的 React Hooks（二）再谈闭包

总结

当在函数外部定义了其余函数，就创立了闭包。闭包有权拜访蕴含函数外部的所有变量，原理如下：

• 在后盾执行环境中，闭包的作用域链蕴含它本人的作用域链、蕴含函数的作用域和全局作用域
• 通常，函数的作用域及其所有变量都会在函数执行完结后销毁
• 然而，当函数返回来了一个闭包，这个函数的作用域将始终在内存中保留在闭包不存在为止。

应用闭包能够在 JavaScript 中模拟块级作用域（JavaScript 自身没有块级作用域的概念），要点如下:

• 创立并立刻调用一个函数，这样既能够执行其中的代码，又不会在内存中留下对该函数的援用
• 后果就是函数外部的所有变量都会被销毁 — 除非将某些变量赋值给了蕴含作用域 (即内部作用域) 中的变量

闭包还能够用于在对象中创立公有变量，相干概念和要点如下。

• 即便 JavaScript 中没有正式的公有对象属性的概念，但能够应用闭包来实现私有办法，而通过私有办法能够拜访在蕴含作用域中定义的变量
• 能够应用构造函数模式，原型模式来实现自定义类型的特权办法也能够应用模块模式、加强的模块模式来实现单例的特权办法

参考

• 破解前端面试（80% 应聘者不及格系列）：从闭包说起
• MDN – 闭包
• 学习 Javascript 闭包（Closure）
• JavaScript 里的闭包是什么？利用场景有哪些？
• 全面了解 Javascript 闭包和闭包的几种写法及用处
• 闭包理论场景利用

其余

最近发动了一个 100 天前端进阶打算，次要是深挖每个知识点背地的原理，欢送关注 微信公众号「牧码的星星」，咱们一起学习，打卡 100 天。同时也会分享一些本人学习的一些心得和想法，欢送大家一起交换。