javascript 之 call,apply原理

一、call原理

1、使用JQuery的call功能

var add(c,d){
   return this.a+this.b+c+d
}
var obj={a:1,b:2}

add.Call(obj,3,4);
//结果： 10


观察：
var o={
　 a:1,
   b:2,
   add:function(c,d){
　　　　return this.a+this.b+c+d;
   }
}
o.add(3,4);

2、原理分析

//先来看一下网上找的案例，建议跟着敲两边
 var add(c,d){
   return this.a+this.b+c+d   
}
var obj={a:1,b:2};

Function.prototype.es6Call=function(context)
{
    var context=context || window;
    context.fn=this;
    var args=[];
    for (var i=1,len=arguments;i<len;i++){
        args.push(arguments[i]);
   }   
   return context.fn(...args);
}

//调用
add.es6Call(obj,3,4);  //结果：10
     

3、思考

在网上看到这样的一种语句
function fn1(){
   console.log("这是FN1");
}
function fn2(){
   console.log("这是FN2");
}

//第一种：
fn1.es6Call(fn2); //结果： 这是FN1
分析：this本身指向的是fn1，fn1本身就是一个函数方法，那么就确定context.fn=fn1,所以无论是否有其他参数，那么都会执行fn1这个函数
//第二种:
fn1.es6Call.es6Call(fn2); //结果： 这是FN2
分析：在调试过程中，context 指向的是 fn2, 但是 context.fn=this(此时，this就是 fn1.es6Call)这句话，让context.fn(...args) 返回值为undefine，也就是说this=fn.es6Call只是指向Funtion.prototype.es6Call本身，仅仅表示对象

//有人会想，执行 fn1.es6Call().es6Call()   //结果：报错