函数(上)

函数(上)

函数的概念

• 函数就是把完成特定功能的一段代码[抽象出来]，使之成为程序中的一个[独立实体]，起个名字**（函数名）。可以在同一个程序或其他程序中多次重复使用（通过函数名调用）**。

• 对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面

• 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行

• 先看一段代码

// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {
  console.log(i)
}

// 函数，这个 {} 就是那个 “盒子”
function fn() {
  // 这个函数我们以前写的代码
  for (var i = 0; i < 10; i++) {
    console.log(i)
  }
}

函数的两个阶段（重点）

• 按照我们刚才的说法，两个阶段就是 放在盒子里面 和 让盒子里面的代码执行

函数的声明(定义)阶段

• 函数的定义也就是 放在盒子里面
• 我们有两种定义方式 声明式 和 赋值式
• [注]在声明函数的时候,函数内部的代码不会执行,只有当你调用这个函数的时候,里面的代码才会执行

1.声明式函数

• 使用 ‘function’ 这个关键字来声明一个函数

• 语法:

function 函数名(){

    	函数体(具体要执行的代码)

}

//function: 声明函数的关键字，表示接下来是一个函数了

// fn: 函数的名字，我们自己定义的（遵循变量名的命名规则和命名规范）

// (): 必须写，是用来放参数的位置

// {}: 就是我们用来放一段代码的位置（也就是我们刚才说的 “盒子”）

例如:function  print(){
    	for(var i=0;i<5;i++){
    		console.log('hello world')
    	}
    }

2.赋值式函数

• 首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量

• 语法:

var 函数名=function(){

	函数体(具体要执行的代码)

} 
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了

例如:var print=function(){
    	console.log('hello world')
    }

函数调用阶段

• 就是让 盒子里面 的代码执行一下
• 让函数执行
• 两种定义函数的方式不同，但是调用函数的方式都以一样的
• 调用方式有两种: 直接调用 和 依赖行为调用

函数的调用

1.直接调用

• 格式: 函数名();

//声明式函数
function  print(){
	for(var i=0;i<5;i++){
		console.log('hello world')
	}
}
//调用
print();

//赋值式函数
var print=function(){
	console.log('hello world')
}
//调用
print();

2.依赖行为调用

• 格式:元素.οnclick=函数名
• [注]在一个页面里面,一个元素的id名称可以直接被当做一个js的变量来使用,这个id名就表示这个元素
• [注]这里需要用到事件,在这里我们就先用onclick,表示点击后的发生的事情

//需要给一个元素绑定一个行为

//例如:给box添加一个点击行为

//box.οnclick=函数名

//【注】不需要加括号,因为不是直接执行,而是再点击box后执行

//在这里: 
	box.onclick=print;//hello world
//box 为div的id

函数调用时机上的区别

​ 1.声明式函数(function 函数名(){ })

​ 可以在声明 之前 调用,也可以在 之后 调用

print();
function print(){
	for(var i=0;i<5;i++){
		console.log('hello world')
	}
}
print();
/*运行结果: 5 hello world
		   5 hello world 
		   //其中:5代表输出5个hello world
*/

​ 2.赋值式函数(var 函数名=function(){ })

​ 只能在声明 之后 调用,声明 之前调用会报错(因为浏览器的解析问题)

//在声明之前调用
show();
var show=function(){
	console.log('hello world')
}
//运行结果:Uncaught TypeError: show is not a function

//声明之后调用
var show=function(){
	console.log('hello world')
}
show();
//运行结果:hello world 

函数的参数

函数里面的参数分为两种: 形参 和 实参

1.形参

​ 形式上的参数

​ 写在函数定义()里面

​ 可以写多个,中间用逗号(,)隔开

​ [注]只能在函数内部使用的变量, 不能用var修饰

2.实参

​ 函数调用时()里的

​ 可以写多个,中间用逗号(,)隔开

​ 是一个准确的数值

​ 用来给形参赋值

函数参数的个数关系

1. 形参和实参一样多

​ 按照从左到右的顺序一一进行赋值

function fn(a, b, c) {
	console.log(a)
	console.log(b)
	console.log(c)
}
fn('hello world', true, 100)
/*运行结果:hello world
		true
		100
*/

2. 形参比实参多

​ 前面的一一对应的关系, 多出来的形参, 没有实参进行赋值

