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



相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
SQL 存储 安全
Web 常见攻击方式及防御方法
【10月更文挑战第25天】Web 安全是一个复杂而重要的领域,攻击者不断寻找新的攻击方法,我们需要不断加强防御措施,提高安全意识,以保障 Web 应用的安全运行。通过采取多种防御手段的综合运用,我们可以有效地降低 Web 攻击的风险,保护用户的信息和财产安全。同时,随着技术的不断发展,我们也需要持续关注和研究新的安全威胁和防御方法,以应对不断变化的安全形势。
432 56
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
73 5
|
2月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
80 5
|
2月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
60 7
|
2月前
|
存储 安全 Go
Web安全基础:防范XSS与CSRF攻击的方法
【10月更文挑战第25天】Web安全是互联网应用开发中的重要环节。本文通过具体案例分析了跨站脚本攻击(XSS)和跨站请求伪造(CSRF)的原理及防范方法,包括服务器端数据过滤、使用Content Security Policy (CSP)、添加CSRF令牌等措施,帮助开发者构建更安全的Web应用。
135 3
|
3月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
244 0
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
174 0
|
JavaScript 前端开发 程序员
好程序员web前端分享用JavaScript实现的5个常见函数
<div id="container"></div> <script> var count = 1 var container = document.getElementById('container') function getUserAction(e) { // 空格 if (e.
828 0