手写JavaScript中call函数的思想和注意事项-我是小白

641 阅读1分钟

标题已说明白,因为我尝试了几遍,也看了一些大佬的文章,直到现在我手写出来还是有一些细节没有处理到位,但是我发誓写完这篇文章后我就真的可以手写call函数了【i love myself】

call函数的作用

1. 改变了调用函数的this
2. 使用传递过来的对象来调用了一个函数,并立即执行后返回结果
eg:  getInfo._call(person, 1, 1); //person就是调用getInfo的this

注意事项就是:
1. 需要改变调用函数的this
2. 由于需要调用call,所以我们手写的_call需要的挂载到Function的原型下
3. 别人传递的参数不能扔掉

实现思路和代码

1. 获取传递过来的对象context
2. 获取调用的函数,并将函数挂载到传递过来的对象context上
3. 传递参数并执行挂载的函数并获取结果
4. 删除挂载到这个对象的函数
5. 返回结果,over  v_v
	//你要使函数调用这个手写的call,那么就必须将它挂载到Function的原型上
    Function.prototype._call = function(){
    	// 1. 获取传递过来的对象context
        var context = arguments[0] || window; 
        // 2. 获取调用的函数,并将函数挂载到传递过来的对象context上
        context.fn = this; //this就是调用_call的函数
        // 3. 传递参数并执行挂载的函数并获取结果
        var args = [];
        for(var i = 1 ; i < arguments.length; i++){
        	args.push(arguments[i]);
        }
        var result = context.fn(...args);
        // 4.删除挂载到这个对象的函数
        delete context.fn;
        // 5. 返回函数执行的结果
        return result;
    }
      
    //测试如下
    var person = {
      name: 'jakeQuc',
      age: 18
    }

    function getInfo(a, b) {
      var sum = a + b;
      console.log('name:', this.name, 'age:', this.age, 'sum:', sum);
    }

    getInfo._call(person, 1, 1) //name: jakeQuc age: 18 sum: 2