javascript 之 call,apply原理

一、call原理

1、使用JQuery的call功能

?

1 2 3 4 5 6 7

var add(c,d){    return this.a+this.b+c+d } var obj={a:1,b:2}   add.Call(obj,3,4); //结果： 10<br><br><br>观察：<br>var o={<br>　 a:1,<br>   b:2,<br>   add:function(c,d){<br>　　　　return this.a+this.b+c+d;<br>   }<br>}<br>o.add(3,4);

2、原理分析

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

//先来看一下网上找的案例，建议跟着敲两边  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、思考

?

1 2 3 4 5 6 7 8 9 10 11 12 13

在网上看到这样的一种语句 function fn1(){    console.log("这是FN1"); } function fn2(){    console.log("这是FN2"); }   //第一种： fn1.es6Call(fn2); //结果： 这是FN1<br>分析：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本身，仅仅表示对象<br><br>//有人会想，执行 fn1.es6Call().es6Call()   //结果：报错