前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题

简介: 本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。在使用函数时需要经过两个步骤,先声明函数后调用函数。

一、函数声明及调用

函数用于存储一段代码块,在需要的时候被调用,因此函数的使用需要经过两个步骤,先存储后使用,即声明函数后调用函数。

1)声明函数

声明函数有很多种方式,例如可以使用 function 关键字或者使用函数表达式声明,函数使用 function 关键字声明,需要保存的代码块包裹在大括号中。
语法:function 函数名(){ 保存的代码块 }
例1:

function sum(){
   
    console.log(1);
}

需要注意的是,函数在没有调用前是不会执行的,函数名的命名规则和变量的命名规则一样。

2)函数调用

函数的调用非常简单,函数名后面加括号就可以了,即:函数名()。
例2:

//1. 声明,没有调用前没有作用
function sum(){
   
    console.log(1);
}
//2. 调用
sum();

3)表达式声明

例3:

var f = function (){
   
   console.log("函数表达式");
}
f();//表达式调用

二、函数的简单使用

函数都是有目的性的,即每个函数都有自己要实现的功能。
例1:声明一个函数,计算两个数的和 10 20

// 声明函数: function 函数名 (){}
function sum(){
   
    console.log(10+20);
}
// 调用
sum();

例2:计算 0 至某个区域的累加和,假设这个区域是 0-100。
0-100之间的数,可以通过循环的形式获取,在循环中,变量i就是从0开始改变。

function sum() {
   
    var sum = 0;
    for(var i = 0; i <= 100;i++){
   
         sum += i;
    }
    console.log(sum);
}
sum();

上面代码中,如果我们想计算的累加和的区域是 0-50,0-70,或者是其他的范围,是不是每种情况都需要写一个函数,还是有其他的办法可以处理?这个时候需要给函数增加实参、形参

三、函数的参数

函数存在的目的,就是方便多次调用,就像上面的那个例子,如果想要计算0-100的和,直接调用那个函数就可以实现想要的功能。
但是有些时候,我们还是想要计算和,只不过是0-70,那么我们怎么办,把上面那个100换成70就可以,如果是0-50换成50就可以,是不是可以这么理解,这个函数的作用是计算0-n之间的累加和,但是n是多少,就看我们需要的是多少。
如果在函数中,出现不能确定的、可变的值,我们会使用函数参数来实现。

四、函数的形参与实参

1)形参

在声明函数时,函数中一些不确定的值,我们可以先定义一个变量表示,这个变量我们就称之为形参。
例1:

function sum(a){
    //var a
    console.log(a);
}

上面代码中,a 就是形参,每一个形参都是一个变量声明,只不过省略了 var,但是这个时候的形参并没有值。

2)实参

在调用函数时,如果函数声明时有参数,就可以在括号中传入具体的值,这个叫实参。
例2:

function sum(a){
    //var a = 10
    console.log(a);
}
sum(10); //实参

上面代码中,在函数声明的时候声明了一个形参 a,但是这个时候的 a 没有值,在函数调用时传入数值 10,则 a 被赋值 10,即 a=10, 所以最后打印结果为 10。

3)多个参数

如果函数有多个参数,参数之间使用逗号隔开。
例3:

function sum(a,b){
   console.log(a+b);}
sum(10,20);

多个参数时,形参和实参是一一对应的,第一个形参对应第一个实参,第二个形参对应第二个实参,以此类推。即a的值为10,b的值为20。

五、函数参数集合arguments

在 js 中,arguments 对象是一个特别的对象,当前函数的内置全局属性,表示当前函数的实参集合,它是一个伪数组,用法和数组类似。
例1:

function sum(a,b) {
   
    console.log(arguments); // 实参集合
    console.log(arguments.length,arguments[0]);//3,1
}
sum(1,2,3);

1)arguments 的使用

当参数个数不一定的时候,可以选择不设置形参,而是在函数内部通过获取arguments 得到实参,然后再进行操作。
例2:定义一个函数,计算所用的参数和(参数不固定);

