【函数进阶】

news2025/1/2 2:34:41

函数进阶

  • 1 本节目标
  • 2 函数的定义和调用
    • 2.1 函数的定义方式
    • 2.2 函数的调用方式
  • 3 this
    • 3.1 函数内 this 的指向
    • 3.2 改变函数内部 this 的指向
      • 3.2.1 call方法
      • 3.2.2 apply方法
      • 3.2.3 bind方法
      • 3.2.4 call apply bind 总结
  • 4 严格模式
    • 4.1 什么是严格模式
    • 4.2 开启严格模式
      • 4.2.1 为脚本开启严格模式
      • 4.2.2 为函数开启严格模式
    • 4.3 严格模式中的变化
      • 4.3.1 变量规定
      • 4.3.2 严格模式下this指向问题
      • 4.3.3 函数变化
  • 5 高阶函数
  • 6 闭包
    • 6.1 变量作用域
    • 6.2 什么是闭包
    • 6.3 闭包案例
      • 6.3.1 ==循环注册点击事件(点击li打印当前索引号)==
      • 6.3.2 循环中的setTimeout(3秒钟之后打印li内容)
      • 6.3.3 计算打车价格
      • 6.3.4 思考题
      • 6.3.5 闭包总结
  • 7 递归
    • 7.1 什么是递归?
    • 7.2 利用递归求数学题
      • 7.2.1 求1 * 2 * 3...* n 阶乘
      • 7.2.2 求斐波那契数列
      • 7.2.3 利用递归求:根据id返回对应的数据对象
    • 7.3 浅拷贝和深拷贝

1 本节目标

  • 说出函数的多种定义和调用方式
  • 说出和改变函数内部this的指向
  • 说出严格模式的特点
  • 能把函数作为参数和返回值传递
  • 说出闭包的作用
  • 说出递归的两个条件
  • 说出深拷贝和浅拷贝的区别

2 函数的定义和调用

2.1 函数的定义方式

  • 函数声明方式function关键字(命名函数)
  • 函数表达式(匿名函数)
  • new Function()
    var fn = new Function('参数1', '参数2'....., '函数体')
    Function里面的参数都必须是字符串格式
  • 第三种方式执行效率低,也不方便书写,因此较少使用。
  • 所有函数都是Function的实例(对象)。
  • 函数也属于对象。
    在这里插入图片描述
    在这里插入图片描述

2.2 函数的调用方式

  • 普通函数
  • 对象的方法
  • 构造函数
  • 绑定事件函数
  • 定时器函数
  • 立即执行函数
    在这里插入图片描述

3 this

3.1 函数内 this 的指向

  • 这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同。一般指向我们的调用者。
    在这里插入图片描述
    在这里插入图片描述

3.2 改变函数内部 this 的指向

  • JavaScript提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题,常用的有bind()、call()、apply()三种方法。

3.2.1 call方法

  • call()方法调用一个对象。简单理解为调用函数的方式,但它可以改变函数的this指向。
  • fun.call(thisArg, arg1, arg2,...)
    在这里插入图片描述

3.2.2 apply方法

  • apply()方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。
  • fun.apply(thisArg, [argsArray])
    thisArg:在fun函数运行时指定的this值
    argsArray:传递的值,必须包含在数组里面
  • 返回值就是函数的返回值,因为它就是调用函数。
    在这里插入图片描述

3.2.3 bind方法

  • bind()方法不会调用函数。但是能改变函数内部this指向。
  • fun.bind(thisArg, arg1, arg2,...)
    thisArg:在fun函数运行时指定的this值
    arg1,arg2:传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝
    在这里插入图片描述

3.2.4 call apply bind 总结

  • 相同点:都可以改变函数内部的this指向
  • 不同点:
    1.call和apply会调用函数,并且改变函数内部this指向
    2.call和apply传递的参数不一样,call传递参数aru1,aru2…形式,apply必须是数组形式[arg]
    3.bind不会调用函数,可以改变函数内部this指向
  • 主要应用场景:
    1.call经常做继承
    2.apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值
    3.bind不调用函数,但还想改变this指向。比如改变定时器内部的this指向

4 严格模式

4.1 什么是严格模式

  • JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格的条件下运行JS代码。
  • 严格模式对正常的JavaScript语义做了一些更改:
    1.消除了JavaScript语法的一些不合理、不严谨之处,减少了一些怪异行为。
    2.消除代码运行的一些不安全之处,保证代码运行的安全。
    3.提高编译器效率,增加运行速度。
    4.禁用了在ECMAScript的未来版本中可能会定义的一些语法,为未来新版本的JavaScript做好铺垫。比如一些保留字如:class、enum、export、extends、import、super不能做变量名。

4.2 开启严格模式

  • 严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为脚本开启严格模式和为函数开启严格模式两种情况。

