温故而知新之- Javascript闭包
【摘要】 讲到闭包,可能有些人会慌,其实闭包很常用,慌是因为对知识点掌握不牢,下面我们来复习一下闭包。
什么是闭包呢?闭包是函数的一种特性,是指子函数可以访问外部作用域变量。
闭包这个特性,在处理事件绑定,异步请求时起到非常重要的作用。
按照上面描述的特性,可以理解Javascript中所有的函数都是闭包。
前面我们复习过作用域,其实它就已经使用过这个闭包特性了,回顾下:
function info() { let name = '余人杰'; return function () { return name; // 使用了外部作用域的变量name } } let hwName = info(); console.log(hwName ()); //余人杰
其实在很多应用场景中,我们都会使用到闭包特性,让我们再来巩固下知识:
例如下面这个 返回数组区间元素的小需求:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function between(num1, num2) { return function(n) { return n >= num1 && n <= num2; }; } console.log(arr.filter(between(2, 6))); // [2, 3, 4, 5, 6]
使用闭包来指定按照某个字段排序数组:
let fruits = [ { name: "apple", favorite: 9, price: 20 }, { name: "pear", favorite: 5, price: 50 }, { name: "watermelon", favorite: 45, price: 30 }, { name: "banana", favorite: 35, price: 20 } ]; function order(k) { return (a, b) => (a[k] > b[k] ? 1 : -1); } console.table(fruits.sort(order("favorite")));
当然,我们也许认识下使用闭包会有哪些问题。
闭包特性中上级作用域会为函数保存数据,从而造成内存泄漏问题,如下代码所示:
<body> <a desc="fruits">水果</a> <a desc="drink">饮料</a> </body> <script> let aList = document.querySelectorAll("a"); aList.forEach(function(item) { item.addEventListener("click", function() { console.log(item.getAttribute("desc")); }); }); </script>
怎么处理这种问题呢?我们可以通过清除不需要的数据来解决解决内存泄漏问题
let aList = document.querySelectorAll("a"); aList.forEach(function(item) { let desc = item.getAttribute("desc"); item.addEventListener("click", function() { console.log(desc); }); item = null; });
心得:闭包这个基础知识,在面试中出场率很高,不用慌,认真掌握牢这个基础知识点,难不倒你的,加油。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)