JS基础——函数的创建和使用

在JS中函数在使用时实质上和我们平时学习的编程语言中的函数类似,它同样也具有函数名,参数,返回值,函数体等这些平常函数所具有的内容。但是作为一种脚本语言,它确实也有自己不一样的地方。

一、创建

<span style="font-size:18px;">function box(){   //利用function关键字进行声明+函数名+(可添加参数)+{具体执行内容,可包括返回值}
    return 'hello!';
}</span>

在这里,我们需要知道的是,box后面的()具有执行该函数的功能,同时可用来进行传参。

如果我们在JS中直接调用alert(box),那么结果会显示如下图:因为没有加(),所以它没有执行。只有在加了()后,才会正常显示‘hello!‘ (这里匿名函数中会用到)

二、函数传参

JS函数中用到一个arguments对象,可以实现动态传参,使得函数在传参时,并不介意有多少参数!

1、arguments对象简单使用

function box(){  //这里并没有传递参数
	return arguments[0]+arguments[1]+arguments[2];	//这里代表第几个参数
}
alert(box('大家','国庆节','快乐!'));

可以看出来,arguments对象相当于一个对象数组,它将函数中传进来的参数放在了一个数组中,按顺序进行调用。

如果调用它的长度,会发现:长度为3,即参数的个数。

function box(){
	return arguments.length;
}

但是出现了一个问题,这里并没有实现动态传参啊,只是参数一一对应而已,没错,其实,arguments对象只能识别它自己事先定义好的个数的参数,如果外界传进来的参数不足,那么自动以undefined代替,如果传进来参数超出本身所定义的个数,那么,他会将多余的自动抹去,不会显示!

那么如何才能实现动态传参呢?让上面的函数可以传进并且识别所有我想传进的参数,比如在实现加法时,并不知道用户相加的数字的个数有多少的时候,该怎么解决呢?这里用到了一个简单循环来实现。

2、利用arguments对象实现动态传参:

function box() {	        var sum = 0;
	        if (arguments.length == 0) return sum;
	        for(var i=0;i<arguments.length;i++)
	        {
	            sum += arguments[i];
	        }
	        return sum;
 }

这样,我们如果调用函数alert(box(3,4,5,6,7,8,9)),无论加多少都可以得到想要的答案了。在这里需要注意的是,如果存在string格式的那么数字也会被当成字符串来处理,这时候‘+’会被当成&连字符来处理。

三、匿名函数

JS中函数还支持无名英雄,在声明函数时,没有函数名称的函数称为匿名函数(跟匿名信一个道理)。

function (){
	return 'hello!';
}

可是没有函数名的函数如何来调用呢?

匿名函数的执行方法:

1、通过赋给变量进行调用

	var box=function(){
		return 'lee';
	}

alert(box()); 

2、自我执行

在创建时,提到了()代表执行,在匿名函数中也是一样。

	(function(){
		alert( 'lee');
	})()
<span style="font-size:18px;">//语法:(匿名函数)()第一个圆括号放匿名函数,第二个圆括号执行</span>

这里的()使得页面在加载时,就可以直接执行JS中的匿名函数。不再需要赋值。

3、匿名函数进行传参

这里也是用到了()这个小知识,第二个()代表执行,同时他还可以进行传参,所以,我们还可以为匿名函数进行传参。

例如:

	(function(age){
		alert(age);
         }(100)) 

其实,这里跟我们平时的函数原理是一样的。可以把前面整个匿名函数当成一个函数名,后面小括号进行传参和执行。这里的100可以用其他的表达式来代替,如页面中获取了某些表达式的值等。

以上是关于JS学习中函数的一些基础知识,需要把握住原有知识和现在所学内容之间的相同点和不同点,认真总结和反复理解,才能最终得以应用。关于匿名函数的使用还有很多的应用,将在后续继续总结!

时间: 2024-08-11 18:01:34

JS基础——函数的创建和使用的相关文章

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

js中函数对象创建的总结

在JavaScript的函数对象创建方法中,可以分为三种情况: 1:第一种是使用function语句定义函数 1 <script type="text/javascript"> 2 function fun1(){ 3 alert("我的第一个方法"); 4 } 5 6 //这里边JavaScript带参数的时候不需要提前的定义和声明,而且在定义的时候也不需要带参数类型,直接写参数名称.在使用的时候直接传参就行了,传的是啥类型的参数,就是用啥类型的参数

JavaScript基础一(js基础函数与运算符)

[使用js的三种方式] 1.在HTML标签中,直接内嵌js(并不提倡使用) <button onclick=" alert('点就点')"> 点我啊</button> >>>不符合w3c关于内容与行为分离的要求 2.在HTML页面中使用<script></script>包裹js代码 <script type="text/javascript"> js代码 </script> &

js基础例子动态创建table实例

<style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collapse; font-size:20px; text-align:center; margin: 0 auto; } td{ border: 1px solid #000000; } </style> <script> window.onload=function () { //创建一个数据

js中函数的创建和调用都发生了什么?执行环境,函数作用域链,变量对象

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/26/js%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E8%B0%83%E7%94%A8%E9%83%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%87%B

js基础——函数

1.函数声明:通过函数可封装任意多条语句,且可在任意地方.任何时候调用执行. eg. function box(){//无参函数 alert("只有函数被调用,我才会被执行"); } box(); //直接调用函数 eg.  function box(name,age){//带参函数 alert("姓名:"+name+",年龄:"+age); } box("张三",19);//传参调用函数 2.return返回值:带参或不带参

JS基础----&gt;javascript的基础(一)

记录一些javascript的基础知识.只是一起走过一段路而已,何必把怀念弄的比经过还长. javascript的基础 一.在检测一个引用类型值和 Object 构造函数时, instanceof 操作符始终会返回 true . var str1 = "huhx"; var str2 = new String("huhx"); console.log(str1 instanceof Object); // false console.log(str2 instanc

JS基础及函数

一.JS基础 1.算法及流程图         解决问题的步骤或程序. 特性:          明确性: 算法对每一个步骤都有确切的,非二性的规定.         有效性: 算法的每一个步骤都能够通过基本运算有效地执行,并得到确定的结果.         有限性: 算法由有限的步骤组成. 分类:算术算法.事务性算法     2.流程图         即算法的一种图形解方法.         特点:顺序结构.选择结构.循环结构     3.JS基础内容     引入JavaScript方式:

JS基础-运算符-函数

1.运算符  1.赋值运算符和扩展运算符    1.赋值运算符 =    2.扩展运算符      +=,-=,*=,/=,%=,^=....      ex:        a=a+b;--> a+=b; a=a+1;--> a++,a+=1,++a      实现两个数字的换位:        a^=b; b^=a; a^=b;  2.条件运算符    条件运算符又称三目运算符.    单目(一元)运算符,只需要一个操作数或表达式.     ex:++,--,!    双目(二元)运算符,