匿名函数
常见的匿名函数有哪些？
- 箭头函数
- 函数表达式
- 回调函数
- 自执行函数
// 箭头函数( ES6 中新增的一种 函数表达式 )
// 无法设置函数名，可以使用变量接收，
// 可以把变量名理解为是它的名字
const fn1 = () => {};
console.dir(fn1); // fn1() -> name: "fn1"
// 函数表达式 - 普通函数
const fn = function () {};
// 函数表达式 -
// DOM0 级事件绑定也是匿名函数
document.onclick = function () {};
// 回调函数一般也是匿名函数
// 内置API的回调函数
setTimeout(function () {}, 1000);
// 将匿名函数当成实参传递给另外一个函数
fn(function () {});
// 自执行函数，创建函数的同时，执行函数
(function(){ })();
匿名函数具名化
- 使用 function 声明函数时，写在 () 前的就是函数的名字。
- 函数具名化后，名字可以在函数内部上下文中使用，代表当前函数本身。
- 匿名函数具名化后的这个名字，在所处上下文中未被声明过。
- 具名化的名字在函数内部是不允许被修改值的
- 具名化的名字权重比较低，但凡当前私有上下文中存在一个同名的私有变量，都以私有变量为主，不再是这个函数。
- 函数具名化的作用：方便匿名函数递归处理，而且更符合规范
为了更好的理解上面几点，举几个例子：
匿名函数具名化后的这个名字，在所处上下文中未被声明过。
// 示例1
// sum 就是当前匿名函数的名字
// 在函数内部可以访问函数的名字 sum
// 函数外部访问 函数的名字 sum 会报错
var fn = function sum() {
console.log(sum);
}
fn(); // => 函数代码字符串
sum(); // ... sum is not defined
具名化的名字在函数内部是不允许被修改值的
// 将自执行函数中的匿名函数 命名为 sum
// 在函数体内，修改 sum 的值
// 输出的是 函数代码字符串
(function sum() {
sum = 1;
console.log(sum);
})();
具名化的名字权重比较低，但凡当前私有上下文中存在一个同名的私有变量，都以私有变量为主，不再是这个函数。
即当具名化的函数内部出现与其同名的变量名时，这个名字是变量名，而不是当前函数的名字。
// 将自执行函数中的匿名函数 命名为 sum
// 在函数体内，再用 let 声明变量 sum，并为其赋值 1。
// 如在 let 声明变量 sum 前，访问 sum ，控制台会报错。
// 再输出 sum 时，发现输出的是 1
(function sum() {
// console.log(sum);
// => Cannot access 'sum' before initialization
let sum = 1;
console.log(sum); //=>1
})();
// 把上列代码中的 let
// 换成 var 声明变量 sum，并为其赋值 1。
// 如在 var 声明变量 sum 前访问 sum ，其值为 undefined。
// 在赋值后输出 sum ，输出 1。
(function sum() {
// console.log(sum); //=>undefined
var sum = 1;
console.log(sum); //=>1
})();
具名函数的作用：方便匿名函数递归处理，而且更符合规范。
"use strict";
let i = 0;
(function sum() {
i++;
console.log(i);
if (i < 2) {
sum(); // 函数在自己使用 sum 这个名字调用自己
}
// 非严格模式下，我们可以用
// arguments.callee 来访问函数本身，
// 但在严格模式下会报错
// console.log(arguments.callee);
})();
