JavaScript第五日学习笔记

最新推荐文章于 2024-10-01 12:49:02 发布
最新推荐文章于 2024-10-01 12:49:02 发布
阅读量28 收藏
点赞数
文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72365258/article/details/132173290
版权

一：闭包

1.什么是闭包

JS 中函数会产生闭包。

闭包是函数本身和该函数声明时所处的环境状态的组合。

函数能够 “记忆” 其定义时所处的环境，即使函数不在其定义的环境中被调用，也能访问定义时所处环境的变量。

// 定义一个全局变量
var name = 'ABC';

// 创建一个函数
function fun() {
    // 定义局部变量
    var name = 'sw';
    // 返回一个局部函数
    return function() {
        console.log(name);
    };
}

// 调用外部函数，就能得到局部函数，用变量 inn 来接收
var inn = fun();
// 执行 inn 函数，就相当于在 fun 函数的外部，执行了局部函数
inn(); // "sw"

2.闭包的特点

  1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。

  2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

优点：可以访问局部变量。

缺点：局部变量一直占用内存，内存占用严重，还容易造成内存泄漏（内存被占用，剩余的内存变少，程序加载、处理速度变慢）

闭包的功能：记忆性、模拟私有变量（相当于把函数的数据封装了）。

3.闭包的用途

  1. 封装私有变量：通过使用闭包，可以创建私有变量，这些变量只能在函数内部访问，而外部无法直接访问。这样可以避免全局命名冲突和数据被意外修改。

  2. 实现模块化：通过使用闭包，可以创建模块化的代码结构，将相关的变量和函数封装在一个闭包中，避免全局污染，并提供了一种封装和隔离代码的方式。

  3. 保存函数的状态：闭包可以保存函数的状态，即使函数被多次调用，每次调用都可以保留之前的状态。这对于一些需要记住之前操作结果的函数非常有用。

  4. 实现回调和异步操作：闭包可以用于实现回调函数和处理异步操作。通过将回调函数作为闭包传递给其他函数，可以在特定事件发生或异步操作完成时执行回调函数。

  5. 实例练习：

     //实现计数器功能，每次调用函数都会增加计数器的值。
 function counter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

var myCounter = counter();
myCounter(); // 输出 1
myCounter(); // 输出 2
myCounter(); // 输出 3




//实现累加器功能，每次调用函数都会将传入的参数与之前的累加结果相加。
function accumulator() {
  var sum = 0;

  function add(num) {
    sum += num;
    console.log(sum);
  }

  return add;
}

var myAccumulator = accumulator();
myAccumulator(5); // 输出 5
myAccumulator(3); // 输出 8
myAccumulator(10); // 输出 18



    

  var arr = []
  for (var i = 0; i < 3; i++) {
  (function fn(i) {
     var i;
      arr[i] = function () {
      console.log(i)
             }
            })(i)
         }
         arr[0]()//0
         arr[1]()//1
         arr[2]()//2

    二：回调函数

      指将一个函数作为参数传递给另一个函数，并在特定事件发生或特定条件满足时调用该函数。回调函数常用于处理异步操作，例如定时器、事件处理、网络请求等。

function doSomething(callback) {
  // 执行一些操作
  // ...

  // 在操作完成后调用回调函数
  callback();
}

function callbackFunction() {
  console.log("回调函数被调用了！");
}

// 调用doSomething函数，并将callbackFunction作为回调函数传递
doSomething(callbackFunction);

function fn(arg){ }

当实参是一个number时，arg形参就按照数字来使用。

     function fn(arg) {
     var re = arg + 200
       console.log(re)
         }
      fn(200)

当实参是一个数组时，arg形参就按照数组来使用。

           function fn(arg) {
            var re = arg[1]
            console.log(re)
            }
            fn([12, 20, 40]) //20

当实参是一个对象时，arg形参就按照函数来使用。

          function fn(arg) {
            var re = arg["age"]
             console.log(re)
             }
          var obj = { age: 18 }
          fn(obj) //18

当实参是一个fm函数时，arg形参就按照函数来使用。

       function fn(arg, arg2) {
       var arg= function fm() { console.log(23) }
       console.log(arg.length, arguments.length)//
           console.log("sw")
           arg()
             console.log("ws")
         }

         function fm() { console.log(22); console.log("33") }//回调函数
        fn(fm, 200, 300)


