web前端-JavaScript中的函数(创建,参数,返回值,方法,函数作用域,立即执行函数)

简介: 简介函数(Function)函数也是一个对象函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)。函数中可以保存一些代码,在需要的时候调用。

文章目录

简介

函数的创建

1 用构造函数创建

2 用函数声明创建

3 用函数表达式创建

函数的参数

参数特性

1 调用函数时解析器不会检查实参的类型

2 调用函数时解析器不会检查实参的数量

3 当形参和实参过多,可以用一个对象封装

函数的返回值

立即执行函数

方法

函数作用域

补充:JavaScript中的作用域相关概念

简介

函数(Function)


函数也是一个对象

函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)。

函数中可以保存一些代码,在需要的时候调用。

函数的创建

在JavaScript中有三种方法来创建函数


构造函数创建

函数声明创建

函数表达式创建

其中第一种方法在实际使用中并不常用。创建函数之后需调用函数才可执行函数体内的代码。

函数的调用:


语法:函数名();


1 用构造函数创建

语法:var 函数名 = new Function(“语句;”)


使用new关键字创建一个函数,将要封装的功能(代码)以字符串的形式传递给封装函数,在调用函数时,封装的功能(代码)会按照顺序执行。

image.png

2 用函数声明创建

语法:function 函数名([形参1,形参2....]){语句...}

用函数声明显而易见的要简便许多,小括号中的形参视情况而写,语句写在中括号内。与构造函数不同的是不需要以字符串的形式写入。

image.png

3 用函数表达式创建

语法:var 变量(函数名)=function([形参1,形参2....]){语句...};

函数表达式和函数声明的方式创建函数的方法相似,不同的是用函数表达式创建函数是将一个匿名函数赋值给一个变量,同时在语句结束后需加分号结尾。

image.png

函数的参数

  • 可以在函数的()中来指定一个或多个形参(形式参数)。
  • 多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量但是并不赋值。
  • 调用函数时,可以在()中指定实参(实际参数),实参将会赋值给函数中对应的形参。

image.png

参数特性

1 调用函数时解析器不会检查实参的类型

函数的实参可以时任意数据类型,在调用函数时传递的实参解析器并不会检查实参的类型,因此需要注意,是否有可能接收到非法的参数,如果有可能则需要对参数进行类型的检查。

image.png

2 调用函数时解析器不会检查实参的数量

在调用函数传入实参时,解析器不会检查实参的数量,当实参数大于形参数时,多余实参不会被赋值。

image.png

当实参数小于形参数时,没有被赋值的形参为undefined。

image.png

3 当形参和实参过多,可以用一个对象封装

当形参和实参数量过多时,我们很容易将其顺序搞乱或者传递参数时出错,此时我们可以将数据封装在一个对象中,在进行实参传递时,传入该对象即可。

image.png

函数的返回值

可以使用return来设置函数的返回值

语法:return 值

  • return后的值将会作为函数的执行结果返回
  • 可以定义一个变量,来接收该结果。
  • 在return后的语句都不会执行。

image.png

若return后不跟任何值或者不写return,函数的返回值都是undefined。

image.png

image.png

另外,在函数体中return返回的是什么,变量接受的就是什么。

image.png

立即执行函数

  • 函数定义完,立即被调用,这种函数叫做立即执行函数
  • 立即执行函数往往只会执行一次
  • 通常为匿名函数的调用。

语法:(function(形参...){语句...})(实参...);

image.png

方法

对象的属性值可以时任意的数据类型,当属性值为一个函数时,在对象中调用该函数,就叫做调用该对象的方法。

image.png

函数作用域

调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁

每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的

在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量

当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError

image.png

补充:JavaScript中的作用域相关概念

作用域指一个变量的作用范围

在JavaScript中有两种作用域1.全局作用域 2.函数作用域

直接编写在script标签中的JS代码,都在全局作用域

全局作用域在页面打开时创建,在页面关闭时销毁

在全局作用域中有一个全局对象window它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用

image.png

简而言之我们创建的全局变量都作为一个属性保存在window这个对象中。

image.png

而在函数中创建局部变量时,必须使用var关键字创建,否则为全局变量。

image.png



相关文章
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
220 1
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
158 1
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
3月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
7月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
225 1
|
3月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
4月前
|
SQL 前端开发 安全
前端参数校验与SQL注入防护:构建安全的应用防线
在Web开发中,前端参数校验不仅能提升用户体验,更是防御SQL注入等安全威胁的重要手段。本文分享前端校验的最佳实践,包括输入格式校验与参数类型转换,帮助开发者有效增强应用安全性。
257 0
|
6月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。