前端JavaScript必会手写代码之call、apply的实现

作用及区别

作用都是改变this指向。区别是传参列表不同。

call、apply用法

var value = 'window';
		var obj={
			value:'obj'
		}
		function show(name,age){
			console.log(this.value);
			return {
				name:name,
				age:age,
			}
		}
		show();//window
		var callRes = show.call(obj,'hkp',18);//obj  成功改变this指向，参数正常传递
		var applyRes =	show.apply(obj,['hkp',18]);//obj 成功改变this指向，参数正常传递

call、apply模拟实现

原理：在需要改变this指向的对象中创建一个方法，该方法就是需要改变this指向的函数，
改变完成后删除该方法

Function.prototype.newCall = function(){
			var ctx = arguments[0] || window;
			ctx.fn = this;
			var args = [];
			for(var i = 1; i < arguments.length; i++){
				args.push('arguments['+ i +']');
			}
			var result = eval('ctx.fn('+ args.join(',') +')');
			delete ctx.fn;
			return result;
		}
		var result = show.newApply(obj,'hkp',18);//可成功改变this指向

	Function.prototype.newApply = function(ctx,arr){
      var ctxx = ctx || window;
      ctxx.fn = this;
      if(!arr){
        var result = ctxx.fn();
        delete ctxx.fn;
        return result;
      } else{
        var args = [];
        for(var i = 0; i < arr.length; i++){
          args.push('arr['+ i +']');
        }
        var result = eval('ctxx.fn('+ args.join(',') +')');
        delete ctxx.fn;
        return result;
      }
    }
	var result = show.newApply(obj,['hkp',18]);//可成功改变this指向