js进阶--let，上级作用域，闭包03

最新推荐文章于 2024-07-08 18:01:35 发布
最新推荐文章于 2024-07-08 18:01:35 发布
阅读量143 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuishoulong3424/article/details/110140687
版权

文章目录

es6中的let

  • es6没有变量提升,但是在代码执行之前会有一个词法检测，来看你的代码是不是会有语法错误，如果有直接报错
//直接打印报错，不执行console  
//Identifier 'a' has already been declared
console.log(1);
let a=1;
var a=2;
  • 阻断了window的关系
let a=1;
"a" in window;//false
  • 不能重复声明
//直接打印报错，不执行console  
//Identifier 'a' has already been declared
console.log(1);
let a=1;
var a=2;
  • 暂时性死区:在声明变量之前的那个区域是不允许访问变量的，一旦访问就报错
console.log(a);//a is not defined
let a=2;
小练习
let a=10;
let b=10;
let fn=function(){
    console.log(a);//报错Cannot access 'a' before initialization
    //let a是私有变量，所以会在自身作用域查找，但是在let前面使用，所以报错
    let a=b=20;
    console.log(a,b);
}
fn();
console.log(a,b);

var a=12,b=13,c=14;
function(a){
console.log(a,b,c);//12,undefined,14
var b=a=c=20;
console.log(a,b,c);//20,20,20
}
fn(a);
console.log(a,b,c);//12,13,20

var ary=[12,13];
function fn(ary){
   console.log(ary);//[12,13]
   ary[0]=100;
   ary=[100];
   ary[0]=0;
   console.log(ary);//[0]
}
fn(ary);
console.log(ary);//[100,13]
上级作用域

上级作用域是谁，跟在哪执行没有关系，跟这个函数在哪定义有关系

function A() {
    function B() {
        function C() {

        }
    }
}
//C的上级作用域是B，B的上级作用域是A，A的上级作用域是window
小练习
var a=3;
function fn(){
console.log(n);
}
function sum(){
var a=6;
fn();
}
fn();//3
sum();//3

var n=10;
function fn(){
    var n=20;
    function f(){
        n++;
        console.log(n);
    }
    f();
    return f;
}
var x=fn();//21    赋值 x=f(){n++;console.log(n)}的空间地址
x();//22 
x();//23
console.log(n);//10

图解
在这里插入图片描述

堆栈内存的释放问题

我们每次给变量存储值或者执行函数的时候都会占用内存空间，如果一直这样下去，电脑会装不下，所以内存是需要释放的

堆内存的释放 背

让所有引用这个堆内存的变量赋值为null，堆内存地址不被占用，浏览器在空闲时就会把堆内存释放 ，例如：

var obj=[1,2,3];
var obj2=obj;
obj=null;
obj2=null;
常见的浏览器释放主要有两种：
  • 谷歌浏览器是标记方式，每隔一段时间就会检测以下当前作用域中的内存，是否被占用，如果没有被占用，就会释放掉。
  • ie和火狐等浏览器采用的是计数方式，当前作用域中如果一个空间地址被占用一次，就会累加一次，如果减少一次占用会减1，直到0的时候，说明已经没有被占用了，就释放了
栈内存的释放 背
  • 1、 全局栈内存，当页面关闭才会销毁
  • 2、函数执行的栈内存，当函数执行完毕一般情况下会销毁
  • 3、函数执行的栈内存还有一种情况不会被销毁,函数内的引用数据类型的值被外面的变量占用了，所以就不销毁，例如：
//不销毁，return的函数被外面的f占用
var function fn(){
    var num=2;
    return function(){
       console.log(num);
    };
};
var f=fn();

//不销毁,因为函数内的ary地址被外面的占用
var ary=[];
function fn(){
ary=[1,2,3];
}
fn();
  • 4、不立即销毁,等待内部全部执行完毕销毁
//等待return的函数执行完销毁
function fn(){
	return function(){
		console.log(1);
	}
}
fn()();

function fn(i) {
    return function (n) {
        console.log(n + (++i));
    }
}
var f = fn(2);//f= function(n){console.log(n+(++i))}的地址  
f(3);//6
fn(5)(6);//12
fn(7)(8);//16
f(4)//8

闭包

  • 当一个函数执行，形成了一个私有作用域，保护里面的私有变量不受外界的干扰，这种机制就叫做闭包；
  • 在市场上大部分人口中的闭包：当一个函数执行的时候，里面有一个引用数据类型被外界占用了，形成了不销毁的作用域,例如:
function fn(){
	return function(){};
}
var res=fn();
闭包的作用
  • 保护：保护私有作用域中的变量不被外界的干扰
  • 保存：因为形成了不销毁的作用域，可以保存里面的私有变量