4.2.1 为脚本开启严格模式

  • 为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use strict";'use strict';
    在这里插入图片描述

4.2.2 为函数开启严格模式

  • 要给某个函数开启严格模式,需要把"use strict";'use strict';声明放在函数体所有语句之前。
    在这里插入图片描述

4.3 严格模式中的变化

  • 严格模式对JavaScript的语法和行为都做了一些改变。

4.3.1 变量规定

  • 在正常模式中,如果一个变量没有声明就赋值,默认是全局变量;严格模式禁止这种用法,变量都必须先用var命令声明,然后再使用。
  • 严禁删除已经声明变量。例如delete x;语法是错误的。

4.3.2 严格模式下this指向问题

  • 以前在全局作用域函数中的this指向window对象;
  • 严格模式下全局作用域中函数中的this是undefined
  • 以前构造函数时不加new也可以调用,当普通函数,this指向全局对象;
  • 严格模式下,如果构造函数不加new调用,this会报错;
  • new实例化的构造函数指向创建的对象实例。
  • 定时器里面的this还是指向window。
  • 事件、对象还是指向调用者。

4.3.3 函数变化

  • 严格模式下,函数不能有重名的参数。
  • 函数必须声明在顶层。新版本的JavaScript会引入“块级作用域”(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数。
    在这里插入图片描述
    在这里插入图片描述

5 高阶函数

  • 高阶函数是对其他函数进行操作的函数,它接收函数作为参数将函数作为返回值输出。(函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数)
    在这里插入图片描述

6 闭包

6.1 变量作用域

  • 变量根据作用域的不同分为两种:全局变量和局部变量。
    1.函数内部可以使用全局变量。
    2.函数外部不可以使用局部变量。
    3.当函数执行完毕,本作用域的局部变量会销毁。

6.2 什么是闭包

  • 闭包(closure)指有权访问另一个函数作用域中变量的函数。
  • 简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。
    在这里插入图片描述
    在这里插入图片描述
  • 闭包就是典型的高阶函数。
    在这里插入图片描述
  • 闭包的主要作用:延伸了变量的作用范围

6.3 闭包案例

6.3.1 循环注册点击事件(点击li打印当前索引号)

在这里插入图片描述

6.3.2 循环中的setTimeout(3秒钟之后打印li内容)

在这里插入图片描述

6.3.3 计算打车价格

在这里插入图片描述

6.3.4 思考题

在这里插入图片描述

6.3.5 闭包总结

  • 什么是闭包:闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)
  • 闭包的作用:延伸变量的作用范围

7 递归

7.1 什么是递归?

  • 如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。
  • 简单理解:函数内部自己调用自己。这个函数就是递归函数。
  • 递归函数的作用和循环效果一样。
  • 由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件return。
    在这里插入图片描述

7.2 利用递归求数学题

7.2.1 求1 * 2 * 3…* n 阶乘

在这里插入图片描述

7.2.2 求斐波那契数列

在这里插入图片描述

7.2.3 利用递归求:根据id返回对应的数据对象

在这里插入图片描述

7.3 浅拷贝和深拷贝

  • 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。
  • 深拷贝拷贝多层,每一级别的数据都会拷贝。
  • Object.assign(target,...sources)ES6新增方法可以浅拷贝。
    在这里插入图片描述
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1030977.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【校招VIP】交流技巧之面试时合理表达观点

考点介绍: 交流和表达是产品的面试最重要的考查点之一,也是产品必备工作技能。如果在面试中不能合理的与面试官沟通,或者不能把自己的思路和分析有逻辑的表达出来,都会对面试结果产生不好的影响。 交流技巧之面试时合理表达观点-…

【网络协议】Http-下

因为Http是无状态的,所以为了协助 Web 保持状态,Cookie 诞生了。 下面中是百度百科关于Cookie和Session的解释: Cookie:举例来说, 一个 Web 站点可能会为每一个访问者产生一个唯一的ID, 然后以 Cookie 文件的形式保存在每个用户的…

序列化 qmap

自定义的map不得行 但是qmap可以自己分配具体内存 这里没照完 待会照

通讯网关软件009——利用CommGate X2MQTT实现MQTT访问ODBC数据源

