第十四节：函数

第十四节：函数

概述：JavaScript中的函数，类似于Java中的方法，但是 JavaScript中的函数可以赋值给对象(变量)

函数命名：建议使用动词开头，并使用驼峰命名法

作用：封装方法

3.3.1 函数的定义及调用语法

函数的形参和实参是一 一对应的

• 函数的形参：函数定义时 小括号内的 变量值

• 函数的实参：值的是 函数调用时 小括号内的 变量值

函数的返回值：通过 return 返回

• return 返回的值，就是函数调动之后得到的值

函数的参数和返回值，不是必须要加的，根据需求来定

• 参数需不需要？
  • 取决于函数体依赖于这个参数，外部需不需要是用这个变量
• 返回值需不需要？
  • 函数调用是否要得到数据，需要 在函数体加上 return， 不需要就不加 return

普通函数

// 定义函数格式: 
function 函数名(形参1, 形参2...) {
	return 返回值;
}
// 调用函数格式: 
函数名或变量名(实参1, 实参2...);


// 定义函数(无返回值)
function getSum(a, b) {
    alert(a + b);
}
// 调用函数
getSum("abc","cba");			// abccba
getSum("10", 20);				// 1020


// 定义函数(有返回值)
function getSum() {
    return a - b;
}
// 调用函数
var v1 = getSum("abc", "cba");
alert(v1);						// NaN

匿名函数

匿名函数没有名字, 可以定义一个变量来接收, 使用时调用变量, 传入参数即可

// 格式: 
function(变量名1, 变量名2...) {
	return 返回值;
}

// 定义函数(无返回值) 	
var func1 = function(a, b) {
    alert(a + b);
}
// 调用函数
func1(10, 20);					// 30


// 定义函数(有返回值)
var func2 = function(a, b) {
    return a - b;
}
// 调用函数
alert(func2("30", 15));			// 15

扩展: 匿名函数的特殊调用方式

// 调用格式: 
(匿名函数(函数的参数列表的实参值));

// 调用无返回值的方法
(function(a, b) {
    alert(a + b);
} (100, 200));

// 调用有返回值的方法
alert((function(a, b) {
    return a - b;
} (30, 15)));

3.3.2 arguments 伪数组

arguments 是伪数组，可以遍历，可以通过下标访问数据

作用：获取到所有的实参

大白话解释：访问形参，并遍历实参

可以解决的问题：当函数的形参个数不确定时，通过 arguments 伪数组 拿到所有参数

访问形参：

console.log(Arguments);

遍历实参：

// 定义函数
function getSum() {
	var sum = 0;
	for (var i=0; i < arguments.length; i++) {
		console.log(arguments[i]);	// 20, 30, 40, 50, 60
	}
}

// 调用函数
var sum = getSum(20, 30, 40, 50, 60);

// 定义函数
function getSum() {
    var sum = 0;
    for (var i=0; i < arguments[0].length; i++) {
        console.log(arguments[0][i]);	// 20, 30, 40, 50, 60
    }
}

// 调用函数
var sum = getSum([20, 30, 40, 50, 60]);

函数 rest …

可以简写 arguments

… 把伪数组转成 数组，可以使用数组的方法

// args 为自定义变量名
function fn(...args) {
    args.push('张三');
    console.log(args);	// 40, 298, 303, '张三';
}

fn(40, 298, 303);

3.3.3 作用域

概述：ES5 没有块级作用域

{
   let num = 200;
   console.log(num);
}

作用域链

先在函数体中找局部变量，没有则在外面找全局变量

var num = 100;

function fn() {
   var num = 200;
   alert(num);
}

fn();   // 200;

3.3.4 let 关键字

3.3.5 预解析

变量声明提升，变量赋值不提升

当函数和变量同名时，预解析优先级为：函数 > 变量

fn();   // 200；

var fn = function () {
   alert(100);
}

function fn () {
   alert(200);
}

var num = 10;
console.log(num);    // 10;

console.log(num);    // undefined;
var num = 10;

// var num = 10;
console.log(num);    // 报错(未定义变量);

局部变量 和 全局变量

逗号隔开的都是局部变量；
等号隔开的除了第一个，其余都是全局变量

var a = b = c = 9;
// a 是局部变量，b, c 是全局变量

var a, b, c = 9;
// a, b, c 是局部变量

f1();

console.log(a);
console.log(b);
console.log(c);
function f1() {
   var a = b = c = 9;
   console.log(a);
   console.log(b);
   console.log(c);
}

// 注意：a 是局部变量，b, c 是全局变量

结果：a 报错，b, c 为 9
	 函数体内 都为 9

fn();   // 100;
function fn() {
   alert(100);
}

fn();   // 报错;
var fn = function () {
   alert(100);
}

fn;   // 未定义;
var fn = function () {
   alert(100);
}