JavaScript 作用域和闭包

Posted 2023-01-22 yuzhihui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 作用域和闭包相关的知识，希望对你有一定的参考价值。

JavaScript 中的作用域指的是变量和函数的可访问范围。 JavaScript 中，闭包是一个函数对象，它可以访问定义该函数的作用域里的变量，即使函数已经返回。闭包的特点是，它可以在其相关环境不存在时保留变量。闭包可以被保存到变量中并在以后使用。它具有两个特征，一是可以访问外部函数的变量，二是它可以在外部函数执行结束后继续执行。闭包可以用来实现私有变量，记忆函数，高阶函数等功能。

一、作用域

JavaScript 中的作用域指的是变量和函数的可访问范围。JavaScript 使用词法作用域，即作用域由代码的书写结构决定，而不是运行时环境。

二、闭包

JavaScript 中，闭包是一个函数对象，它可以访问定义该函数的作用域里的变量，即使函数已经返回。闭包的特点是，它可以在其相关环境不存在时保留变量。闭包可以被保存到变量中并在以后使用。它具有两个特征，一是可以访问外部函数的变量，二是它可以在外部函数执行结束后继续执行。闭包可以用来实现私有变量，记忆函数（缓存），高阶函数等功能。

简单来说，闭包是一个能够访问其他函数作用域中变量的函数。

三、闭包的应用

1、封装私有变量

闭包的一个常见用途是构建私有变量。当你使用闭包封装变量时，外部代码就无法访问这些变量了。

下面是一个使用闭包来创建私有变量的示例：

function createCounter() 
  let count = 0;
  return function() 
    return count++;
  


let counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

在这个例子中，createCounter 函数返回了一个闭包。这个闭包访问了创建时所在作用域中的变量 count。外部代码不能访问这个变量，因此这个变量就成为了一个私有变量。

2、高阶函数

高阶函数是指一个函数，其参数或返回值是一个函数。闭包可以用来捕获函数作用域中的变量，并将它们传递给高阶函数。

下面是一个使用闭包来构建高阶函数的示例：

function createMultiplier(x) 
    return function(y) 
        return x * y;
    


let double = createMultiplier(2);
console.log(double(3)); //6
console.log(double(5)); //10
let triple = createMultiplier(3);
console.log(triple(2)); //6
console.log(triple(3)); //9

在这个例子中，createMultiplier是一个高阶函数，它返回了一个闭包。这个闭包捕获了它定义时所在作用域中的变量 x 并在闭包内部运用这个变量进行运算。

3、延迟计算（高阶函数的一种具体实现）

通过闭包，可以将函数和其词法环境存储在变量中，直到需要执行函数时再调用它。

function makeAdder(x) 
    return function (y) 
        return x + y;
    ;

const add5 = makeAdder(5);
console.log(add5(3)); // 8

4、实现私有属性和私有方法

闭包还有一个重要的应用场景就是实现面向对象编程中的私有属性和私有方法。

以下是一个使用闭包实现私有属性和私有方法的例子：

function Person(name) 
    let _name = name;
    this.getName = function() 
        return _name;
    
    this.setName = function(name) 
        _name = name;
    

let p = new Person(\'John\');
console.log(p.getName()); // John
p.setName(\'Mike\');
console.log(p.getName()); // Mike

在这个例子中，_name 是私有变量，getName() 和 setName() 是私有方法。由于它们是在构造函数中定义的，所以它们可以访问到 _name 变量。而外部无法直接访问 _name 变量。

闭包的使用能够帮助我们实现面向对象编程中的私有属性和私有方法，使代码更加安全和可维护。

5、实现计数器（封装私有变量的一种具体实现）

function makeCounter() 
    let count = 0;
    return function() 
        return count++;
    ;

const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

6、实现防抖函数

通过闭包可以实现一个防抖函数，在指定时间内只会执行一次。

function debounce(fn, delay) 
    let timer = null;
    return function() 
        clearTimeout(timer);
        timer = setTimeout(() => 
            fn.apply(this, arguments);
        , delay);
    ;

const debouncedFn = debounce(() => 
    console.log(\'Debounced function called.\');
, 1000);

7、实现节流函数

通过闭包可以实现一个节流函数，每隔一段时间执行一次。

function throttle(fn, delay) 
    let timer = null;
    return function() 
        if (!timer) 
            timer = setTimeout(() => 
                fn.apply(this, arguments);
                timer = null;
            , delay);
        
    ;

const throttledFn = throttle(() => 
    console.log(\'Throttled function called.\');
, 1000);

8、实现自执行函数

通过闭包可以实现一个自执行函数，可以在定义时立即执行。

(function () 
    console.log(\'Self-executing function called.\');
)();

9、实现单例模式

单例模式是一种常用的设计模式，它保证一个类只有一个实例，并且提供了一个全局访问点来访问这个实例。使用闭包可以很容易地实现单例模式。

下面是一个使用闭包实现单例模式的例子：

const Singleton = (function() 
    let instance;
    function createInstance() 
        return ;
    
    return 
        getInstance: function() 
            if (!instance) 
                instance = createInstance();
            
            return instance;
        
    ;
)();
console.log(Singleton.getInstance() === Singleton.getInstance()); // true

在这个例子中，Singleton 函数返回了一个对象，它包含一个 getInstance() 方法。这个方法用于获取单例的实例。如果实例不存在，则调用 createInstance() 创建一个新的实例。因为 createInstance() 和 instance 变量都在闭包中定义，所以只能被 getInstance() 方法访问到。

这样就可以保证单例模式的特性了,在多次调用 getInstance() 方法时，都会返回同一个实例。

10、实现模块模式

通过闭包可以实现模块模式，将代码封装在单独的模块中，保证变量和函数不会污染全局作用域。

const myModule = (function () 
    let _privateValue = \'Hello, World!\';
    function _privateFunction() 
        console.log(_privateValue);
    
    return 
        publicFunction: function () 
            _privateFunction();
        
    ;
)();
myModule.publicFunction(); // \'Hello, World!\'
console.log(_privateValue); // ReferenceError: _privateValue is not defined

11、实现类似于块级作用域的效果

通过闭包可以实现类似于块级作用域的效果，将变量和函数封装在一个单独的作用域中，防止变量污染。

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

12、实现缓存（记忆函数）

通过创建一个闭包并将需要缓存的数据存储在其中，可以在需要使用数据时直接从缓存中获取，而不需要重新计算或重新读取。

下面是一个使用闭包实现缓存的例子：

function expensiveFunction() 
    console.log(\'Calculating...\');
    return Math.random();


function cache(fn) 
    let cache = ;
    return function (arg) 
        if (!cache[arg]) 
            cache[arg] = fn(arg);
        
        return cache[arg];
    ;


const cachedFunction = cache(expensiveFunction);
console.log(cachedFunction(5)); // Calculating... 0.5
console.log(cachedFunction(5)); // 0.5

在这个例子中，我们有一个计算代价高昂的函数 expensiveFunction()，它每次都会计算一个随机数。我们使用 cache() 函数将其包装在闭包中，并将计算结果存储在缓存中。当调用 cachedFunction() 函数时，如果缓存中已经有结果，则直接返回缓存中的结果，而不需要重新计算。如果缓存中没有结果，则调用 expensiveFunction() 计算结果并将其存储在缓存中。

在这个例子中，我们将参数作为缓存的键，这样就可以缓存不同参数的结果。

闭包缓存的好处是：