此分類上一篇

JavaScript 在两个阶段运行代码:

编辑阶段 // JavaScript 不是纯粹的语言解释 执行阶段

论点也存储在本地范围为f. 每当创建一个本地执行背景或范围时,它都包含对其母范围的参考指标. 所有变量访问都跟随这个词汇范围链以找到其价值. 如果一个变量不在本地范围中,它跟随链,并在其母范围中找到它. 这也是为什么一个本地变量在母范围中超越变量

什么是关闭?

它是函数与其范围链之间的暗示,永久的联系......函数定义(lambda)隐藏的范围参考,保持范围链(防止垃圾收集)。它被使用并复制为“外部环境参考”随时函数运行。

var data = "My Data!";
setTimeout(function() {
  console.log(data); // Prints "My Data!"
}, 3000);

明確的關閉

function makeAdder(n) {
  var inc = n;
  var sum = 0;
  return function add() {
    sum = sum + inc;
    return sum;
  };
}

var adder3 = makeAdder(3);

我需要知道一个按钮被点击了多少次,每次第三点击都会做点什么。

考虑此选项

var element = document.getElementById('按钮'); element.addEventListener(“点击”,(函数() { // init 计算到 0 var 计算 = 0; 返回函数(e) { // <- 这个函数变成点击处理器计算++; // 并将保持访问上述 ` 计算` 如果(计算 === 3) { // 做点什么每第三次 console.log(“第三次是魅力!”); // 恢复 c

简单的单线关闭

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

func();  // Alerts "val"
func.a;  // Undefined

因此,在我们的主要例子中,计算变量包含在关闭室内,并始终可用于活动交易者,因此它保持其状态从点击到点击。

在那里你去;现在你正在完全包容这种行为。

查找描述的解释:如何在场景背后的JavaScript关闭工作。

文章解释了范围对象(或LexicalEnvironments)如何分配并以直观的方式使用。

"use strict";

var foo = 1;
var bar = 2;

function myFunc() {
  //-- Define local-to-function variables
  var a = 1;
  var b = 2;
  var foo = 3;
}

//-- And then, call it:
myFunc();

在执行顶级代码时,我们有以下范围对象的安排:

此分類上一篇

当 myFunc() 被召唤时,我们有以下范围链:

此分類上一篇

了解范围对象是如何创建,使用和删除,这是一个关键,有一个大图像,并了解如何在盖子下工作关闭。

请参见上述文章,详细信息。

函数和函数的外部范围(语法环境)的参考

函数 汽车(制造商,模型,年,颜色) { 返回 { 到String() { 返回 `${ 制造商} ${ 模型} (${ 年}, ${ 颜色})` } } 组车 = 新车(‘Aston Martin’,‘V8 Vantage’,‘2012’,‘Quantum Silver’) console.log(car.toString())

事件导向的编程

在下面的例子中,所有实施细节都隐藏在即时执行的函数表达式内。 函数标记和 toString 接近私人状态和函数他们需要完成工作。 关闭已使我们能够模块化和包容我们的代码。

例子1

这个例子表明,本地变量在关闭中没有复制:关闭保持了对原始变量的参考。

左边

让我们从这里开始,正如MDN所定义的那样:关闭是指独立(自由)变量的功能(被本地使用的变量,但在关闭范围内定义)。

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();

function init() {
    var name = "Mozilla"; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
        alert (name); // displayName() uses variable declared in the parent function    
    }
    displayName();    
}
init();

关闭现在考虑下面的例子:

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

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

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

您可能想要做到这一点的情况在网上特别常见. 在前端JavaScript中写的代码的大部分是基于事件的 - 我们定义了一些行为,然后将其附加到用户发起的事件(如点击或键盘)。

例如,假设我们想添加一些按钮到一个页面,调整文本大小的一种方式是指定字体元素的字体大小在像素,然后设置页面上的其他元素的大小(如标题)使用相应的EM单位:

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>


function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

要了解更多关于关闭的信息,请访问MDN的链接

const makePlus = 函数(x) { 返回函数(y) { 返回 x + y; } const plus5 = makePlus(5); console.log(plus5(3));

如果JavaScript不知道关闭,会发生什么? 只需由其方法体(基本上是函数通话所做的事情)在最后一行中取代通话,你会得到:

console.log(x + 3);

现在, x 的定义在哪里? 我们没有在当前范围内定义它. 唯一的解决方案是让 plus5 携带其范围(或更好地说,其父母范围)。