一道阿里面试题，彻底明白call源码的原理

call的语法如下

  语法：函数.call([context],[params1],....)

函数基于原型链找到Function.prototype.call这个方法，并且把它执行，在call方法执行的时候完成了一些功能

1. 让当前函数执行
2. 把函数中的THIS指向改为第一个传递给CALL的实参
3. 把传递给CALL其余的实参，当做参数信息传递给当前函数
4. 如果执行CALL一个实参都没有传递，非严格模式下是让函数中的THIS指向WINDOW，严格模式下指向的是UNDEFINED

一个简单的铺垫

		window.name = 'window';
        let obj = {
            name: 'hello'
        };
        function fn() {
            console.log(this.name); 
        }  
        fn(); //window
        // obj.fn(); //报错
        obj.fn = fn;
        obj.fn(); //'hello'

说明：当执行obj.fn = fn后，相当于执行全局下的fn，此时fn方法中的this变为了obj，call方法正是利用了这一点来实现的。

内置call的实现原理

        window.name = 'window';
        let obj = {
            name: 'hello'
        };

        function fn(n, m) {
            console.log(this.name); //hello
            console.log(n + m); //30
        }
        Function.prototype.call = function call(context, ...arg) {
            // this:fn 【重点】
            context = context || window;
            context.this = this;
            context.this(...arg);
            delete context.this; //把临时添加在obj上的fn属性删除
        }

        fn.call(obj, 10, 20);
        // console.log(obj);//{name: "hello"}

一道经典的面试题

		function fn1() {
            console.log(1);
        }

        function fn2() {
            console.log(2);
        }
        fn1.call(fn2); //1
        fn1.call.call(fn2);//2
        Function.prototype.call(fn1); //没输出
        Function.prototype.call.call(fn1); //1

解释说明：

1. fn1.call(fn2);

*	先找到Function原型上的call方法让其执行
*	call执行的时候会让fn1执行，并且把fn1中的this改为了fn2，结果为1.

2. fn1.call.call(fn2);

	第一次执行call方法：fn1.call.call(fn2)
    *      context：fn2
    *      this: fn1.call
    * 
    *      fn2.(fn1.call) = fn1.call;
    *      让fn2.(fn1.call)执行，相当于让fn1.call执行，此时fn1.call中的this变为fn2
    *      即第一次执行call后的结果：fn1.call() -->this:fn2

    * 第二次执行call方法：fn1.call()
    *      context：undefined || window; -->所以context = window
    *      this: fn2
    * 
    *      window.fn2 = fn2;
    *      window.fn2() -->等价于fn2(),this:window -->结果：输出2

3. Function.prototype.call(fn1);

	*	本质是让Function.prototype执行，所以并没有任何输出结果

4. Function.prototype.call.call(fn1);

本质：让Function.prototype.call()执行，方法中的this:fn1
    *      context：window
    *      this: fn1
    * 
    *      window.fn1 = fn1;
    *      让window.fn1执行，相当于让fn1执行，此时fn1中的this变为window -->结果：输出1

小技巧：一个call了是让左边的函数执行，多个call是让传参的函数执行(this是window/undefined)

注：文章灵感来源于“珠峰培训”教学课程(http://www.zhufengpeixun.cn/)