call,apply,bind实现原理

 

共同点

JavaScript中的每一个function对象的原型上都会有call,apply和bind方法.都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。 

 

 call()

 

自己封装  call()的理解 B.call(A, args1,args2) 

unction.prototype.myCall = function(context){
    console.log(context)         // 相当于传进来的 cat对象
    context = context || window; // 有可能传进来null
    
    // 这里的this相当于dog.eat,相当于在cat对象上创建了一个方法
    context.fn = this;           // 
    
    var args = [];              // 接收其余的参数
    var res;                    // 返回结果  
    
    // 通过arguments接收其余传进来的参数
    for (var i = 1;i<arguments.length;i++){
        args.push(arguments[i])
    }
    
    res = context.fn(...args);   // 执行函数
    delete context.fn;
    return res;
}



dog.eat.myCall(cat,'猫粮','水');

 

apply()

B.apply(A,[args1,args2]);

Function.prototype.myApply = function(context,argsArr){
    context || context || window;
    context.fn = this;
    var args = [];
    var res;
    for(var i = 0;i<argsArr.length;i++){
        args.push(argsArr[i])
    }
    res = context.fn(...args)
    delete context.fn
    return res;
}

 

apply和call的区别:

在于将参数传递给函数。 call():使用其自有的实参列表作为函数的参数； apply()：要求以数组的形式传入参数

 

 

bind

B.bind(A, args1,args2)(args3)

Function.prototype.myBind = function(context,...args){
        // =>THIS: FN(当前需要处理的函数)
	// => CONTEXT: OBJ(需要把FN中的THIS改为谁就传递谁);
	// => ARG: 传递哥FN的实参(数组); ["猫粮","水"]
	// 返回一个匿名函数
	
	/*
	 * 每次执行BIND,都形成一个不销毁的私有栈内存,返回一个新的匿名函数(每一次返回的不一样:不是相同的堆内存)
	 * 存储内容
	 * =>THIS: FN(当前需要处理的函数)
	 * => CONTEXT: OBJ(需要把FN中的THIS改为谁就传递谁);
	 * => ARG: 传递哥FN的实参(数组);	[ev]
	 *
	 * dog.eat = function anonymous(){    }
	*/ 
	
    let that = this;        // 此时的this相当于是当前需要处理的函数
    return function anonymous(...innerArg){
        that.apply(context,args.concat(innerArg)) 
    }
}

bind()和apply(),call()的区别

bind()返回一个函数,不会立即执行

apply(),call()会立即执行.