运行结果：
           0 3 
           sw
           23
           ws

实例练习：

function fn(num, callback) {
  var result = num * 2;
  callback(result);
}

function callbackFunction(result) {
  console.log("结果是：" + result);
}

fn(5, callbackFunction); // 输出 结果是：10





  function getUserData(callback) {
  setTimeout(function() {
    var userData = { name: "John", age: 25 };
    callback(userData);
  }, 2000);
}

function callbackFunction(userData) {
  console.log("用户数据：", userData);
}

getUserData(callbackFunction); //  用户数据： { name: "John", age: 25 }

三：函数自调用

函数自调用的一般语法形式是将函数定义包裹在一对圆括号中，并在末尾添加另一对圆括号来立即执行函数。

以下是一个简单的函数自调用的示例：

(function() {
  console.log("这是一个自调用函数！");
})();

在上面的示例中，函数被定义为一个匿名函数，并使用一对圆括号将其包裹起来。最后的一对圆括号 () 调用了这个函数，使其立即执行。在控制台中会输出 "这是一个自调用函数！"。

函数自调用的主要用途是创建一个独立的作用域，避免变量污染全局命名空间。它还可以用于封装代码块，实现模块化和私有变量的概念。

函数自调用可以接受参数，并在调用时传递参数。例如：

(function(name) {
  console.log("欢迎，" + name + "！");
})("sw");

作用：

1.为变量赋值

var age = 12;
var sex = '男';
var title = (function () {
    if (age < 18) {
        return '小朋友';
    } else {
        if (sex == '男') {
            return '先生';
        } else {
            return '女士';
        }
    }
})();

2.将全局变量变为局部变量

var arr = [];
for (var i = 0; i < 5; i++) {
    (function (i) {
        arr.push(function () {
            console.log(i);
        });
    })(i);
}
for (var j = 0; j < arr.length; j++) {
    arr[j]();
}

四：对象的方法

JavaScript对象的方法是指对象中定义的函数。对象方法允许在对象上执行特定的操作或功能。

如何定义对象方法？

对象方法可以通过在对象字面量中定义函数来创建。

var myObject = {
  myMethod: function() {
    // 方法的代码
  }
};

如何调用对象的方法：

对象方法可以通过对象名称和方法名称来调用。例如：

myObject.myMethod();

在上面的示例中，myMethod 是 myObject 对象的方法，通过 myObject.myMethod() 来调用。

对象的成员，保存的只要不是函数，就称为属性，是函数，就称为方法。

任何函数运行一定有一个对象在调用。

全局的所有变量和函数都是window对象的成员。

实例练习：

  var myObject = {
  add: function(a, b) {
    return a + b;
  }
};

var result = myObject.add(5, 3);
console.log(result); // 输出 8

