js--call_apply

最新推荐文章于 2025-04-07 16:12:37 发布

原创最新推荐文章于 2025-04-07 16:12:37 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#call #apply

javascript 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>call_apply</title>
   <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<meta http-equiv="Content-Type" content="text/html; charset=HZ" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<script language="javascript">
/*
JavaScrtipt动态变换运行时上下文特性
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
简直是”无中生有”,对象的方法可以任意指派,（有方法的一方，指派给另一方）。call, apply作用就是借用别人的方法来调用,就像调用自己的一样.
*/

function test0(){

   function print(a, b, c){
       alert(a + b + c );
       //alert(a + b + c + d);
       //alert(a + b + c + d+f);
   }

   function example(a, b , c , d){
       alert(arguments); //成功
       alert(this.arguments);//undefined

       //用call方式借用print,参数一个一个处理
       //print.call(this, a, b, c, d);
       print.call(this, a, b, b, b);

       //用apply方式借用print, 参数作为一个数组传递,
       print.apply(this, arguments);
       //或者封装成数组
       print.apply(this, [a, b, c, d]);
   }

   //下面将显示”背光脚本”
   example("背" , "光" , "脚", "本");

}

function test1(){

   function Class1(){
       this.showTxt = function(){alert(this.name)}
   }

   var obj = new Object();
   obj.name="test1";

   Class1.call(obj);   //只是上下文对象发生了变化也就是扩展了obj对象(使他凭空多了些调用方法的接口，顺便相似的内容会被覆盖掉)

   obj.showTxt();       //test1 是调用函数如果没有置换掉就是自身
   alert(obj.name);
   alert(obj.showTxt);//function(){alert(this.name)} 是对象的属性 toString（）

}

function test2(){
   function Class1(){
       this.name = 'class1';//添加name值
       this.showTxt = function(){alert(this.name)}
   }

   function Class2(){
       this.name = 'class2';
   }

   var class2 = new Class2();
   Class1.call(class2); //对当前class2对象进行动态的赋值设置处理
   alert("Class2.showTxt........"+Class2.showTxt());   //注意：类实例扩展了接口，但是类并没有扩展对应的接口************下同***********


   alert(class2.name); //先定义的 class2 而后有被重置为class1
   class2.showTxt();//class1 对象才能调用方法

   class2.name = 'test1';//重定义obj.name值
   alert(class2.showTxt);//对象的属性就是字符串 function(){alert(this.name)}
   class2.showTxt();//test1

}

function test3(){
   function Class1(){
       this.showTxt = function(){alert(this.name)}
   }

   function Class2(){
       this.name = 'class2';
   }

   Class1.call(Class2);   //两个类之间的处理
   alert(Class2.showTxt);//对象的属性也是字符串 function(){alert(this.name)}
   Class2.showTxt();//扩展了类的接口，但是没有调用类实例化的设置    （注意:类有扩展，类实例没有扩展处理)

   class2 = new Class2();        //此时在创建的对象已经不具备代理引用的条件了
   alert(class2.showTxt);               //undefined 没有定义属性

}

function test4(){

   function Class1(){
       this.showTxt = function(){alert(this.name)};
       this.showTxt2 = function(){alert(this.name)};
   }

   function Class2(){
       this.name = 'class2';
   }

   var class1 = new Class1();
   var class2 = new Class2();

   class1.showTxt.call(class2);//class2类实例上面的方法的调用是直接的调用，只是上下文this的引用进行了切换而已。
   //class2类实例及类都没有进行扩展

   alert("Class2.showTxt........"+Class2.showTxt);//只是对象方法的调用类没有扩展
   alert(class2.showTxt);//undefined （同时调用时一次性的，直接调用） ***********************
   alert(class2.showTxt2);//undefined

   Class1.call(class2);               //对象的处理
   class2.showTxt();
   class2.showTxt2();

}

function test5(){

   function Class1(){
       this.showTxt = function(){alert(this.name)}
   }

   function Class2(){
       this.name = 'class2';
   }

   var class1 = new Class1();
   class1.showTxt.call(Class2);//类（也是类实例化）上面的方法的调用是直接的调用，只是上下文this的引用进行了切换而已。
   //Class2类都没有进行扩展

   alert(Class2.showTxt);       //undefined
   var class2 = new Class2(); //创建了新的对象之前的代理引用已经不成立了
   alert(class2.showTxt);//undefined

}

function test6(){

   function f1(){
       alert(1);
   }
   function f2(){
       alert(2);
   }
   function f3(){
       alert(3);
   }
   function f4(){
       alert(4);
   }

   f1.call(f2);//1     //将f1 中的代理this,替换为 f2 ;要创建一个真实的f1的实例化.。。
   f1.call(f3);//1     //将f1 中的代理this,替换为 f2 ;要创建一个真实的f1的实例化.。。


   var ff = f1.call;   //自身的创建代理不去创建对象并保持这个引用，
   ff.call(f2);//2         //如果单纯的调用，则创建thisobj的对象
   ff.call(f3);//3
   ff.call(f4)//4

   ff = f4.call;
   ff.call(f2);//2

}

function test7(){

   function jsCall(oThis){//这里的jsCall就是Call
       var argsNew = [];
       alert("arguments.length......"+arguments.length);
       alert(this);

       for(var i=1;i<arguments.length;i++){
           argsNew.push(arguments[i]);
       }

       alert("before...........");
       return this.apply(oThis,argsNew);
   }
   Function.prototype.jsCall = jsCall;
   /*
       或简写成
   function jsCall(oThis){//这里的jsCall就是Call
       var argsNew = [].slice.call(arguments,1);
       return this.apply(oThis,argsNew);
   }
   */

   //参数已经传递过来，必须通过显示的定义来接收 a,b,c,d,e....
   function f1(a,b){
       alert(["in f1......","kkkkkkkkkkk"]);

       //中括号多个信息的展示处理
       //f1.jsCall(f2)时，没有参数
       alert([this,"it is param="+a+"....."+b,'f1']);

       alert("in f1.......end");
   }

   function f2(a,b){
       alert("in f2.....");
       alert(this);//?为什么变成了 4321 有知道的话回复我啊
       alert([this,a+"..."+b,'f2']);
   }


   //此时处理的 F1的构造函数中的this参数已经发生了变化
   //f1.jsCall(f2);     //直接调用处理
   //f1.jsCall(f2,1234);// 1234
   //f1.jsCall(f2,1234," after 000");// 1234..... after 000


   var ff = f1.jsCall;
   //alert(ff);
   ff.jsCall(f2,4321,"this's really params"," secord param");//4321,this's really params,f2

}

</script>
<body>
应用一对象的一个方法，用另一个对象替换当前对象。
apply([thisObj[,argArray]])
call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

<br/>
<INPUT TYPE=button value="test0" onclick="test0()">
<INPUT TYPE=button value="test1" onclick="test1()">
<INPUT TYPE=button value="test2" onclick="test2()">
<INPUT TYPE=button value="test3" onclick="test3()">
<INPUT TYPE=button value="test4" onclick="test4()">
<INPUT TYPE=button value="test5" onclick="test5()">
<INPUT TYPE=button value="test6" onclick="test6()">
<INPUT TYPE=button value="test7" onclick="test7()">
</body>
</html>