​ 在函数内部使用的时候, 就是一个没有赋值的变量, 就是 undefined

function fn(a, b, c) {
	console.log(a)
	console.log(b)
	console.log(c)
}
fn('hello world', true)
/*运行结果:	  hello world
			true
			undefined
*/
 // 在这个函数里面, c 就相当于定义了一个变量, 但是没有被赋值
// c 在使用的时候就是 undefined

3. 实参比形参多

​ 前面的一一对应的关系, 多出来的实参, 在函数内部没有形参接收

​ 相当于你白写了多出来的实参, 在函数内部不能直接使用

function fn(a, b, c) {
	console.log(a)
	console.log(b)
	console.log(c)
}
fn('hello world', true, 100, 200, 300, 400, 500)
// 我们在这里不能直接使用传递进来的 200 300 400 500
// 但是不会报错

arguments

• 定义:每一个函数内部都有一个arguments, 系统内置 的,不需要定义, 直接使用

• 表示所有 实参 的集合

• [注]arguments是用来存储实际传入的参数

  属性:

arguments.length    
//输出当前里面存储的参数个数

访问某一个数据:

arguments[下标];
//[注]下标是从0开始的

问题:什么时候使用arguments,什么时候使用形参?

​ 当我们定义函数时,能确定以后使用的实参个数的时候,推荐使用形参的方式获取,因为方便

​ 当我们定义函数时,不能确定以后使用的实参个数的时候,推荐使用arguments的方式获取,因为灵活

//当我们定义函数时,能确定以后使用的实参个数的时候,推荐使用形参的方式获取,因为方便

//例如:自己封装一个工具函数,参数是两个数字,返回值是两个数字的乘积
function product(num1,num2){
	var number = 0;
	number = num1*num2;
	return number;
	console.log(number);
}
var res=product(79,80);
console.log(res);
//运行结果:6320



//当我们定义函数时,不能确定以后使用的实参个数的时候,推荐使用arguments的方式获取,因为灵活

//例如:自己封装一个工具函数,参数是若干个数字,返回值： 若干这数字的和 
function sum(){
	var res=0;
	for (var i = 0;i < arguments.length;i++){
	res += arguments[i];
}
	return res;
}
var num=sum(10,30,890,678);
document.write(num);
//运行结果:1608

函数的返回值:

• 在函数里面添加返回值用return
• [注]return后面写什么的表达式,函数调用的结果就是return后面表达式的值

return关键字有两个作用:

​ 1.作为函数的返回值使用

​ 2.打断函数不再继续执行,即函数运行的时候,如果遇到return关键字,整个函数会终止

function fn() {
	console.log('第一行代码执行')
	console.log('第二行代码执行')
	return
	// 这里开始向后的代码就不在执行了
	console.log('第三行代码执行')
}
fn()
/* 运行结果:第一行代码执行
		第二行代码执行 
*/

额外:根据函数有无参数和返回值可将函数分为三类

1.无参数无返回值函数

格式:

function 函数名(){
    	函数体(具体要执行的代码)
}

//例如:
function  print(){
    	for(var i=0;i<5;i++){
    		console.log('hello world')
    	}
}
print()
//运行结果:5 hello world

2.有参数无返回值函数

格式:

function 函数名(形参1,形参2,形参3,...){
    	函数体(具体要执行的代码)
}

//例如:
function  print(n){
    	for(var i = 0;i < n;i++){
    		console.log('hello world')
    	}
}
print(2)
//运行结果:2 hello world

3.有参数有返回值函数

格式:

function 函数名(形参1,形参2,形参3,...){
    	函数体(具体要执行的代码)
    	return 表达式;
}

//例如:
function add(n1,n2){
	var num=n1+n2;
	return num;
}
var res=add(10,50);
console.log(res);
//运行结果:60

(形参1,形参2,形参3,…){
函数体(具体要执行的代码)
}

//例如:
function print(n){
for(var i = 0;i < n;i++){
console.log(‘hello world’)
}
}
print(2)
//运行结果:2 hello world

#### 3.有参数有返回值函数

格式:

```javascript
function 函数名(形参1,形参2,形参3,...){
    	函数体(具体要执行的代码)
    	return 表达式;
}

//例如:
function add(n1,n2){
	var num=n1+n2;
	return num;
}
var res=add(10,50);
console.log(res);
//运行结果:60