js 函数

目录

1、匿名函数

2、立即执行

3、默认参数

4、arguments

5、箭头函数

6、递归调用

7、回调函数

8、标签函数

9、this

（1）构造函数

（2）对象字面量

（3）箭头函数

10、apply / call / bind

（1）原理分析

（2）apply / call

（3）bind

---

 

1、匿名函数

匿名函数没有函数名，它也不会做任何事情。通常将匿名函数和事件处理程序一起使用。

函数是对象所以可以通过赋值来指向到函数对象的指针，当然指针也可以传递给其他变量。

function() {
	console.log('hello');
};

let div = document.querySelector('div');
div.addEventListener('click', function () {
	div.style.background = 'pink';
});

下面代码使用函数表达式将匿名函数赋值给变量，这个变量也可以赋值给其他变量。

let f = function (i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
};
f(0);

let f1 = f;
f1(0);

匿名函数也成为函数表达式，与函数声明有一定的区别，函数声明会进行函数提升，但函数表达式不会。

console.log(fun1(0));
function fun1(i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
}

console.log(fun2(0));
// Uncaught ReferenceError: Cannot access 'fun2' before initialization
let fun2 = function (i) {
	setInterval(() => {
		console.log(i++);
	}, 1000);
}

2、立即执行

指函数定义时立即执行。

作用：可以用来定义私有作用域防止污染全局作用域。

(function () {
	var name = '张三';
	console.log(name);  // 张三
})();
console.log(name);  //

3、默认参数

ES6 支持函数定义默认参数：

function f(name = '张三', age = 18) {
	return `name: ${name}, age: ${age}`;
}
console.log(f());  // name: 张三, age: 18
console.log(f('李四', 20));  // name: 李四, age: 20

如果不是全部参数都有默认值，则要将没有默认值的参数放在有默认值的参数的前面：

function f(name, age = 18) {
	return `name: ${name}, age: ${age}`;
}
console.log(f());  // name: undefined, age: 18
console.log(f('张三'));  // name: 张三, age: 18

function f1(name = '张三', age) {
	return `name: ${name}, age: ${age}`;
}
console.log(f1());  // name: 张三, age: undefined
console.log(f1(18));  // name: 18, age: undefined
console.log(f1('张三' ,18));  // name: 张三, age: 18

4、arguments

arguments 是获取到函数的所有参数的集合：

function sum() {
	return [...arguments].reduce((total, num) => {
		return (total += num);
	} ,0);
}
console.log(sum(1, 2, 3, 4));  // 10

// 当然展开语法也能达到同样的效果，所以更推荐展开语法
function Sum(...args) {
	return args.reduce((num1, num2) => num1 + num2);
}
console.log(sum(1, 2, 3, 4));  // 10

5、箭头函数

ES6 新增使用胖箭头 ( => ) 语法定义函数表达式的能力。任何可以使用函数表达式的地方，都可以使用箭头函数。

let sum = (a, b) => {
	return a + b;
}
console.log(sum(1, 2));  // 3

// 当函数体为单一表达式时，可以不需要 return ，系统会自动返回表达式计算的值。
let sum = (a, b) => a + b;
console.log(sum(1, 2));  // 3