转载JavaScript中Apply方法使用

转载原出处： http://blog.csdn.net/xingxing1828/article/details/25726041

我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高..

主要我是要解决一下几个问题:

1.        apply和call的区别在哪里

2.        什么情况下用apply,什么情况下用call

3.        apply的其他巧妙用法（一般在什么情况下可以使用apply）

我首先从网上查到关于apply和call的定义,然后用示例来解释这两个方法的意思和如何去用.

         apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.

 Function.apply(obj,args)方法能接收两个参数 obj：这个对象将代替Function类里this对象 args：这个是数组，它将作为参数传给Function（args-->arguments）

         call:和apply的意思一样,只不过是参数列表不一样.

 Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：这个对象将代替Function类里this对象 params：这个是一个参数列表

 

 

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.     /*定义一个人类*/  
  3.     function Person(name,age)  
  4.     {  
  5.         this.name=name;  
  6.         this.age=age;  
  7.     }  
  8.     /*定义一个学生类*/  
  9.     function Student(name,age,grade)  
  10.     {  
  11.         Person.apply(this,arguments);  
  12.         this.grade=grade;  
  13.     }  
  14.     //创建一个学生类   
  15.     var student=new Student("zhangsan",21,"一年级");  
  16.     //测试   
  17.     alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  
  18.     //大家可以看到测试结果name:zhangsan age:21  grade:一年级   
  19.     //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.   
  20. </script>  
<script type="text/javascript">
	/*定义一个人类*/
	function Person(name,age)
	{
		this.name=name;
		this.age=age;
	}
	/*定义一个学生类*/
	functionStudent(name,age,grade)
	{
		Person.apply(this,arguments);
		this.grade=grade;
	}
	//创建一个学生类
	var student=new Student("zhangsan",21,"一年级");
	//测试
	alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
	//大家可以看到测试结果name:zhangsan age:21  grade:一年级
	//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.
</script>

 

分析: Person.apply(this,arguments);

this:在创建对象在这个时候代表的是student

arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];

                   也就是通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

 

2.        call示例

在Studen函数里面可以将apply中修改成如下:

Person.call(this,name,age);

这样就ok了

3.        什么情况下用apply,什么情况下用call

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply , 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

4.        apply的一些其他巧妙用法

细心的人可能已经察觉到,在我调用apply方法的时候,第一个参数是对象(this), 第二个参数是一个数组集合, 在调用Person的时候,他需要的不是一个数组,但是为什么他给我一个数组我仍然可以将数组解析为一个一个的参数,这个就是apply的一个巧妙的用处,可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) (Apply的作用可以用这句话来概括)这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表,可能都得费一会功夫,借助apply的这点特性,所以就有了以下高效率的方法:

 

a)        Math.max 可以实现得到数组中最大的一项

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组

但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

         这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去

b)        Math.min  可以实现得到数组中最小的一项

同样和 max是一个思想 var min=Math.min.apply(null,array);

c)        Array.prototype.push 可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. vararr1=new Array("1","2","3");  
  2.   
  3. vararr2=new Array("4","5","6");  
  4.   
  5. Array.prototype.push.apply(arr1,arr2);  
	 vararr1=new Array("1","2","3");

	 vararr2=new Array("4","5","6");

	 Array.prototype.push.apply(arr1,arr2);

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!

 

 

1、对象的继承，一般的做法是复制：Object.extend

prototype.js的实现方式是：

 

 Object.extend = function(destination, source) {      for (property in source) {          destination[property] = source[property];      }      return destination;  }

除此之外，还有种方法，就是：Function.apply（当然使用Function.call也是可以的）

apply方法能劫持另外一个对象的方法，继承另外一个对象的属性

Function.apply(obj,args)方法能接收两个参数

    obj：这个对象将代替Function类里this对象

    args：这个是数组，它将作为参数传给Function（args-->arguments）

apply示范代码如下：

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. <script>   
  2. function Person(name,age){   //定义一个类，人类     
  3.     this.name=name;     //名字     
  4.     this.age=age;       //年龄    
  5.     this.sayhello=function(){alert("hello")};  
  6. }   
  7. function Print(){            //显示类的属性    
  8.     this.funcName="Print";   
  9.     this.show=function(){        
  10.         var msg=[];  
  11.         for(var key in this){   
  12.             if(typeof(this[key])!="function"){  
  13.                 msg.push([key,":",this[key]].join(""));  
  14.             }  
  15.         }   
  16.         alert(msg.join(" "));  
  17.     };  
  18. }   
  19. function Student(name,age,grade,school){    //学生类    
  20.     Person.apply(this,arguments);  
  21.     Print.apply(this,arguments);  
  22.     this.grade=grade;                //年级    
  23.     this.school=school;                 //学校    
  24. }   
  25. var p1=new Person("jake",10);  
  26. p1.sayhello();  
  27. var s1=new Student("tom",13,6,"清华小学");  
  28. s1.show();  
  29. s1.sayhello();  
  30. alert(s1.funcName);  
  31. </script>  
<script> 
function Person(name,age){   //定义一个类，人类  
    this.name=name;     //名字  
    this.age=age;       //年龄 
    this.sayhello=function(){alert("hello")};
} 
function Print(){            //显示类的属性 
    this.funcName="Print"; 
    this.show=function(){      
        var msg=[];
        for(var key in this){ 
            if(typeof(this[key])!="function"){
                msg.push([key,":",this[key]].join(""));
            }
        } 
        alert(msg.join(" "));
    };
} 
function Student(name,age,grade,school){    //学生类 
    Person.apply(this,arguments);
    Print.apply(this,arguments);
    this.grade=grade;                //年级 
    this.school=school;                 //学校 
} 
var p1=new Person("jake",10);
p1.sayhello();
var s1=new Student("tom",13,6,"清华小学");
s1.show();
s1.sayhello();
alert(s1.funcName);
</script>

学生类本来不具备任何方法，但是在Person.apply(this,arguments)后，

他就具备了Person类的sayhello方法和所有属性。

在Print.apply(this,arguments)后就自动得到了show()方法

 

2、利用Apply的参数数组化来提高

Function.apply()在提升程序性能方面的技巧

我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。

比如  alert(Math.max(5,8))   //8 alert(Math.max(5,7,9,3,1,6))   //9

但是在很多情况下，我们需要找出数组中最大的元素。 var arr=[5,7,9,1] alert(Math.max(arr))    // 这样却是不行的。一定要这样写

function getMax(arr){     var arrLen=arr.length;     for(var i=0,ret=arr[0];i<arrLen;i++){         ret=Math.max(ret,arr[i]);            }     return ret; }

这样写麻烦而且低效。如果用 apply呢，看代码： function getMax2(arr){     return Math.max.apply(null,arr); } 两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。

 

再比如数组的push方法。 var arr1=[1,3,4]; var arr2=[3,4,5]; 如果我们要把 arr2展开，然后一个一个追加到arr1中去，最后让arr1=[1,3,4,3,4,5] arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]

我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2)，但是concat方法并不改变arr1本身) var arrLen=arr2.length for(var i=0;i<arrLen;i++){     arr1.push(arr2[i]); }

自从有了Apply,事情就变得如此简单 Array.prototype.push.apply(arr1,arr2)

 

posted on   新西兰程序员  阅读(122)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示
AI IDE Trae