引伸–工作中闭包的应用(不用记)
  • 两个人开发一个项目，到合并代码时防止变量冲突，可以用闭包
  • JQuery
(function(){
    function jquery(){
    }
    //把jquer 这个方法通过window添加属性暴露到全局
    window.jquery=window.$=jquery;
})()
//在使用的时候： jquery() 或者$()
  • 把一些东西暴露在外面
var utils = (function () {
    var num = 0;
    function fn1() {
        console.log(1)
    }
    return {
        fn1: fn1
    }
}
)()
utils.fn1();//调用utils里面的fn1函数
练习，闭包实现选项卡

html，css部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
            font-size: 0;
        }

        #main {
            width: 500px;
            margin: 0 auto;
        }

        li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            display: inline-block;
            margin-left: 20px;
            border: 1px solid red;
            position: relative;
            text-align: center;
            top: 1px;
        }

        li:nth-child(1) {
            margin-left: 0;
        }

        #main div {
            height: 200px;
            text-align: center;
            line-height: 200px;
            border: 1px solid red;
            display: none;
        }

        #main li.appear {
            background: red;
            border-bottom-color: transparent;
        }

        #main div.appear {
            display: block;
            background: red;
        }
    </style>
</head>

<body>
    <div id="main">
        <ul>
            <li class="appear">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="appear">1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

闭包实现选项卡方法1

    var main = document.querySelector('#main');
    var lis = main.querySelectorAll("li");
    var divs = main.querySelectorAll("div");
    for (var i = 0; i < lis.length; i++) {
    (function(i){
        lis[i].onclick=function(){
        for(var j=0;j<lis.length;j++){
            console.log(j);
            divs[j].className="";
            lis[j].className="";
        }
        lis[i].className="appear";
        divs[i].className="appear";
    }
    })(i)}

第二种

    var main = document.querySelector('#main');
    var lis = main.querySelectorAll("li");
    var divs = main.querySelectorAll("div");
      for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = (function (i) {
            return function () {
                lis[i].onclick = function () {
                    for (var j = 0; j < lis.length; j++) {
                        console.log(j);
                        divs[j].className = "";
                        lis[j].className = "";
                    }
                    lis[i].className = "appear";
                    divs[i].className = "appear";
                }
            }
        })(i)
    }

在这里插入图片描述

第三种

for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            for (var j = 0; j < lis.length; j++) {
                divs[j].className = "";
                lis[j].className = "";
            }
            lis[i].className = "appear";
            divs[i].className = "appear";
        }
    }

方法总结，都是让他每i++一次生成一个栈内存，不利于运行，了解即可

