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

news2024/11/24 18:56:30

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指向window
	console.log('Hello World!', this)
}
fn();  
// fn.call()

2、对象的方法
var o = {
	sayHi: function() {
		// this指向o
		console.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)后指向了o
	console.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)后指向了o
	console.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) {
	// 原本指向window
	console.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 = 10
		function 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 = 10
	function fun() {
		console.log(num)
	}
	return fun
}

var f = fn()
f()

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

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

相关文章

微服务框架 SpringCloud微服务架构 6 Nacos 配置管理 6.1 Nacos 实现配置管理

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构6 Nacos 配置管理6.1 Nacos 实现配置管理6.1.1 统一配置管理6.1.2 直接开干…

Chapter9.4:线性系统的状态空间分析与综合(下)

此系列属于胡寿松《自动控制原理题海与考研指导》(第三版)习题精选&#xff0c;仅包含部分经典习题&#xff0c;需要完整版习题答案请自行查找&#xff0c;本系列属于知识点巩固部分&#xff0c;搭配如下几个系列进行学习&#xff0c;可用于期末考试和考研复习。 自动控制原理(…

UG NX二次开发(C#)-CAM-获取所有的加工刀具表单

文章目录 1、前言2、加工模块的刀具2.1 进入加工模板2.2 创建加工刀具3、创建一个UI Styler程序3.1 创建一个UI Styler3.2 保存对话框4、创建GetMachiningToolList工程5、添加代码6、保存工程,生成dll7、配置工程8、测试效果1、前言 UG NX软件最擅长的就是生成加工程序,包括…

Express操作MongoDB

一、Express框架通过Mongoose模块操作MongoDB数据库 1、MongoDB数据库&#xff1a; ​ &#xff08;1&#xff09;存放数据的格式&#xff1a;key-value ​ &#xff08;2&#xff09;数据库(database) ——- 集合(collection) ——- 文档(document) ​ &#xff08;3&…

数字逻辑·时序线路设计【原始状态表】

这一篇着重原始状态表 组合线路设计与时序线路设计的区别 组合线路设计方法&#xff1a; 确定输入和输出写真值表写表达式并化简根据题目给出的门或者其他要求进行变换&#xff08;取反&#xff09;画电路图 时序线路设计方法&#xff1a; 确定输入和输出&#xff0c;建立…

[Linux]------初识多线程

文章目录前言一、 Linux线程概念什么是线程线程理解证明C线程库二、页表三、线程的优点四、线程缺点五、线程异常六、线程的用途总结前言 本节重点&#xff01;&#xff01;&#xff01; 了解线程概念&#xff0c;理解线程与进程的区别和联系。学会线程控制&#xff0c;线程创…

因子模型套利定价理论APT的应用

本文是Quantitative Methods and Analysis: Pairs Trading此书的读书笔记。 一、APT&#xff08;套利定价理论&#xff09;应用于计算投资组合的风险 某个投资组合由两个股票A和B组成&#xff0c;它们的暴露系数向量(exposure vector)分别为和。两个股票在投资组合中的比重为…

Turtlebot2简单控制

遥控 遥控前为了让turtlebot接受命令&#xff0c;需要启动 roslaunch turtlebot_bringup minimal.lauch 键盘操作命令&#xff1a; roslaunch turtlebot_teleop keyboard_teleop.launch 简单脚本控制&#xff1a; 首先输入命令 roslaunch turtlebot_bringup minimal.lau…

WebRTC学习笔记七 pion/webrtc

一、Usage用法 1.使用Go Modules Go Modules are mandatory for using Pion WebRTC. So make sure you set export GO111MODULEon, and explicitly specify /v2 or /v3 when importing. 2.常见示例 example applications contains code samples of common things people bu…

Web3.0带来天翻地覆的变化?全面科普!所谓的Web3.0到底是什么?

Web3.0在2021年尾声突然蹿红&#xff0c;在美国国会的听证会里&#xff0c;一句“我们如何确保web3革命发生在美国”引发了大家对于Web3.0的关注&#xff0c;而后马斯克一篇内容为“有人看过web3.0吗? 我没有找到”的推文&#xff0c;将关于Web3.0的讨论推向了高潮。 甚至于这…

零基础入门JavaWeb——CSS相关知识

一、CSS的作用 SS是用于设置HTML页面标签的样式&#xff0c;用于美化HTML页面。 二、CSS的引入方式 2.1 行内样式 在要设置样式的标签中添加style属性&#xff0c;编写css样式&#xff1b;行内样式仅对当前标签生效。 <div style"border: 1px solid red;width: 10…

「MySQL高级篇」SQL优化

大家好&#xff0c;我是Zhan&#xff0c;一名个人练习时长一年半的大二后台练习生&#xff0c;最近在学MySQL高级篇&#xff0c;欢迎各路大佬一起交流讨论 &#x1f449;本篇速览 在前面对索引的的学习中&#xff0c;我们学习到了从MySQL“底层”优化了SQL执行查询的算法&…

认识微服务

认识微服务&#xff1a; 背景&#xff1a;随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。 这些架构之间有怎样的差别呢&#xff1f; 单体架构&#xff1a; 单体架构&#xff1a;将业务的所有功…

颜色的感知

人体内有三种颜色感知细胞&#xff0c;能感知红、绿、蓝三种颜色。 人体内还有一种光强感知细胞&#xff0c;这种关光的波长刚好和绿光接近。 椎状感应颜色 柱状感应强度。

[附源码]Python计算机毕业设计Django的专业技能认证系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

RocketMQ 的消费者类型详解与最佳实践

作者&#xff1a;凌楚 在 RocketMQ 5.0 中&#xff0c;更加强调了客户端类型的概念&#xff0c;尤其是消费者类型。为了满足多样的 RocketMQ 中一共有三种不同的消费者类型&#xff0c;分别是 PushConsumer、SimpleConsumer 和 PullConsumer。不同的消费者类型对应着不同的业务…

AI美颜SDK算法详解

AI美颜SDK是近几年兴起的新兴美颜方式&#xff0c;区别于传统的美颜工具&#xff0c;AI美颜采用人工智能的深度学习算法实现智能化美颜&#xff0c;下文小编将为大家讲解一下AI美颜SDK相关的知识。 一、与传统美颜的区别之处 从宏观角度来讲&#xff0c;AI美颜技术与传统美颜…

高维多元时序数据聚类

1. 简介 收集数据的能力不断增强&#xff0c;使我们有可能收集大量的异构数据。在可用的异构数据中&#xff0c;时间序列代表着尚未被充分探索的信息母体。当前的数据挖掘技术在分析时间序列时存在多个缺点&#xff0c;尤其是在应同时分析多个时间序列&#xff08;即多维时间序…

C# Winform控件库分享,免费开源,支持中文!(附DLL及教程)

这款控件包是基于MaterialSkin2二次开发的&#xff0c;可以更换想要的皮肤主题&#xff0c;一键转换暗色系&#xff0c;还拥有非常炫酷的动画&#xff0c;非常好看&#xff0c;原本的MaterialSkin2是国外团队开发的&#xff0c;不支持中文&#xff0c;所以我在里面加了几款中文…

springboot学生宿舍报修换宿管理系统-宿管

宿舍管理系统设计与实现由管理员和学生、宿管交互构成。学生对于本系统的使用&#xff0c;学生可以通过系统注册、登录&#xff0c;修改个人信息&#xff0c;查看学生宿舍、消息通知、换宿申请等功能。 宿管对于本系统的使用&#xff0c;宿管可以通过系统登录&#xff0c;修改个…