From 01b0e12ba27b5069248fd09235e9a7143915ee30 Mon Sep 17 00:00:00 2001 From: Irvin Date: Wed, 16 Feb 2022 02:02:49 +0800 Subject: remove `notranslate` class in zh-CN --- files/zh-cn/web/javascript/closures/index.html | 36 +++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'files/zh-cn/web/javascript/closures') diff --git a/files/zh-cn/web/javascript/closures/index.html b/files/zh-cn/web/javascript/closures/index.html index 4b732a1a0d..29356fb61a 100644 --- a/files/zh-cn/web/javascript/closures/index.html +++ b/files/zh-cn/web/javascript/closures/index.html @@ -19,7 +19,7 @@ translation_of: Web/JavaScript/Closures

请看下面的代码:

-
function init() {
+
function init() {
     var name = "Mozilla"; // name 是一个被 init 创建的局部变量
     function displayName() { // displayName() 是内部函数,一个闭包
         alert(name); // 使用了父函数中声明的变量
@@ -37,7 +37,7 @@ init();

现在来考虑以下例子 :

-
function makeFunc() {
+
function makeFunc() {
     var name = "Mozilla";
     function displayName() {
         alert(name);
@@ -56,7 +56,7 @@ myFunc();

下面是一个更有意思的示例 — 一个 makeAdder 函数:

-
function makeAdder(x) {
+
function makeAdder(x) {
   return function(y) {
     return x + y;
   };
@@ -85,7 +85,7 @@ console.log(add10(2)); // 12
 
 

假如,我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size,然后通过相对的 em 单位设置页面中其它元素(例如header)的字号:

-
body {
+
body {
   font-family: Helvetica, Arial, sans-serif;
   font-size: 12px;
 }
@@ -103,7 +103,7 @@ h2 {
 
 

以下是 JavaScript:

-
function makeSizer(size) {
+
function makeSizer(size) {
   return function() {
     document.body.style.fontSize = size + 'px';
   };
@@ -116,12 +116,12 @@ var size16 = makeSizer(16);
 
 

size12size14size16 三个函数将分别把 body 文本调整为 12,14,16 像素。我们可以将它们分别添加到按钮的点击事件上。如下所示:

-
document.getElementById('size-12').onclick = size12;
+
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-12">12</a>
 <a href="#" id="size-14">14</a>
 <a href="#" id="size-16">16</a>
 
@@ -136,7 +136,7 @@ document.getElementById('size-16').onclick = size16;

下面的示例展现了如何使用闭包来定义公共函数,并令其可以访问私有函数和变量。这个方式也称为 模块模式(module pattern):

-
var Counter = (function() {
+
var Counter = (function() {
   var privateCounter = 0;
   function changeBy(val) {
     privateCounter += val;
@@ -172,7 +172,7 @@ console.log(Counter.value()); /* logs 1 */
 

你应该注意到我们定义了一个匿名函数,用于创建一个计数器。我们立即执行了这个匿名函数,并将他的值赋给了变量Counter。我们可以把这个函数储存在另外一个变量makeCounter中,并用他来创建多个计数器。

-
var makeCounter = function() {
+
var makeCounter = function() {
   var privateCounter = 0;
   function changeBy(val) {
     privateCounter += val;
@@ -213,13 +213,13 @@ console.log(Counter2.value()); /* logs 0 */
 
 

在 ECMAScript 2015 引入 let 关键字 之前,在循环中有一个常见的闭包创建问题。参考下面的示例:

-
<p id="help">Helpful notes will appear here</p>
+
<p id="help">Helpful notes will appear here</p>
 <p>E-mail: <input type="text" id="email" name="email"></p>
 <p>Name: <input type="text" id="name" name="name"></p>
 <p>Age: <input type="text" id="age" name="age"></p>
 
-
function showHelp(help) {
+
function showHelp(help) {
   document.getElementById('help').innerHTML = help;
 }
 
@@ -251,7 +251,7 @@ setupHelp();
 
 

解决这个问题的一种方案是使用更多的闭包:特别是使用前面所述的函数工厂:

-
function showHelp(help) {
+
function showHelp(help) {
   document.getElementById('help').innerHTML = help;
 }
 
@@ -283,7 +283,7 @@ setupHelp();
 
 

另一种方法使用了匿名闭包:

-
function showHelp(help) {
+
function showHelp(help) {
   document.getElementById('help').innerHTML = help;
 }
 
@@ -308,7 +308,7 @@ setupHelp();

如果不想使用过多的闭包,你可以用ES2015引入的let关键词:

-
function showHelp(help) {
+
function showHelp(help) {
   document.getElementById('help').innerHTML = help;
 }
 
@@ -333,7 +333,7 @@ setupHelp();

另一个可选方案是使用 forEach()来遍历helpText数组并给每一个<p>添加一个监听器,如下所示:

-
function showHelp(help) {
+
function showHelp(help) {
   document.getElementById('help').innerHTML = help;
 }
 
@@ -361,7 +361,7 @@ setupHelp();

考虑以下示例:

-
function MyObject(name, message) {
+
function MyObject(name, message) {
   this.name = name.toString();
   this.message = message.toString();
   this.getName = function() {
@@ -376,7 +376,7 @@ setupHelp();

在上面的代码中,我们并没有利用到闭包的好处,因此可以避免使用闭包。修改成如下:

-
function MyObject(name, message) {
+
function MyObject(name, message) {
   this.name = name.toString();
   this.message = message.toString();
 }
@@ -393,7 +393,7 @@ MyObject.prototype = {
 
 

但我们不建议重新定义原型。可改成如下例子:

-
function MyObject(name, message) {
+
function MyObject(name, message) {
   this.name = name.toString();
   this.message = message.toString();
 }
-- 
cgit v1.2.3-54-g00ecf