cuishoulong3424
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端小知识--从Javascript闭包看let
weixin_33829657的博客
03-19 112
let和闭包 之前一直模模糊糊记得，let解决了某个闭包问题，想用时又不敢肯定，今天终于遇到这个问题了，那我们就一起来分析一下，什么是let，let有什么作用，以及，他是如何解决闭包的，当然，也顺便好好聊聊闭包。 1、闭包 1.1 闭包的定义 闭包的定义是这样的：内部函数被保存到了外部，即为闭包先来看一个简单的例子： //我们声明一个函数...
学习笔记之JavaScript查找上级作用域
Sys_菜菜
06-17 216
上级作用域 函数在哪儿定义的，它的上级作用域就是谁（和函数在哪儿执行没有关系） 我们来看一段代码 var num = 12; function fn() { var num = 120; return function() { consoloe.log(num); }; } var f = fn(); f(); (function () { var num =1200; f(); })() 白话 1、return 返回的东西，不进行预解释（r
let与闭包
jsyxiaoba的博客
04-26 761
闭包是js里面很重要的一环，常见的闭包在这里举个简单例子： var f = function(){ var i = 0; return function(){ i++; console.log(i); } } var s = f(); s(); // 1 s(); // 2 s(); // 3 简单说就是：函数 f 内部的变量 i 被外部函数 s 引用到了，且 i 不能被释放...
javascript 闭包以及let和var的一点点思考
朱宏的博客
09-01 746
let和var的区别 let新特性 1.不存在变量提升（变量声明之前赋值报错，var为undefined） 2.存在暂时性死区（let变量一旦被声明，就会存在一个封闭的绑定的区域，无法再次被绑定，我们称之为“暂时性死区”） 3.不允许重复声明 4.具有块级作用域 5.块级作用域和函数声明（允许在块级作用域声明内部函数，其声明方式性质和let一样） JavaScript 闭包 闭包就是将函数作为返回值返回，返回的函数并不会立即执行。 例子（参考廖老师js教程：https://www.liao
js之函数作用域、闭包、变量
weixin_46820017的博客
08-22 159
什么是闭包？ 简单来讲，闭包就是在一个函数里面又包含一个函数，内部函数有权访问外部函数声明的变量；闭包涉及到函数作用域、内存机制、作用与链的相关知识 1、函数作用域 所谓函数作用域就是，声明一个函数，在内存创建一个私有的的作用域——一个封闭的空间 Function fn(){ var a = 11; } fn(); 超出这个作用域就不再访问这个变量。 2、内存回收机制 所谓的内存回收机制就是系统自动进行回收并清理那些不需要用到的内存，腾出空间给其他程序使用。 作用域链 function fn()
Web-前端教程37 JS进阶：作用域.zip
05-24
本教程专注于JS的进阶主题——作用域，这是理解和编写高效、无错误代码的基础。作用域决定了变量和函数的可访问性，对于优化代码和防止命名冲突至关重要。 一、全局作用域 全局作用域是最外层的代码空间，任何在这...
JavaScript进阶（二）词法作用域与作用域链实例分析
10-15
但在JavaScript中，由于历史原因，ES6之前并没有真正的块级作用域，而是通过`let`和`const`关键字引入了这个特性。在ES5及以前，`var`声明的变量会提升到其所在函数的作用域顶部，导致在块级作用域内声明的变量可以...
js进阶知识-知识点-demo演示
09-14
闭包允许函数访问并操作外部作用域的变量，即使在函数执行完毕后。这种特性使得闭包常用于模块化、数据封装和内存管理。以下是一个简单的闭包示例： ```javascript function outerFunction() { let outerVariable ...
js基础-高级-进阶学习
12-20
- **闭包**：理解作用域链，如何创建和使用闭包，以及闭包在内存管理中的作用。 - **原型与原型链**：理解对象的构造函数、原型对象以及如何通过原型链实现继承。 - **this关键字**：在不同上下文中this的指向，...
Javascript基础回顾之(二) js作用域
12-10
JavaScript中的作用域是编程语言中一个非常核心的概念，它决定了变量和函数的...理解参数传递、作用域链、块级作用域以及作用域链的动态变化是JavaScript开发者的基础技能，对于进阶学习如闭包和异步编程也有很大帮助。
js中闭包与let的不解之缘
weixin_43605299的博客
10-22 376
最近在学ES6，学了let，突然想起一个我以前遇到的bug，相信也有很多同学也遇到过同样的bug。我们先看看下面的代码： //html、js代码 <body> <button>a</button> <button>b</button> <button>c</button> <br> &l...
ES6 let语法实现闭包
Clyde Kuo
02-10 1万+
在ES5时代，通常使用函数 return 嵌套函数实现闭包，这里我就不细说了，可参考《Javascript闭包——懂不懂由你，反正我是懂了》，《什么是闭包，我的理解》。 在ES6时代，我们可以利用let 来很方便的实现闭包，先来看两段代码：var arr=[]; for(var i=0;i<10;i++){ arr.push(()=>i) } console.log(arr[2]()) /
闭包问题 let实现
水月夜的博客
03-19 3339
之前有了解过很多闭包知识，还算清楚概念。 闭包就是能够读取其他函数内部变量的函数。 通常情况下，js函数的外部是无法读取函数内部的变量，但是函数内部可以读取函数外部的变量。而有时候，我们会需要得到函数内部的局部变量，就需要用到闭包。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 简单的说，Javascript允许使用内部函数—即函数定义和
js闭包及var和let对闭包的作用
行走的过客
08-25 884
js闭包及var和let对闭包的作用 为了便于理解，本文用一个例子程序来体现js闭包和var、let变量声明对所谓闭包的作用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </hea...
let和闭包有啥关系
weixin_33681778的博客
04-22 2555
前言 闭包这个概念并不是 JavaScript 的专利，本篇中描述的闭包均是 JavaScript 中的闭包，其相关的描述也均是围绕 JavaScript 来的。在 JavaScript 中闭包是很常见的，有时甚至不经意间就写出来了，可能自己还没有意识到。比如下面 { let a = 'a'; function getBlockA() { return a; ...
JavaScript闭包与let的关系
qq_24518001的博客
08-27 462
JavaScript闭包与let的关系
彻底理解js中的闭包
热门推荐
dovlie的博客
07-29 6万+
闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？ 我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前包含当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下无法获取内层作用域下的变量，同样在不同的...
JS中使用let解决闭包
vvull的博客
07-13 272
for循环中添加的点击事件
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
最新发布
小丁的博客
07-08 306
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
JavaScript之函数
09-19
函数的作用及创建方式、函数的本质、函数内部属性、函数的作用域、回调函数、闭包、

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值