本文介绍利用CommGate X2MQTT实现MQTT访问ODBC数据源。CommGate X2MQTT是宁波科安网信开发的网关软件,软件可以登录到网信智汇(http://wangxinzhihui.com)下载。 【案例】如下图所示,实现上位机通过MQTT来获取ODBC数据源的数据。 【解决方案】设置网关机…

「Qt中文教程指南」如何创建基于Qt Widget的应用程序(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写,所有平台无差别运行,更提供了几乎所有开发过程中需要用到的工具。如今,Qt已被运用于超过70个行业、数千家企业,支持数百万设备及应用。 本文描述了如何使用…

【Java 并发编程】CopyOnWriterArrayList 详解

CopyOnWriterArrayList 详解 1. ArrayList1.1 ArrayList 和 LinkedList 的区别1.2 ArrayList 如何保证线程安全 2. CopyOnWriteArrayList 原理3. CopyOnWriteArrayList 的优缺点3.1 优点3.2 缺点 4. 源码分析4.1 两个成员变量4.2 构造函数4.3 add(E e)4.4 add(int index, E ele…

(总目录)springboot - 实现zip文件上传并对zip文件解压, 包含上传oss

全文目录,一步到位 1.本文概述1.1 本文简介 2. 功能实现2.1 统一文件校验2.2 普通(多)文件上传[服务器]2.2.1 controller层2.2.2 service层2.2.3 业务impl实现类2.2.4 FileIOUtils工具包代码 2.3 zip文件的解压2.4 图片文件的压缩2.5 oss文件后端上传2.6 oss文件前端上传2.7 后…

传统企业如何实现数字化转型?

传统企业实现数字化转型是一个复杂且多方面的过程,涉及将数字技术和战略融入业务的各个方面,以推动创新、效率和竞争力。以下是传统企业实现数字化转型可以遵循的步骤和策略: 1.领导层的认可和愿景: 首先要确保最高领导层&#x…

SpringCloud Gateway搭建Gateway 微服务应用实例

😀前言 本篇博文是关于SpringCloud Gateway搭建Gateway 微服务应用实例,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您…

前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础(三)

思维导图 一、循环-for 1.1 for 循环-基本使用 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport"…

scryptTS文档搜索功能上线!

在 scryptTS 文档中搜索 随着 scryptTS 文档的内容越来越丰富&#xff0c;从大量资料中快速定位感兴趣的部分变得越来越困难。 现在&#xff0c;你可以使用搜索功能&#xff0c;快速查找想了解的内容。

金蝶云星空与聚水潭对接集成物料查询连通商品上传(新)(物料主数据同步策略)

金蝶云星空与聚水潭对接集成物料查询连通商品上传&#xff08;新&#xff09;(物料主数据同步策略) 数据源系统:金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践&#xff0c;面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司&#x…

肖sir__项目环境之全流程__005

一、测试流程&#xff08;h模型&#xff09; 1、需求文档&#xff08;产品&#xff09; 需求文档&#xff08;软件需求规格说明书srs&#xff09; &#xff08;1&#xff09;如何分析需求 a、显示需求&#xff08;主流程、功能&#xff0c;业务&#xff09; b、隐性需求&#x…

java Spring Boot2.7实现一个简单的爬虫功能

首先 我们要在 pom.xml 中注入Jsoup 这是一个简单的java爬虫框架 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.14.1</version> </dependency>然后这里我们直接用main吧 做简单一点 我…

NSDT孪生场景编辑器系统介绍

一、产品背景 数字孪生的建设流程涉及建模、美术、程序、仿真等多种人才的协同作业&#xff0c;人力要求高&#xff0c;实施成本高&#xff0c;建设周期长。如何让小型团队甚至一个人就可以完成数字孪生的开发&#xff0c;是数字孪生工具链要解决的重要问题。考虑到数字孪生复杂…

Flask框架-2-[单聊]: flask-socketio实现websocket的功能,实现单对单聊天,flask实现单聊功能

一、概述和项目结构 在使用flask-socketio实现单聊时&#xff0c;需要将会话id(sid) 与用户进行绑定&#xff0c;通过emit(事件,消息,tosid) ,就可以把消息单独发送给某个用户了。 flask_websocket |--static |--js |--jquery-3.7.0.min.js |--socket.io_4.3.1.js |--template…

脑电相关临床试验及数据分析01

临床试验设计01–04 作为一个医疗器械公司的开发–>算法–>项目–>产品&#xff0c;还是想在这里记录一下工作。 直接开始吧 临床试验的设计&#xff0c;主要分为20个部分&#xff0c;分别是 封面 一、申办者信息 二、所有临床试验机构和研究者列表 三、临床试验的…

基础算法--位运算

位运算理解&#xff1a; n >> k&#xff1a;代表n右移k位 比如 000011 >> 1 000001 前面会补零&#xff08;所以第几位是从0开始计算&#xff09; n & 1&#xff1a;表示最后一位是否为1 比如&#xff1a;n 3 0011 而 1 0001 则3 & 1 0011 & 000…

本地Docker Registry远程连接,为你带来高效便捷的镜像管理体验!

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…

多输入多输出 | MATLAB实现LSSVM最小二乘支持向量机多输入多输出

多输入多输出 | MATLAB实现LSSVM最小二乘支持向量机多输入多输出 目录 多输入多输出 | MATLAB实现LSSVM最小二乘支持向量机多输入多输出预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 MATLAB实现LSSVM最小二乘支持向量机多输入多输出 1.data为数据集&#xff0c…