首页 web前端 js教程 根据一段代码浅谈Javascript闭包_javascript技巧

根据一段代码浅谈Javascript闭包_javascript技巧

May 16, 2016 pm 06:13 PM
javascript 闭包

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return f2;
}

这里的闭包是f1,封闭了一个变量n和一个函数f2。

我们先无视nAdd,尽量保持原貌重写一下这个函数。
复制代码 代码如下:

function f1(){
var n = 999;
var f2 = function(){ alert(n); };
return f2;
}
var result = f1();
result();

js中各个变量以function为单元进行封装,当在function内部找不到某一变量时,function会向其所在的上一单元(上下文)中进行查找,一直查找到顶层的window域。
这时就出现一个疑问:这个查找过程是以函数引用位置为起点还是函数体定义的位置为起点?
在上面这一段代码中,result所在域是window,但是实际的输出结果是f1内部的n值,所以可以得出结论:变量查找的起点是函数体定义的位置。

现在再回过头来看nAdd(第一段代码)。如我们所知,没有关键字var定义的变量默认进入window域,所以nAdd实际为window.nAdd。这就等同于如下代码:
复制代码 代码如下:

var nAdd;
function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

那么根据我们对result的分析,nAdd的执行将影响f1中n的值。
所以有:
复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}
var result = f1();
result();
nAdd();
result();

这段代码执行最终的输出结果为1000。

再看这种情况:
复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

f1()(); //nAdd();
f1()(); //

简述一下执行过程:
p1位置,f1封装了一个匿名的闭包A,在返回A闭包中的函数A:f2后继而执行A:f2,A:f2输出变量A:n,结果是999。
与此同时,nAdd被赋值为A闭包中的一个函数,下一行执行nAdd即让A:n的值+1。
p2位置,f1封装匿名的闭包B,所进行的操作都是针对闭包B的,随后执行B:f2输出的是B:n,所以最后的结果依然是999。
A和B是两个独立的“包”,互不影响。

改写一下函数的调用部分:

复制代码 代码如下:

function f1(){
var n = 999;
nAdd = function(){ n += 1; }
function f2(){
alert(n);
}
return function(){ alert(n); };
}

var result = f1();
result();
nAdd();
f1()();
result(); //

p3位置不意外地输出了1000。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1250
24
C++ lambda 表达式中闭包的含义是什么? C++ lambda 表达式中闭包的含义是什么? Apr 17, 2024 pm 06:15 PM

在C++中,闭包是能够访问外部变量的lambda表达式。要创建闭包,请捕获lambda表达式中的外部变量。闭包提供可复用性、信息隐藏和延迟求值等优势。它们在事件处理程序等实际情况中很有用,其中即使外部变量被销毁,闭包仍然可以访问它们。

C++ 函数中闭包的优点和缺点是什么? C++ 函数中闭包的优点和缺点是什么? Apr 25, 2024 pm 01:33 PM

闭包是一种嵌套函数,它能访问外层函数作用域的变量,优点包括数据封装、状态保持和灵活性。缺点包括内存消耗、性能影响和调试复杂性。此外,闭包还可以创建匿名函数,并将其作为回调或参数传递给其他函数。

解决闭包导致的内存泄漏问题 解决闭包导致的内存泄漏问题 Feb 18, 2024 pm 03:20 PM

标题:闭包引起的内存泄漏及解决方法引言:闭包是JavaScript中一个非常常见的概念,它可以让内部函数访问外部函数的变量。然而,闭包在使用不当的情况下可能导致内存泄漏。本文将探讨闭包引起的内存泄漏问题,并提供解决方法及具体代码示例。一、闭包引起的内存泄漏问题闭包的特性是内部函数可以访问外部函数的变量,这意味着在闭包中引用的变量不会被垃圾回收。如果使用不当,

C++ Lambda 表达式如何实现闭包? C++ Lambda 表达式如何实现闭包? Jun 01, 2024 pm 05:50 PM

C++Lambda表达式支持闭包,即保存函数作用域变量并供函数访问。语法为[capture-list](parameters)->return-type{function-body}。capture-list定义要捕获的变量,可以使用[=]按值捕获所有局部变量,[&]按引用捕获所有局部变量,或[variable1,variable2,...]捕获特定变量。Lambda表达式只能访问捕获的变量,但无法修改原始值。

PHP 函数的链式调用和闭包 PHP 函数的链式调用和闭包 Apr 13, 2024 am 11:18 AM

是的,可以通过链式调用和闭包优化代码简洁性和可读性:链式调用可将函数调用链接为一个流畅接口。闭包可创建可重用代码块,并在函数外部访问变量。

函数指针和闭包对Golang性能的影响 函数指针和闭包对Golang性能的影响 Apr 15, 2024 am 10:36 AM

函数指针和闭包对Go性能的影响如下:函数指针:稍慢于直接调用,但可提高可读性和可复用性。闭包:通常更慢,但可封装数据和行为。实战案例:函数指针可优化排序算法,闭包可创建事件处理程序,但会带来性能损失。

golang函数闭包在测试中的作用 golang函数闭包在测试中的作用 Apr 24, 2024 am 08:54 AM

Go语言函数闭包在单元测试中发挥着至关重要的作用:捕获值:闭包可以访问外部作用域的变量,允许在嵌套函数中捕获和重用测试参数。简化测试代码:通过捕获值,闭包消除了对每个循环重复设置参数的需求,从而简化了测试代码。提高可读性:使用闭包可以组织测试逻辑,使测试代码更清晰、更易于阅读。

golang匿名函数和闭包的优缺点总结 golang匿名函数和闭包的优缺点总结 May 05, 2024 am 09:54 AM

匿名函数简洁、匿名,但可读性差、调试困难;闭包能封装数据、管理状态,但可能导致内存消耗和循环引用。实战案例:匿名函数可用于简单数值处理,闭包可实现状态管理。

See all articles