js 函数行为分析

一、function 关键字

 1 // 定义一个具名函数
 2 function foo() {}
 3 console.log(foo); // ƒ foo() {}
 4 console.log(foo.name); // foo
 5 
 6 // foo 赋值给一个变量
 7 const fuu = foo;
 8 console.log(fuu.name); // foo /* 具名函数的 name 不会改变 */
 9 
10 // 赋值给 foo
11 foo = 1;
12 console.log(foo); // 1 /* function 声明的标识符可以被赋值 */
13 
14 // var 再次声明 foo
15 var foo = 2;
16 console.log(foo); // 2 /* 解析器发现有 foo 的存在，var 关键词被忽略了，但是仍然赋值 */
17 
18 //let 再次声明 foo
19 // let foo = 3; // Uncaught SyntaxError: Identifier 'foo' has already been declared /* 解析阶段报错，全部代码无法运行 */
20 // console.log(foo);

二、function 与 var 的优先级

1 var bar = 1;
2 function bar() {}
3 
4 console.log(bar); // 1 /* 说明 function 优先级高 */

三、匿名函数与对象方法简写

 1 const baz = {
 2     // 简写
 3     getInfo() {},
 4 };
 5 console.log(baz.getInfo); // ƒ getInfo() {} /* 对象方法简写有函数名 */
 6 console.log(baz.getInfo.name); // getInfo /* name 就是对象方法名 */
 7 
 8 // 匿名函数
 9 console.log(function () {}); // ƒ () {} /* 匿名函数不带函数名 */
10 console.log(function () {}.name); // '' /* 也没有 name 值 */
11 
12 // 匿名函数赋值给变量
13 const cat = function () {};
14 console.log(cat); // ƒ () {} /* 匿名函数不带函数名 */
15 console.log(cat.name); // cat /* 但是赋值给变量后，name 有值了 */
16 
17 // 再次赋值给另一个变量
18 const lion = cat;
19 console.log(lion.name); // cat /* 说明具名函数和匿名函数的 name 都只能初始化 */

四、new 关键字

 1 // 常规使用
 2 function Duck() {}
 3 const duck = new Duck();
 4 console.log(duck); // Duck {}
 5 
 6 // 返回值为简单数据类型
 7 function Dog() {
 8     return 1;
 9 }
10 const dog = new Dog();
11 console.log(dog); // Dog {} /* 返回值为简单数据类型时，会被忽略掉 */
12 
13 // 返回值为复杂数据类型
14 let _this = null;
15 function Horse() {
16     _this = this;
17     return {};
18 }
19 const horse = new Horse();
20 console.log(horse); // {} /* 返回值为复杂数据类型时，则返回 */
21 console.log(_this); // Horse {} /* new 仍然构建了对象，只是没返回 */