闭包和递归 丨JavaScript 函数进阶
Posted 黑马程序员官方
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了闭包和递归 丨JavaScript 函数进阶相关的知识，希望对你有一定的参考价值。
目录
一、什么是闭包
闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- javascript 高级程序设计
简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
// 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
function fn()
var num = 10;
function fun()
console.log(num);
fun();
fn();
</script>
</body>
</html>1.1 在 chrome 中调试闭包
1. 打开浏览器，按 F12 键启动 chrome 调试工具。
2. 设置断点。
3. 找到 Scope 选项（Scope 作用域的意思）。
4. 当我们重新刷新页面，会进入断点调试，Scope 里面会有两个参数（global 全局作用域、local 局部作用域）。
5. 当执行到 fn2() 时，Scope 里面会多一个 Closure 参数 ，这就表明产生了闭包。
1.2 闭包的作用
提问：我们怎么能在 fn() 函数外面访问 fn() 中的局部变量 num 呢 ？
闭包作用：延伸变量的作用范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
// 一个作用域可以访问另外一个函数的局部变量
// 我们fn 外面的作用域可以访问fn 内部的局部变量
// 闭包的主要作用: 延伸了变量的作用范围
function fn()
var num = 10;
// function fun()
// console.log(num);
//
// return fun;
return function()
console.log(num);
var f = fn();
f();
// 类似于
// var f = function()
// console.log(num);
//
// var f = function fun()
// console.log(num);
//
</script>
</body>
</html>1.3 闭包案例
1. 循环注册点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
// 闭包应用-点击li输出当前li的索引号
// 1. 我们可以利用动态添加属性的方式
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++)
lis[i].index = i;
lis[i].onclick = function()
// console.log(i);
console.log(this.index);
// 2. 利用闭包的方式得到当前小li 的索引号
for (var i = 0; i < lis.length; i++)
// 利用for循环创建了4个立即执行函数
// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
(function(i)
// console.log(i);
lis[i].onclick = function()
console.log(i);
)(i);
</script>
</body>
</html>2. 循环中的 setTimeout()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>大猪蹄子</li>
</ul>
<script>
// 闭包应用-3秒钟之后,打印所有li元素的内容
var lis = document.querySelector('.nav').querySelectorAll('li');
for (var i = 0; i < lis.length; i++)
(function(i)
setTimeout(function()
console.log(lis[i].innerHTML);
, 3000)
)(i);
</script>
</body>
</html>3. 计算打车价格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 闭包应用-计算打车价格
// 打车起步价13(3公里内), 之后每多一公里增加 5块钱. 用户输入公里数就可以计算打车价格
// 如果有拥堵情况,总价格多收取10块钱拥堵费
// function fn() ;
// fn();
var car = (function()
var start = 13; // 起步价 局部变量
var total = 0; // 总价 局部变量
return
// 正常的总价
price: function(n)
if (n <= 3)
total = start;
else
total = start + (n - 3) * 5
return total;
,
// 拥堵之后的费用
yd: function(flag)
return flag ? total + 10 : total;
)();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33
console.log(car.price(1)); // 13
console.log(car.yd(false)); // 13
</script>
</body>
</html>二、什么是递归？
如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。
简单理解:函数内部自己调用自己, 这个函数就是递归函数
递归函数的作用和循环效果一样
由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件 return。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 递归函数 : 函数内部自己调用自己, 这个函数就是递归函数
var num = 1;
function fn()
console.log('我要打印6句话');
if (num == 6)
return; // 递归里面必须加退出条件
num++;
fn();
fn();
</script>
</body>
</html>2.1 利用递归求数学题
1. 求 1 * 2 *3 ... * n 阶乘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
function fn(n)
if (n == 1)
return 1;
return n * fn(n - 1);
console.log(fn(3));
console.log(fn(4));
// 详细思路 假如用户输入的是3
//return 3 * fn(2)
//return 3 * (2 * fn(1))
//return 3 * (2 * 1)
//return 3 * (2)
//return 6
</script>
</body>
</html>2. 求斐波那契数列 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21...
// 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
// 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
function fb(n)
if (n === 1 || n === 2)
return 1;
return fb(n - 1) + fb(n - 2);
console.log(fb(3));
console.log(fb(6));
</script>
</body>
</html>2.2 利用递归求:根据id返回对应的数据对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var data = [
id: 1,
name: '家电',
goods: [
id: 11,
gname: '冰箱',
goods: [
id: 111,
gname: '海尔'
,
id: 112,
gname: '美的'
, ]
,
id: 12,
gname: '洗衣机'
]
,
id: 2,
name: '服饰'
];
// 我们想要做输入id号,就可以返回的数据对象
// 1. 利用 forEach 去遍历里面的每一个对象
function getID(json, id)
var o = ;
json.forEach(function(item)
// console.log(item); // 2个数组元素
if (item.id == id)
// console.log(item);
o = item;
// 2. 我们想要得里层的数据 11 12 可以利用递归函数
// 里面应该有goods这个数组并且数组的长度不为 0
else if (item.goods && item.goods.length > 0)
o = getID(item.goods, id);
);
return o;
console.log(getID(data, 1));
console.log(getID(data, 2));
console.log(getID(data, 11));
console.log(getID(data, 12));
console.log(getID(data, 111));
</script>
</body>
</html>2.3 浅拷贝和深拷贝
1. 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj =
id: 1,
name: 'andy',
msg:
age: 18
;
var o = ;
// for (var k in obj)
// // k 是属性名 obj[k] 属性值
// o[k] = obj[k];
//
// console.log(o);
// o.msg.age = 20;
// console.log(obj);
console.log('--------------');
Object.assign(o, obj);
console.log(o);
o.msg.age = 20;
console.log(obj);
</script>
</body>
</html>2. 深拷贝拷贝多层, 每一级别的数据都会拷贝.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj =
id: 1,
name: 'andy',
msg:
age: 18
,
color: ['pink', 'red']
;
var o = ;
// 封装函数
function deepCopy(newobj, oldobj)
for (var k in oldobj)
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array)
newobj[k] = [];
deepCopy(newobj[k], item)
else if (item instanceof Object)
// 3. 判断这个值是否是对象
newobj[k] = ;
deepCopy(newobj[k], item)
else
// 4. 属于简单数据类型
newobj[k] = item;
deepCopy(o, obj);
console.log(o);
var arr = [];
console.log(arr instanceof Object);
o.msg.age = 20;
console.log(obj);
</script>
</body>
</html>3. Object.assign(target, ...sources) es6 新增方法可以浅拷贝
更多JavaScript内容：
| 黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门 |
黑马前端专栏干货多多，关注再学，好方便~
2023年前端学习路线图：课程、源码、笔记，技术栈另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
以上是关于闭包和递归 丨JavaScript 函数进阶的主要内容，如果未能解决你的问题，请参考以下文章
好好学python·函数进阶（递归函数，回调函数，闭包函数，匿名函数，迭代器）