如果该函数包含类似于呼叫回复函数,则呼叫回复函数仍在范围内;如果呼叫回复函数在母函数的即时环境中提到某些本地变量,那么当然,你会期望该变量无法访问呼叫回复函数并返回未定义。

关闭确保通过召回函数提到的任何属性都可用于该函数的使用,即使其母函数可能已经失效。

维基百科 关闭:

在计算机科学中,关闭是一种函数,以及该函数的非本地名称(自由变量)的参考环境。

技术上,在JavaScript中,每个功能都是一个关闭,它总是有在周围范围内定义的变量访问。

由于JavaScript的范围定义结构是一种功能,而不是像许多其他语言一样的代码区块,我们通常在JavaScript中关闭的意思是与已执行的周围功能中定义的非本地变量的功能。

密封经常用来创建一些隐藏的私人数据的功能(但这并不总是如此)。

var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.

EMS

上面的例子是使用一个匿名函数,一次执行,但它不一定是. 它可以被命名(例如 mkdb)并后续执行,每次被召唤时产生一个数据库函数. 每一个所产生的函数都会有自己的隐藏的数据库对象. 另一个使用例子关闭是当我们不返回一个函数时,但包含多个函数的对象

孩子们永远不会忘记他们与父母分享的秘密,即使父母离开后。

JavaScript 功能的秘密是私人变量

var parent = function() {
 var name = "Mary"; // secret
}

正如你可以猜测的那样,因为变量每次函数被召唤,没有人会知道它们,必须有一个秘密的地方,它们被存储在那里,它可以被称为秘密室或管道或地方范围,但这并不重要,我们知道它们在某个地方隐藏在记忆中。

但是,在JavaScript中,这是一个非常特殊的事情,在其他功能内创建的功能,也可以知道父母的本地变量,并保持它们,只要他们活着。

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

因此,只要我们在父母功能,它可以创建一个或多个儿童功能,从秘密位置分享秘密变量。

但可悲的是,如果孩子也是父母功能的私人变量,当父母结束时也会死亡,而秘密也会与他们一起死亡。

所以要活着,孩子必须离开,直到太晚了。

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

所以,如果你叫孩子“爱丽丝”,她会回答。

child("Alice") => "My name is Alice, child of Mary"

这就是所有要说的。

让我们从这里开始,正如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的链接

最好的方法是不断地解释这些概念:

console.log(x);
// undefined

var x = 42;
console.log(x);
// 42

现在,JavaScript知道X是什么意思。

x = 43;
console.log(x);
// 43

现在,X意味着别的东西。

范围

当您创建一个函数时,该函数为变量具有自己的“盒子”。

function A() {
  var x = 42;
}

console.log(x);

// undefined

var x = 42;

function A() {
  console.log(x);
}

// 42

在函数 A 中,您有“范围访问”到 x。

function A() {
  var x = 42;
}

function B() {
  console.log(x);
}

// undefined

function A() {

  var x = 42;

  function B() {
    console.log(x);
  }

}

// 42

功能

在JavaScript中,您通过称之为:

function A() {
  console.log(42);
}

A();

// 42

var a = function() {
  console.log(42);
};

变量现在意味着一个功能,你可以运行它。

a();
// 42

setTimeout(a, 1000);

在一秒钟(1000毫秒),函数一个点被称为:

// 42

现在,当你定义函数时,这些函数可以访问它们的外部目标。

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  // but you want to run `b` later, rather than right away
  setTimeout(b, 1000);

}

现在发生了什么?

// 'Hello!'

var c;

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  c = b;

}

// now we are out side of function `a`
// call `a` so the code inside `a` runs
a(); 

// now `c` has a value that is a function
// because what happened when `a` ran

// when you run `c`
c();

// 'Hello!'

您仍然可以在关闭范围内访问变量。

即使一个已经完成了运行,现在你正在运行C的外部。

在这里发生的事情被称为JavaScript中的“关闭”。

我相信更短的解释,所以看下面的图像。

此分類上一篇

函数 f1()..> 光红盒

函数 f2()..> 红小盒子

在这里,我们有两个功能,f1()和f2()。f2()是内部到f1()。f1()有一个变量, var x = 10.

在引用函数f1(),f2()可以访问 var x = 10 的值。

这里是代码:

function f1() {
    var x=10;

    function f2() {
        console.log(x)
    }

    return f2

}
f1()

f1 ) 请求:

此分類上一篇