持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情。
整理函数中常用的知识点......
JavaScript中定义函数的方式
1.函数声明方式
function 函数名称() {
函数体;
}
2.函数表达式方式
-
- 函数表达式方式创建的函数是没有名称的函数
-
- 变量中存储的是对函数的引用
var 变量名称 = function() {
函数体;
};
注意：函数声明方式和函数表达式方式的区别，函数声明方式定义的函数可以在定义之前调用该函数，但是函数表达式方式定义的函数，不可以在定义之前调用。因为函数声明方式定义的函数有函数声明提升操作，而函数表达式方式定义的操作没有函数声明提升操作，只有变量声明提升操作
3.利用Function构造方法创建函数
var 变量名称 = new Function('参数1'， '参数2'， '参数3'...);
构造方法Function中的参数可以有多个，那么前面的参数表示函数的形参，最后一个参数表示函数体
调用方式为：变量名称(实参1，实参2，实参3...)，
注意：这种方式定义的函数也不可以在定义之前调用，因为它也只有变量声明提升操作
举例：
// 定义一个函数，功能是打印1-10之间的偶数。
// 函数声明方式
printNum();
function printNum() {
for (var i=1; i<=10; i++) {
if (i%2 == 0) {
console.log(i);
}
}
}
// 函数表达式方式
var fn = function() {
for (var i=1; i<=10; i++) {
if (i%2 == 0) {
console.log(i);
}
}
};
fn();
// 利用Function构造方法定义一个函数，功能是求三个数的和
var add = new Function('num1', 'num2', 'num3', 'var sum = num1+num2+num3; console.log(sum);');
add(1, 2, 3);
函数中变量的分类
变量的分类：全局变量、局部变量
- 全局变量：定义在函数外部的变量被称为全局变量
- 局部变量：定义在函数内部的变量被称为局部变量
- 区别
- a.全局变量可以在整个文档个中使用
- b.局部变量只能在定义它的函数内部使用
- c.函数内部的形参也是局部变量，也只能在函数内部使用
- d.如果全局变量和局部变量同名，那么全局变量会被屏蔽掉
- e.如果局部变量和全局变量同名，那么要使用全局变量可以在变量名称前面加window.或this.因为全局变量是给window对象绑定的属性
注意：尽可能不要使用全局变量，避免造成全局环境的污染
// 全局变量
var num = 100;
function fn() {
console.log(num); // 100
}
fn();
// 形参也是局部变量
function fn(num) {
console.log(num); // 2000
}
fn(2000);
console.log(num); // Uncaught ReferenceError: num is not defined
// 全局变量和局部变量同名时，可以使用this.来获取全局变量
var num = 100;
var num2 = 200;
function fn() {
var num = 200;
console.log(this.num); // 100
}
fn();
arguments对象的使用
- arguments对象：该对象是函数内部的一个对象，即该对象只能在函数里面使用，不可以在外部使用。它的作用是用来管理函数被调用时传递过来的实参（数据）。它不是一个数组，它是一个伪数组。在管理实参时也是用下标的方式对实参进行了编号，即可以使用
arguments[下标]的形式操作实参。 - 形参和arguments的关系是：形参和arguments都可以管理实参，而且它们管理的是同一份数据。在操作实参时可以用形参，也可以用arguments，为了方便通常用形参。那么在定义函数时到底需不需要定义形参，如果实参的个数是确定的，那么我们就定义形参，如果实参的个数是不确定的时候，3. arguments对象包含两个属性：length、callee
- a.length属性：获取实参个数
- b.callee属性：该属性的作用是用来获取arguments对象所在的函数，即callee属性指向了arguments对象所在的函数。常与递归函数结合使用或与匿名自执行函数结合使用
function add() {
var sum = 0;
for (var i=0; i<arguments.length; i++) {
sum = sum + arguments[i];
}
console.log(sum); // 30
}
add(10, 20);
// arguments.length属性
function fn() {
console.log(arguments);
console.log(arguments.length);
console.log(arguments.callee);
}
fn(1, 2, 3, 4, 5, 666);
重载函数
所谓重载函数就是指，两个函数的名称相同，但是它们的形参的个数不同，或形参的类型不同，那么我们把这两个函数互称为重载函数。
function fn(a, b) {}
function fn(a, b, c) {}
fn(10, 20);
fn(10, 20, 30);
注意：JavaScript中没有重载函数，在JavaScript中如果函数名称相同那么后面的函数会覆盖前面的函数，如果要在JavaScript中模拟重载函数，可以使用arguments对象。
// 利用arguments对象模拟重载函数
function fn() {
if (arguments.length == 1) {
console.log('只有一个形参');
} else if (arguments.length == 2) {
console.log('有两个形参');
}
}
fn(10, 20); // 有两个形参
匿名函数
没有函数名称的函数，匿名函数可以和事件向结合，常用格式如下：
HTML元素.on事件名称 = function() {
};
// 为页面中的div节点添加点击事件，当点击div时，在控制台打印5个hello
// 第一步：获取页面中的div
var myDiv = document.querySelector('div');
// 第二步：为div添加点击事件
myDiv.onclick = function() {
for (var i=1; i<=5; i++) {
console.log('hello');
}
};
回调函数
如果一个函数被当做另一个函数的参数，那么这个被作为参数的函数就是回调函数，回调函数常用匿名函数。回调函数通常是在满足某个条件时才会被触发。
匿名自执行函数
匿名自执行函数是指没有名称且不需要手动调用的函数，常用格式如下:
1.无参无返回值的匿名自执行函数
(function() {
函数体;
})();
2.有参无返回值的匿名自执行函数
(function(形参1,形参2,形参3...) {
函数体;
})(实参1,实参2,实参3...);
3.有参有返回值的匿名自执行函数
var 变量名称 = (function(形参1，形参2，形参3...) {
函数体;
return 返回值;
})(实参1，实参2，实参3...);
注意：匿名自执行函数通常用来创建块级作用域。
<script>
// 定义一个匿名自执行函数，功能是在控制台打印一个hello
(function() {
console.log('hello');
})();
// 定义一个匿名自执行函数，求两个数的和
(function(num1, num2) {
var sum;
sum = num1 + num2;
console.log(sum);
})(10, 20);
// 定义一个匿名自执行函数，功能是求两个数的和，将和作为返回值返回
var res = (function(num1, num2) {
var sum;
sum = num1 + num2;
return sum;
})(100, 200);
console.log(res);
</script>
递归函数
所谓递归函数就是指在一个函数内部有调用了自己的函数被称为递归函数。
function fn() {
fn();
}
注意：在使用递归函数时一定要确定递归函数的“出口”，即在某个时刻能够让函数不再调用自己。
// 假设有1对兔子，从第3个月开始兔子可以生小兔子，小兔子在长到第3个月后每个月也可以生小兔子。如果兔子都不死，问第10个月有多少对兔子(斐波那契数列)
function fn(n) {
if (n==1 || n==2) {
return 1;
} else {
return fn(n-1) + fn(n-2);//1+1+1 + 1+1
}
}
var res = fn(5);
console.log(res); // 5
