函数定义、this指向、闭包等

news/2024/4/26 8:10:04/文章来源:https://blog.csdn.net/weixin_45630345/article/details/128094095

1、函数的定义和调用

1.1函数的定义方式

1、自定义函数(命名函数)
2、函数表达式(匿名函数)
3、利用 new Function (‘参数1’, ‘参数2’, ‘函数体’)

1、自定义函数(命名函数)
function fn() {}2、函数表达式(匿名函数)
var fun = function() {}3、利用 new Function ('参数1', '参数2', '函数体')
var f = new Function'a', 'b', 'console.log(a + b)')

所有函数都是 Function 的实例(对象)

1.2函数的调用方式

1、普通函数
2、对象的方法
3、构造函数
4、绑定事件函数
5、定时器函数
6、立即执行函数

1、普通函数
function fn() {// this指向windowconsole.log('Hello World!', this)
}
fn();  
// fn.call()2、对象的方法
var o = {sayHi: function() {// this指向oconsole.log('快乐', this)}
}
o.sayHi()3、构造函数
function Star() {}
// this指向 ldh这个实例对象,原型对象里面的this也指向ldh这个实例对象
var ldh = new Star();
Star.prototype.sing = function() {}4、绑定事件函数
// this指向函数的调用者 btn
btn.onclick = function() {} // 点击调用5、定时器函数
// this指向window
setInterval(function() {}, 1000) // 1s调用一次6、立即执行函数
(function() {console.log('立即执行') // 立即执行函数是自动调用
})()

2、this

2.1函数内this的指向

在这里插入图片描述

2.2改变函数内部this指向

3种方法:call()、apply()、bind()

1、call()
var o = {name: 'andy'
}
function fn(a, b) {// 原本指向window,添加fn.call(o)后指向了oconsole.log(this)console.log(a + b)
}
fn.call(o, 1, 2)
// call作用: 第一个可以调用函数,第二个可以改变函数内的this指向
// call的主要作用可以实现继承
function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;
}
function Son(uname, age, sex) {Father.call(this, uname, age, sex)
}
var son = new Son('刘德华', 18, '男')
console.log(son)2、apply()
var o = {name: 'andy'
}
function fn(arr) {// 原本指向window,添加fn.apply(o)后指向了oconsole.log(this)console.log(arr)
}
fn.apply(o, ['pink'])
// apply作用: 第一个可以调用函数,第二个可以改变函数内的this指向
// 参数必须是数组
// apply的主要应用,比如说可以借用数学内置对象求最大值
var arr = [1, 0, 99 ,3]
var max = Math.max.apply(Math, arr)3、bind()
var o = {name: 'andy'
}
function fn(a, b) {// 原本指向windowconsole.log(this)console.log(a + b)
}
var f = fn.bind(o, 1, 2)
f()
// 不会调用原来的函数,但能改变this指向
// 返回的是原函数改变this之后产生的新函数
// 应用: 如果有的函数不需要立即调用,但是又要改变this指向(点击一个按钮之后,禁用按钮,3秒后开启按钮)

2.3call 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指向

3、严格模式

3.1 介绍

严格模式在IE10以上版本的浏览器才会被支持,旧版本浏览器会被忽略,采用正常模式。
严格模式对正常的javascript语义做了一些更改:
1、消除了javascript语法的一些不合理,不严谨之处;
2、消除代码运行的一些不安全之处;
3、提高编译器效率;
4、不允许使用一些保留字:class、enum等做变量名;

3.2 开启严格模式

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

1、为脚本开启严格模式: 在所有语句之前放一个"use strict"

<script>"use strict"console.log("这是严格模式")
</script>
// 如果是立即执行函数
<script>(function(){"use strict"var num = 10function fn() {}})()
</script>

2、为函数开启严格模式: 在函数中放一个"use strict"