function sum() {
   
    var sum = 0;
    for(var i = 0; i < arguments.length;i++){
   
        sum += arguments[i];
    }
    console.log(sum);
}
sum(3,4,5);
sum(1);

2)arguments与函数中变量的关系

例3:

function fun(a) {
    //a = 10
    arguments[0] = 3; //arguments[0] = 10 = 3
    alert(a); //3
    var a = 2;
    alert(a); //2
    alert(arguments[0]); //2
}
fun(10);

如果参数名与局部变量名相同后面的会覆盖前面的,arguments 可以改变参数的值。

六、函数的参数类型

函数的参数可以是 js 数据类型中的任何一个,即可以是 number,string,boolean,null,undefined,引用类型(function,array,object)中的任何一个,但是null 和 undefined 作为参数没有任何意义而且有时还会报错,因此基本上不会将这两个作为参数。
例1:声明一个函数,将函数作为参数传入

function fun1(fun) {
   
    fun();
}
function fun2() {
    
    console.log(“hello”);
}
fun1(fun2);

函数fun1在调用的时候,实参传入的是函数fun2,所以函数fun1中的形参fun表示的就fun2,所以在函数fun1的函数体中通过fun()调用fun2。

七、函数中的问题

7.1、函数中重复命名问题

声明函数时,两个函数的名字一样,后面的函数会覆盖前面的函数,也就是说只会保留后面声明的那个函数。
例1:

var a = 10;
function fun(){
   
    a = 20;
    console.log(a);
}
fun();
function fun(){
   
    a = 30;
    console.log(a);
}
fun(); //30 函数名相同,后面的会把前面的覆盖掉

函数名不能相同,和不能重复声明变量相同,相同的变量名,后面的会把前面的变量的值覆盖

7.2、函数的形参和实参个数不同

实参在给形参赋值时,按照顺序从左往右,因此如果实参的个数大于形参的个数不会有影响,但是实参个数小于形参个数,就会有形参没有被赋值。
例1:

function fun1(a,b){
   
    console.log(a+b);
}
fun1(10,20,40);//30 如果实参比形参多,取前面的个数
fun1(10);//NaN 如果实参比形参少,后面的参数没有值则为 undefined

八、函数中的 this

如果函数是作为事件发生时的处理函数,那这个时候函数中的 this 就为当前触发事件的那个对象,例如,如果是点击事件的话,点的谁 this 就是谁。普通函数中的 this 则是 window。
例1:函数做为事件处理函数

var oLi = document.getElementsByTagName(“li”);
for(var i = 0; i < oLi.length;i++){
   
    oLi[i].onclick =function () {
   
        // 当前调用方法的对象
        console.log(this);
    }
}

例2:普通函数

sum();
function sum() {
   
    console.log(this); //window
}

对象的方法中的this指向的是对象本身。
例3:

var obj={
   
    name:’张三’,
    fn:function(){
   
            console.log(this);//{name:’张三’,Fn:function}
    }
}
obj.fn();
目录
相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
140 0
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
114 1
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
127 1
|
3月前
|
SQL 前端开发 安全
前端参数校验与SQL注入防护:构建安全的应用防线
在Web开发中,前端参数校验不仅能提升用户体验,更是防御SQL注入等安全威胁的重要手段。本文分享前端校验的最佳实践,包括输入格式校验与参数类型转换,帮助开发者有效增强应用安全性。
203 0
|
12月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
318 4
|
存储 前端开发 JavaScript
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。
142 1
前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值
|
前端开发 JavaScript
前端:实现一个 sleep 函数
在前端开发中,实现一个 `sleep` 函数可以用来暂停代码执行,模拟延迟效果,常用于测试或控制异步操作的节奏。该函数通常基于 `Promise` 和 `setTimeout` 实现,简单易用。
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
579 1
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
1101 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
360 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    364
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    127
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    140
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    114
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    210
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    235
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    128
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    64
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    122
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    162