JavaScript 作用域与闭包

这篇具有很好参考价值的文章主要介绍了JavaScript 作用域与闭包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文内容学习于:后盾人 (houdunren.com)

1.作用域

1)函数被执行后其环境变量将从内存中删除。下面函数在每次执行后将删除函数内部的 total 变量。

 function count() {

        let total = 0;

}

count ();

2)函数每次调用都会创建一个新作用域

3)如果子函数被使用时父级环境将被保留(构造函数也是很好的环境例子)

function hd() {

let n = 1;

return function() {

let b = 1;

return function() {

        console.log(++n); console.log(++b);

};

};

}

let a = hd() () ;

a(); //2,2

a(); //3,3

4)let/const,使用let/const 可以将变量声明在块作用域中(放在新的环境中,而不是全局中)

5)在 for 循环中使用let/const 会在每一次迭代中重新生成不同的变量

let arr = [];

for (let i = o; i < 10; i++) {

arr.push((() => i)

};

console.log(arr[3]());//3 如果使用var声明将是10

6)在没有let/const 的历史中使用以下方式产生作用域

//1.自行构建闭包 var arr = [];

for (var i = o; i < 10; i++) {

(function (a){

arr.push(()=>a);

}) (i);

}

console.log(arr[3]()); //3

//2.闭包

闭包指:子函数可以访问外部作用域变量的函数特性,即使在子函数作用域外也可以访问。

·Js中的所有函数都是闭包

闭包一般在子函数本身作用域以外执行,即延伸作用域

1)闭包基本展示

function hd() {

let name ='后盾人;

return function () {

return name;

}

let hdcms = hd();

console.log(hdcms());//后盾人

2)使用闭包返回数组区间元素

let arr = [3, 2, 4,1, 5,6];

function between(a, b) {

return function(v) {

return v >= a && v <= b;

};

}

console.log(arr.filter(between(3,5)));

*3)闭包排序,使用闭包按指定字段排序

let lessons = [

{title:"媒体查询响应式布局", click:89, price:12},

{title:"FLEX 弹性盒模型" click:45, price: 120},

{title:"GRID 栅格系统", click:19, price:67},

{title:"盒子模型详解" click: 29, price: 300}

];

function order(field){

return (a, b) => (a[field] > b[field] ? 1 :-1);

}

console.table(lessons.sort(order("price")));

*4)闭包问题

(1)内存泄漏

闭包特性中,上级作用域会为函数保存数据,从而造成的如下所示的内存泄漏问题

<body>

<div desc="houdunren">在线学习</div><div desc="hdcms">开源产品</div>

</body>

<script>

let divs = document.querySelectorAll ("div");

divs.forEach(function(item) {

item.addEventListener("click",function() {

console.log(item.getAttribute("desc"));

});

item && console.log(item.getAttribute("desc"));// 回调函数外面,依然可以访问});

</script>

***下面通过清除不需要的数据解决内存泄漏问题

let divs = document.querySelectorAll ("div");

divs.forEach(function(item) {

let desc = item.getAttribute("desc");

item.addEventListener("click",function() {

console.log(desc);

})

item =null;

item && console.log(item.qetAttribute("desc"));// 回调函数外面,清除了不需要的数据,就不可访问了

});

(2)this 指向

this 总是指向调用该函数的对象,即函数在搜索 this 时只会搜索到当前活动对象。

下面是函数因为是在全局环境下调用的,所以 this 指向 window,这不是我们想要的。

let hd = {

user:"后盾人",

get:function(){

return function() {

return this.user;};

}

};

console.log(hd.get()());//undefined

***使用箭头函数解决这个问题

let hd = {

user:"后盾人",

get:function(){

return () => this.user;

}

};

console.log(hd.get()());//后盾人文章来源地址https://www.toymoban.com/news/detail-620040.html

到了这里,关于JavaScript 作用域与闭包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Js面试之作用域与闭包

    最近在整理一些前端面试中经常被问到的问题,分为vue相关、react相关、js相关、react相关等等专题,可持续关注后续内容,会不断进行整理~ 作用域(scope)定义了程序中变量的可访问性和生命周期,在js中,作用域有两种主要的类型:词法作用域(Lexical Scope)和动态作用域(

    2024年01月19日
    浏览(31)
  • 深入理解JavaScript堆栈、事件循环、执行上下文和作用域以及闭包

    在JavaScript中,内存堆是内存分配的地方,调用栈是代码执行的地方。 原始类型的保存方式:在变量中保存的是值本身,所以原始类型也被称之为值类型。 对象类型的保存方式:在变量中保存的是对象的“引用”,所以对象类型也被称之为引用类型。 调用栈理解非常简单,当

    2024年02月03日
    浏览(38)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(42)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(32)
  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(37)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(36)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(34)
  • 9 JavaScript闭包

    9 闭包 我们都知道,函数里是可以访问函数外的全局变量,而函数外不能访问函数内的局部变量,如下: 执行结果: 执行结果: 之所以出现这样的情况,就是因为函数内定义的变量为局部变量,函数外定义的变量为全局变量(不同于windows)。在函数内部可以访问到全局变量,

    2024年02月12日
    浏览(31)
  • JavaScript 的 闭包

    在 JavaScript 中,闭包是一种强大的特性,它允许函数在结束执行后,仍能访问并控制其外部的局部变量。这种特性在许多高级 JavaScript 编程场景中都发挥着关键作用,如创建函数工厂、实现数据隐藏和封装等。 JavaScript 的变量作用域 在 JavaScript 中,变量的作用域可以是全局的

    2024年02月06日
    浏览(26)
  • JavaScript闭包详细介绍

    闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见方式是让一个内嵌函数访问其外部(父级)函数的变量,即使外部函数已经执行完毕,其变量仍然存在于内存中。闭包的主要特点是它可以“记住”外部函数的变量。 变量持久化: 闭包能够保持对外部作

    2024年02月20日
    浏览(21)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包