JavaScript中函数调用方式小结

新冠疫情的五一假期，没有出去浪，在家把JS基础温故一下，小结一下目前我遇到的JS函数的调用方式。

可能有遗漏的，但是应该比较全了。

我进行了一下分类，一共分了约几大类：

1，构造函数调用（2种）

2，直接调用（1种）

3，通过call， apply等方式调用(4种)

4，通过bind调用（1种）

5，自执行函数直接调用（严格上说，不算一种调用方式），这个不举例了

老样子，直接撸代码：

/**
 * 这是一个综合应用的练习文件，总结和练习JS中函数调用的一些方式
 * @data 2020.05.05  15:30
 * @author xinxiang84@126.com
 * 
 */

 function Person(name,age, callType) {
     console.log(`Person :: enter, name = ${name}, age = ${age}, callType = [${callType}]`);    
    this.name = name;
    this.age = age;
 }

 // 1 构造函数的方式（2种）：
 let pConstructor1 = new Person("迪丽热巴", 20, "new Constructor");
 let pConstructor2 = Reflect.construct(Person,["杨超越", 19, "Reflect.construct"]);

 // 2， 直接调用（1种）
 Person("刘诗诗", 19, "normal");

 // 3, call
 Person.call(null, ...["杨幂", 19, "Person.call"]); // 注意是参数列表，需要展开一下

 // 4, apply
 Person.apply(null, ["汤唯", 20, "Person.apply"]); // 注意参数列表，不需要展开

 // 5, 借助函数的基类方法apply， 过于冗繁了。。。
 Function.prototype.apply.call(Person, null, ["古灵精怪", 17, "Function.prototype.apply.call"]); // 注意参数哈
 
 // 6, Reflect.apply
 Reflect.apply(Person,null,["刘亦菲", 16 , " Reflect.apply"]);

 // 7, bind后调用
 let newFunc = Person.bind(null, ...["宋慧乔", 21 , " bind "]); // 不直接调用，注意跟call apply的区别
 console.log(`bind Person end`);
 newFunc("不管用",16, "bind后调用"); // 参数已经被缓存了
 newFunc()

 // 以上代码的输出内容：
// Person :: enter, name = 迪丽热巴, age = 20, callType = [new Constructor]
// Person :: enter, name = 杨超越, age = 19, callType = [Reflect.construct]
// Person :: enter, name = 刘诗诗, age = 19, callType = [normal]
// Person :: enter, name = 杨幂, age = 19, callType = [Person.call]
// Person :: enter, name = 汤唯, age = 20, callType = [Person.apply]
// Person :: enter, name = 古灵精怪, age = 17, callType = [Function.prototype.apply.call]
// Person :: enter, name = 刘亦菲, age = 16, callType = [ Reflect.apply]
// bind Person end
// Person :: enter, name = 宋慧乔, age = 21, callType = [ bind ]
// Person :: enter, name = 宋慧乔, age = 21, callType = [ bind ]