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

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

简介


函数(Function


  • 函数也是一个对象


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


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


函数的创建


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


  1. 构造函数创建


  1. 函数声明创建


  1. 函数表达式创建


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


函数的调用:


语法:函数名();


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

目录
相关文章
|
7月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
637 108
|
7月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
695 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
11月前
|
JavaScript 前端开发 API
|
9月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
148 2
|
9月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
267 1
|
11月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
413 8
|
Web App开发 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
5月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
492 4
|
9月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    874
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    401
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    305
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    271
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    399
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    582
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    605
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    186
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    527
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    343