年糕吃不腻
关注
JavaScript中this用法学习笔记
12-08
JavaScript中的`this`关键字是许多开发者在学习过程中遇到的一个难点，因为它的行为并不是根据函数定义的位置来决定，而是根据函数的调用方式。在本文中，我们将深入探讨`this`的四种主要绑定规则：默认绑定、隐式...
Ruffy javascript 学习笔记
12-02
在Ruffy的JavaScript学习笔记中，主要涉及了几个关键概念：原型模型、继承、CSS盒模型、图像处理、反射机制、HTML表格属性以及Base64编码。 1. **JavaScript的原型模型**：在JavaScript中，对象可以通过构造函数...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1099
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 966
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4664
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
Javascript学习笔记五
qwsadsdga的博客
12-03 437
JavaScript中函数的定义方式。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1091
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
JavaScript的学习笔记
m0_62740234的博客
03-26 2169
自己在学习前段时整理的javascript笔记。
JavaScript学习笔记 01
m0_63882057的博客
06-18 973
在写牛客时对前端三件套（html，css，js）的知识点进行复习。在学vue或者做项目时对知识点进行补充。(在旧笔记基础上写的，导致有的知识点非常古早…有的又是最近的……)
JavaScript基本数据类型-学习笔记
2401_84434331的博客
04-26 952
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
JS学习笔记（JavaScript基础学习必备）
weixin_44009656的博客
05-01 4518
讲解JavaScript 基础语法、关键特性、JSON、WebAPI 等知识点。涉及网页窗口交互的方法以及通过 DOM 进行网页元素的相关操作。 文章目录一、JavaScript 基础1.什么是 JavaScript2.JavaScript 范例3.变量4.数字与运算符5.数组概述6.操作数组7.Null 和 Undefined8.字符串9.转换成字符串10.转换成数值类型11.转换成布尔类型二 、JavaScript 关键特性1.条件2.循环3.函数（参数，函数返回值）4.创建函数5.挑战：制作直角三角形
JavaScript 学习笔记（十一）
10-29
### JavaScript 学习笔记（十一）：深入理解 Document 对象 #### 一、Document 对象概述 在继续探讨 `document` 对象之前，我们先简要回顾一下 `document` 在 Web 开发中的重要性。`document` 对象代表当前加载在...
H.264学习笔记
zfenggo的博客
09-26 819
H.264凭借其出色的压缩效率、灵活的编码方式以及高质量的视频表现，成为了现代视频技术的核心标准之一。它不仅减少了存储需求，还提高了流媒体和实时视频传输的可行性。对于从高清到超高清视频，H.264的编码能力仍然广泛适用。H.264的帧结构设计（I帧、P帧和B帧）极大地提高了视频编码的压缩效率。I帧保存完整的图像信息，P帧通过参考之前的帧减少冗余数据，而B帧则通过双向参考提供进一步的压缩优势。这种帧间的协同工作大幅降低了带宽需求和存储成本，同时保持了视频的高质量。NALU头。
从0学习React（3）
qq_54432917的博客
09-29 575
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
2024-2025华为ICT大赛报名｜赛前辅导｜学习资料
qq2859066538的博客
09-25 310
华为ICT大赛是华为公司打造的面向全球高校的年度ICT赛事，大赛以“联接、荣耀、未来”为主题，协同政府、高等教育机构、培训机构和行业企业，促进高校ICT人才培养、成长和就业，助力ICT人才生态繁荣。华为ICT大赛2023-2024实践赛涵盖网络、云、计算（第九届华为ICT大赛更名为基础软件）和昇腾AI四个赛道。为有效帮助参赛者把握命题思路、突破重点内容、检验学习效果、提高实战经验，更充分地备战大赛，华为首次推出华为ICT大赛2023-2024实践赛真题实战系列课程，为您铺就通往大赛的成功之路。
Elasticsearch学习笔记(2）
m0_74293254的博客
09-28 1054
创建索引: 使用 PUT 请求来定义索引及其映射。创建文档: 使用 POST 请求将数据添加到索引。读取文档: 使用 GET 请求获取特定文档。更新文档: 使用 POST 加上 _update 操作来修改现有文档。删除文档: 使用 DELETE 请求删除指定文档。删除索引: 使用 DELETE 请求删除整个索引。请求方式：POST请求格式：/{索引库名}/_doc/文档id示例：POST /my_index/_doc/1 { "field": "value" }
【DirectX sdk 学习使用】
最新发布
qq_41610493的博客
10-01 275
设置包含目录：打开你的项目属性，导航到VC++目录，然后在包含目录中添加DirectX SDK的Include文件夹路径。设置库目录：同样在VC++目录中，在库目录中添加DirectX SDK的Lib文件夹路径。运行安装程序：下载完成后，找到下载的安装程序（通常是一个.exe文件），双击运行。选择安装路径：选择你希望安装DirectX SDK的路径，或者使用默认路径。如果你有任何问题或需要进一步的指导，请随时告诉我。接受许可协议：在安装向导中，阅读并接受许可协议。完成安装：点击“安装”按钮，等待安装完成。
JavaScript学习笔记：数据类型与DOM操作
"学习JavaScript时个人做的笔记。" 在学习JavaScript时，笔记中涵盖了多个关键知识点，包括代码的位置、数据类型以及对象的创建等基础概念。首先，了解JavaScript代码的书写位置至关重要，因为这直接影响到代码的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值