📜  JavaScript 中闭包的实际用途是什么?

📅  最后修改于: 2022-05-13 01:56:38.100000             🧑  作者: Mango

JavaScript 中闭包的实际用途是什么?

在 JavaScript 中,闭包被定义为内部函数,即使在外部函数返回后也可以访问外部函数的变量和参数。下面的例子展示了闭包的实际使用:

示例:在此示例中,定义了一个变量mult ,它是函数multFn的本地变量,并且只能在此函数内部访问。声明内部函数时,JavaScript 会创建一个闭包,其中内部函数可以访问变量及其参数。

javascript
// Define the closure
function multFn() {
  var mult = 9;
  return function(val) {
    mult = mult * val;
    return mult;
  }
}
  
// Use the closure
var mult = multFn();
console.log(mult(18));


javascript
// Define the closure
var rentPrice = function(initialRent) {
   var rent = initialRent;
  
    // Define private variables for
    // the closure
    return {
      getRent: function() {
        return console.log(rent);
      },
      incRent: function(amount) {
        rent += amount;
        console.log(rent);
      },
      decRent: function(amount) {
         rent -= amount;
         console.log(rent);
      }
    }
}
  
var Rent = rentPrice(8000);
  
// Access the private methods
Rent.incRent(2000);
Rent.decRent(1500);
Rent.decRent(1000); 
Rent.incRent(2000); 
Rent.getRent();


javascript
(function() {
  
  var multFn = function multiply() {
    // This variable is local to
    // the closure and holds
    // its value inbetween
    // multiple calls
   var mult = 9;
   return function(val) {
     mult = mult * val;
     return mult;
   }
  };
  
  var mult = multFn();
    
  // Call the method
  // multiple times
  console.log(mult(2));
  console.log(mult(3));
  console.log(mult(5));
}());


输出:

162

1.使用私有变量和方法:在JavaScript中,我们可以通过闭包来使用私有变量和方法。下面的例子展示了使用闭包的私有变量。

示例:在此示例中, rentPrice()函数返回一个具有三个方法的对象: getRent()、incRent()decRent() 。这三个方法可以访问私有变量rent 。但是,其范围之外的代码无法直接访问此变量。因此,我们可以模仿 JavaScript 中的面向对象编程。

javascript

// Define the closure
var rentPrice = function(initialRent) {
   var rent = initialRent;
  
    // Define private variables for
    // the closure
    return {
      getRent: function() {
        return console.log(rent);
      },
      incRent: function(amount) {
        rent += amount;
        console.log(rent);
      },
      decRent: function(amount) {
         rent -= amount;
         console.log(rent);
      }
    }
}
  
var Rent = rentPrice(8000);
  
// Access the private methods
Rent.incRent(2000);
Rent.decRent(1500);
Rent.decRent(1000); 
Rent.incRent(2000); 
Rent.getRent();

输出:

10000
8500
7500
9500
9500

2. 维护每个函数调用之间的状态:假设有一个函数,希望它可以将多个值相乘。这可以在全局变量的帮助下完成,因为它们可以在整个程序中访问。然而,一个缺点是它们很容易从代码中的任何地方更改。这也可以使用闭包来完成。闭包有助于在不使用全局变量的情况下维护函数调用之间的状态。

例子:

javascript

(function() {
  
  var multFn = function multiply() {
    // This variable is local to
    // the closure and holds
    // its value inbetween
    // multiple calls
   var mult = 9;
   return function(val) {
     mult = mult * val;
     return mult;
   }
  };
  
  var mult = multFn();
    
  // Call the method
  // multiple times
  console.log(mult(2));
  console.log(mult(3));
  console.log(mult(5));
}());

输出:

18
54
270