<script>function fn(){"use strict"// 下面代码按照严格模式执行}function fun(){// 里面按照普通模式执行}
</script>

3.3 严格模式中的变化

1、变量规定
①在正常模式下,如果一个变量没有声明就赋值,默认是全局变量。严格模式下禁止这种用法,必须先声明再使用;
②不能随意删除已经声明好的变量,例如:delete x;语法是错误的;
2、严格模式下this指向问题
③以前全局作用域中this指向window,严格模式下this是undefined;
④严格模式下,如果构造函数不加new调用,this会报错;如果new的话,指向创建的对象实例,不报错;
⑤定时器this还是指向window;
⑥事件、对象还是指向调用者;
3、函数变化
⑦函数不能有重名参数;
⑧不允许在非函数的代码块(if、for等)中声明函数

4、高阶函数

高阶函数是对其它函数进行操作的函数,他接收函数作为参数或将函数作为返回值输出。
函数也是一种数据类型,同样可以作为参数,最典型的就是作为回调函数。

function fn(a, b, callback) {console.log(a + b)callback && callback()
}
fn(1, 2, function(){console.log('我是最后调用的')
})

5、闭包

5.1 变量作用域

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

5.2 什么是闭包

有权访问另一个函数作用域中变量,被访问变量的函数称为闭包。
闭包的主要作用:延伸了变量的作用范围

// fn外面的作用域可以访问fn内部的局部变量
function fn() {var num = 10function fun() {console.log(num)}return fun
}var f = fn()
f()

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jsp196ssm毕业设计选题管理系统hsg4361B6

本系统选用Windows作为服务器端的操作系统&#xff0c;开发语言选用Java&#xff0c;数据库选用Mysql&#xff0c;使用mybatis数据库连接技术&#xff0c;使用Myeclipse作为系统应用程序的开发工具&#xff0c;Web服务器选用Tomcat版本。 下面分别简单阐述一下这几个功能模块需…

外汇天眼:经济衰退无阻加息,欧美货币政策齐收紧

美联储和欧洲央行官员在近两日发表讲话&#xff0c;先后释放进一步加息信号&#xff0c;美股、欧股事后均收跌&#xff0c;市场预计美元、欧元近期将下跌。 通胀仍高于目标&#xff0c;两大央行将进一步加息 除了非农报告等关键通胀数据&#xff0c;本周央行动态同样备受市场关…

[附源码]Python计算机毕业设计SSM流浪动物管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

(4E)-TCO-PEG4-DBCO,1801863-88-6,反式环辛烯-四聚乙二醇-二苯并环辛炔

(4E)-TCO-PEG4-DBCO物理数据&#xff1a; CAS&#xff1a;1801863-88-6 | 中文名&#xff1a;(4E)-反式环辛烯-四聚乙二醇-二苯并环辛炔 | 英文名&#xff1a;(4E)-TCO-PEG4-DBCO 结构式&#xff08;Structural&#xff09;&#xff1a; (4E)-TCO-PEG4-DBCO物理数据补充&…

vue+videojs视频播放、视频切换、视频断点分段上传

“本次需求是做一个视频列表&#xff0c;点击视频列表播放对应视频&#xff1b;同时要求实现断点分段上传大文件&#xff08;视频&#xff09;的功能 。 videojs文档&#xff1a;Getting Started with Video.js - Video.js: The Player Framework | Video.js 断点续传组件地址…

linux安装elasticsearch-head (es可视化界面)

系列-Linux centos7.6 安装elasticsearch8.x (es8) 教程 Linux centos7.6 安装elasticsearch8.x (es8) 教程_言之有李LAX的博客-CSDN博客 系列-linux安装elasticsearch-head &#xff08;es可视化界面&#xff09; linux安装elasticsearch-head &#xff08;es可视化界面&am…

浅析linux内核网络协议栈--linux bridge

1 . 前言 本文是参考附录上的资料整理而成&#xff0c;以帮助读者更好的理解kernel中brdige 模块代码。 2. 网桥的原理 2.1 桥接的概念 简单来说&#xff0c;桥接就是把一台机器上的若干个网络接口“连接”起来。其结果是&#xff0c;其中一个网口收到的报文会被复制给其他…

httpclient

1.什么是httpclient HttpClient 是Apache Jakarta Common 下的子项目&#xff0c;可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新的版本和建议。 2.http请求&#xff08;结合spring的注解&#xff09; 2-1GET请…

TStor OneCOS 技术专栏——轻松单桶万亿

TStor OneCOS简介 TStor OneCOS海量对象存储&#xff08;后面简称OneCOS&#xff09;&#xff0c;是基于腾讯云公有云存储架构打造的完全自研的分布式软件定义存储&#xff0c;轻松支持单桶万亿对象和EB级容量&#xff0c;集群容量无限伸缩&#xff0c;同时支持高密大盘等多种…

STL的常用算法-查找 (20221130)

STL的常用算法 概述&#xff1a; 算法主要是由头文件<algorithm> <functional> <numeric> 组成。 <algorithm>是所有STL头文件中最大的一个&#xff0c;涉及比较、交换、查找、遍历等等&#xff1b; <functional>定义了一些模板类&#xff0…

如何设计可扩展架构

架构设计复杂度模型 业务复杂度和质量复杂度是正交的 业务复杂度 业务固有的复杂度&#xff0c;主要体现为难以理解、难以扩展&#xff0c;例如服务数量多、业务流程长、业务之间关系复杂 质量复杂度 高性能、高可用、成本、安全等质量属性的要求 架构复杂度应对之道 复杂…

野火FPGA进阶(2):基于I2C协议的EEPROM驱动控制

文章目录第49讲&#xff1a;基于I2C协议的EEPROM驱动控制理论部分设计与实现i2c_ctrli2c_rw_dataeeprom_byte_rd_wrtb_eeprom_byte_rd_wr第49讲&#xff1a;基于I2C协议的EEPROM驱动控制 理论部分 I2C通讯协议&#xff08;Inter-Integrated Circuit&#xff09;是由Philips公…

改革后IB数学该如何选?

IB数学&#xff0c;作为一个IB课程里必选科目&#xff0c;让无数IB学霸为之自豪&#xff0c;他们能解出外教都不会做的题。另一方面&#xff0c;也让很多同学&#xff08;自称“学渣”&#xff09;避之不及。 从2019年起&#xff0c;IB数学教学大纲发生重大改革。▲图源&#x…

C语言详细知识点(下)

⛄️上一篇⛄️C语言详细知识点&#xff08;上&#xff09; 文章目录五、数组1、一维数组的定义及使用2、二维数组的定义及使用3、字符数组的定义及使用六、函数1、函数的定义2、函数的调用3、函数的声明4、函数的嵌套调用5、函数的递归调用七、指针1、什么是指针2、指针变量3、…

链表之反转链表

文章目录链表之反转链表题目描述解题思路代码实现链表之反转链表 力扣链接 题目描述 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 示例&#xff1a; ​ 输入: 1->2->3->4->5->NULL ​ 输出: 5->4-&…

基于vue项目的代码优化

前言 项目上线后其整体性能的优良是用户也是研发人员所关注的。项目优化非常重要&#xff0c;一丝一毫的提升都是对用户的负责。因此我们在开发中就应该注重细节&#xff0c;优化工作从日常开发做起。本篇文章就分享一些在日常开发中代码层面的优化手段。 开发常用优化手段 …

达摩院快速动作识别TPS ECCV论文深入解读

一、论文&代码 论文&#xff1a;https://www.ecva.net/papers/eccv_2022/papers_ECCV/papers/136630615.pdf 模型&代码&#xff1a;ModelScope 魔搭社区 二、背景 高效的时空建模(Spatiotemporal modeling)是视频理解和动作识别的核心问题。相较于图像的Transforme…

开源共建 | TIS整合数据同步工具ChunJun,携手完善开源生态

TIS整合ChunJun实操 B站视频&#xff1a; https://www.bilibili.com/video/BV1QM411z7w5/?spm_id_from333.999.0.0 一、ChunJun 概述 ChunJun是一款易用、稳定、高效的批流统一的数据集成框架&#xff0c;可基于实时计算引擎Flink实现多种异构数据源之间的数据同步与计算&…

flink学习

Flink学习之路&#xff08;一&#xff09;Flink简介 - 走看看 Flink(一)-基本概念 - 知乎 Flink架构&#xff1a; Flink整个系统包含三个部分&#xff1a; 1、Client&#xff1a; 给用户提供向Flink系统提交用户任务&#xff08;流式作业&#xff09;的能力。用户提交一个F…

全球无人驾驶大洗牌,百度Apollo Day宣告Robotaxi进入2.0时代

作者 | 德新 编辑 | 王博1. 全球无人驾驶大洗牌&#xff0c;Robotaxi越发向头部聚集 全球无人驾驶落地正呈现两幅面孔。随着资本热潮褪去&#xff0c;一部分公司在资金和研发上已经难以为继&#xff0c;Robotaxi落地的资源和希望&#xff0c;正无限向头部公司聚集。 10月&#…