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

news2024/11/19 1:36:32

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
🐳博客主页:苏凉.py的博客
🌐系列专栏:web前端基础教程
👑名言警句:海阔凭鱼跃,天高任鸟飞。
📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
👉关注✨点赞👍收藏📂

文章目录

    • 简介
    • 函数的创建
      • 1 用构造函数创建
      • 2 用函数声明创建
      • 3 用函数表达式创建
    • 函数的参数
      • 参数特性
        • 1 调用函数时解析器不会检查实参的类型
        • 2 调用函数时解析器不会检查实参的数量
        • 3 当形参和实参过多,可以用一个对象封装
    • 函数的返回值
    • 立即执行函数
    • 方法
    • 函数作用域
    • 补充:JavaScript中的作用域相关概念

简介

函数(Function

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

函数的创建

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

  1. 构造函数创建
  2. 函数声明创建
  3. 函数表达式创建

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

语法:函数名();

1 用构造函数创建

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

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

在这里插入图片描述

2 用函数声明创建

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

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

在这里插入图片描述

3 用函数表达式创建

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

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

在这里插入图片描述

函数的参数

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

参数特性

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

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

函数的返回值

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

语法:return 值

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

若return后不跟任何值或者不写return,函数的返回值都是undefined。在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

立即执行函数

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

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

在这里插入图片描述

方法

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

在这里插入图片描述

函数作用域

  • 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
  • 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
  • 在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量
  • 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级作用域中寻找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError
    在这里插入图片描述

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

  • 作用域指一个变量的作用范围
  • 在JavaScript中有两种作用域1.全局作用域 2.函数作用域
  • 直接编写在script标签中的JS代码,都在全局作用域
  • 全局作用域在页面打开时创建,在页面关闭时销毁
  • 在全局作用域中有一个全局对象window它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
    在这里插入图片描述

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

而在函数中创建局部变量时,必须使用var关键字创建,否则为全局变量。
在这里插入图片描述

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

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

相关文章

VsCode安装yarn:yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名

1.出现的问题: 在使用VSCode终端的时候,输入命令:yarn install ,出现了问题: yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确&…

Less预处理——变量和嵌套

系列文章目录 文章目录系列文章目录一、Less 变量1、选择器变量2、属性变量3、url 变量4、声明变量5、变量运算6、变量的作用域7、用变量去定义变量二、Less 嵌套1、& 的使用2、媒体查询3、小技巧:添加私有样式一、Less 变量 1、选择器变量 让选择器变成动态的…

ant design vue的table取消自带分页

在我们使用ant design vue的table组件的时候会发现&#xff1a; 组件使用如示&#xff1a; <a-table :columns"columns" :data-source"data" bordered></a-table> 显然并没有配置pagination属性&#xff0c;那为什么会出现分页器呢&#xff1…

Three.js基础入门系列(一)

01 Three.js前提须知 讲到 Three.js&#xff0c;就需要先说一下 OpenGL 和 WebGL。 OpenGL 是一个跨平台的3D/2D的绘图标准&#xff08;规范&#xff09;&#xff0c;WebGL&#xff08;Web Graphics Library&#xff09;是一种3D绘图协议。 WebGL允许把JavaScript和OpenGL 结…

uniapp 开发安卓App实现高德地图路线规划导航

文章目录技术概述技术详述问题与解决我的总结参考文献技术概述 描述这个技术是做什么的/什么情况下会使用到这个技术&#xff0c;学习该技术的原因&#xff0c;技术的难点在哪里。控制在50-100字内。 uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方…

21个超实用的 CSS 技巧分享(附图示)

本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选&#xff0c;此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码&#xff0c;创建一个响应式的文档布局。这个布局风格类似于文档页面&#xff0c;可以很好地展示各种信息。.parent…

【JavaScript】基于querySelector / querySelectorAll对元素的操作,为你的DOM API基础扫盲~

目录 一、通过querySelector / querySelectorAll获取元素 1.1 单个标签选中 1.2 多个标签选中 二、基于这组DOM API&#xff0c;对元素进行操作 2.1 innerHTML获取/修改元素内容 2.2获取/修改元素属性 三、单标签元素属性的获取和修改 3.1 value 3.2checked 3.3 type …

网上蛋糕商城JSP页面

首先是一个注册页面&#xff1a; 视图如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html> <head><title>用户注册</title><meta name"viewport" content"widthdevice-width, initial-scale1"><meta …

前端案例:像素鸟小游戏(js+dom操作,完整代码,附案例素材)

目录 一、案例效果 二、实现思路 三、完整代码详细注释 四、案例素材 一、案例效果 二、实现思路 创建游戏背景板和小鸟&#xff0c;并分别设置相对定位与绝对定位&#xff1b;初始化背景图的位置&#xff1b;初始化小鸟的位置&#xff1b;设置游戏状态&#xff0c;游戏开…

vue 的表单验证

1.使用<el-form>包裹整个表单 在其中使用:model 绑定数据 和 :rules绑定校验规则 <el-form :model"user" :rules"rules"> ...................................... </el-from> 2.在script中添加使用数据 以及 校验规则&#xff08;都添加…

Chrome浏览器中清除特定网站的Cookie数据

背景&#xff1a;当我们在网站上遇到错误时&#xff0c;经常会用到的一个方法就是清除Cookie&#xff0c;清除网站的Cookie和网站数据来重置本地的缓存&#xff0c;很多客户端引起的错误都可以使用该方法修复&#xff0c; 但是在清除Cookie时有一个问题是使用浏览器更多中的清…

css实现文字大小自适应

在页面编写中经常会碰到页面自适应的问题&#xff0c;也就是页面内部的元素会随着窗口的放大缩小而放大缩小&#xff0c;box可以通过calc 百分比的形式做到页面自适应&#xff0c;但是box内的字体却无法做到这点&#xff0c;往往box自适应大小了&#xff0c;内部的字体还是原来…

一行代码“黑”掉任意网站

文章目录只需一行代码&#xff0c;轻轻一点就可以把任意网站变成暗黑模式。 首先我们先做一个实验&#xff0c;在任意网站中&#xff0c;打开浏览器开发者工具(F12)&#xff0c;在 C1onsole 控制台输入如下代码并回车&#xff1a; document.documentElement.style.filterinve…

使用npm安装yarn

很多同学用惯了npm安装项目依赖&#xff0c; 想要尝试使用yarn的命令&#xff0c; 但是第一次使用yarn的时候&#xff0c;发现报错&#xff0c; 这是什么情况呢&#xff1f; 因为&#xff0c;想要使用yarn&#xff0c;需要首先安装yarn。 那么问题来了&#xff0c;如何安装呢…

IDEA 创建Maven Web项目

背景 公司有一个非常老的项目&#xff0c;决定进行简单重构&#xff0c;纳入自动化流水线部署的序列。原项目采用很古老的Jar包依赖模式&#xff0c;也就是直接将jar包放在项目中。同时&#xff0c;项目结构也非常奇特&#xff0c;不是标准的Web项目目录结果。 于是&#xff…

用vue实现打印页面的几种方法

1.第一种就是直接调用 window.print()方法 这种方法的坏处就是 默认打印整个页面&#xff0c;不能打印局部页面。 2.第二种使用v-print 首先先下载 npm install vue-print-nb --save 然后在main.js中引入 main.js中引入 import Print from vue-print-nb Vue.user(Print)由于…

JS 生成条形码(一维码)jsBarcode

jsBarcode 官网 一、安装 script 引入 <script src"JsBarcode.all.min.js"></script>地址&#xff1a;https://cdn.jsdelivr.net/npm/jsbarcode3.11.5/dist/JsBarcode.all.min.js 也可以进官网查看地址。 npm方式 安装&#xff1a; npm install jsb…

vue3路由配置与路由跳转

Vue Router 是Vue.js的官方路由器。它与 Vue.js 核心深度集成&#xff0c;使使用 Vue.js 构建单页应用程序变得轻而易举。特点包括&#xff1a; 嵌套路由映射 动态路由 模块化、基于组件的路由器配置 路由参数、查询、通配符 查看由 Vue.js 的过渡系统提供支持的过渡效果细粒度…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(下)

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ 蓝桥杯专栏&#xff1a;蓝桥杯题解/感悟 &#x1f5a5;️ TS知识总结&#xff1a;十万字TS知识点总结 &#x1f449; 你的一键三连是我更新的最大动力❤️&#xff01; &…

HTML插入图片

图片介绍一、src属性二、其余属性三、alt用法四、title用法五、属性特点六、src路径的讲解一、src属性 符号&#xff1a;img 特点&#xff1a;单标签 代码&#xff1a; <!doctype html> <html><head><meta charset"utf-8"><title>HT…