JS中的apply()使用详解

JS中的apply()使用详解

apply(要绑定给this的值,参数数组)方法用来调用函数及扩展作用域

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

obj:这个对象将代替Function函数里的this对象

args:这个是数组,它将作为参数传给Function(args);  

call和apply的意思一样,只不过是参数要一个一个列出来.

eg:Function.call(obj,[param1[,param2[,…[,paramN]]]])

obj:这个对象将代替Function函数里的this对象

params:这个是一个参数列表

  1. 先看一个Function就是个函数的例子:
1
2
3
4
5
6
7
8
9
10
function Person(name,age){
this.name=name;
this.age=age;
}
function Student(name,age,grade){
Person.apply(this,arguments);
this.grade=grade;
}
var student=new Student("MaYun",21,"大三");
alert(student.name+" "+student.age+" "+student.grade);

代码解析

  这里Student里虽然没有给name和age属性赋值的语句,但调用了Person构造函数。所以var student=new Student(“MaYun”,21,”大三”);new出来的Student构造函数里:

  因为遵循构造器调用模式(new)中this被绑定到新对象(即student),所以

  Person.apply(this,arguments);就相当于Person.apply(student,arguments);就相当于student.Person(name,age,grade);

  此时Person中的this.name=name;this.age=age;中的this因为属于方法调用模式被绑定到调用该方法的对象上,所以就相当于student.name=name;student.age=age;

  1. 再来看一个Function是一个对象的方法的例子:
1
2
3
4
5
6
7
8
9
var aa={
name:"DAOMA"
};
var bb={name:"MADAO"};
bb.diff=function(){
alert(this.name+" "+arguments[0]);
}
bb.diff("啦啦啦"); //MADAO 啦啦啦
bb.diff.call(aa,"我们不一样~"); //DAOMA 我们不一样~

代码解析

  因为call的第一个参数就是用来代替前面函数里的this对象,不管Function是一个函数还是对象的方法,call的第一个参数就是替代了那个对象。

  所以bb.diff.call(aa,”我们不一样~”); 相当于 aa.diff(“我们不一样~”);

巧妙使用apply(this,args)的args参数

  如果见到apply(null,args);这种写法,这样其实不算调用什么东东了,只是可以将一个args数组默认的转换为一个参数列表(即[param1,param2,param3] 转换为 param1,param2,param3)来传惨。

比如下面的例子想得到数组中最大的一项 。

1
2
3
4
5
var array=[50,60,70,90,100];
var max=Math.max(array);
alert(max); //NaN
max=Math.max.apply(null,array);
alert(max); //100

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

  但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的这个特点可以得到一个数组中最大的一项 。

同样的push方法没有提供push一个数组中的每一项

1
2
3
4
5
6
7
var a1=["a","b","c"];
var a2=["a","b","c"];
var b=["x","y","z"];
a1.push(b);
alert(a1.length);//4,即把b数组作为单个元素push了,a1=["a","b","c",["x","y","z"]]
Array.prototype.push.apply(a2,b);
alert(a2.length);//6,即把b数组中的每一项都push了,a2=["a","b","c","x","y","z"]

  因为push方法会修改原数组,所以这里用了a1和a2两个数组来作例子。

文章目录
  1. 1. JS中的apply()使用详解
    1. 1.1. apply(要绑定给this的值,参数数组)方法用来调用函数及扩展作用域
      1. 1.1.1. eg:Function.apply(obj,args)方法能接收两个参数,其中
      2. 1.1.2. obj:这个对象将代替Function函数里的this对象
      3. 1.1.3. args:这个是数组,它将作为参数传给Function(args);  
    2. 1.2. call和apply的意思一样,只不过是参数要一个一个列出来.
      1. 1.2.1. eg:Function.call(obj,[param1[,param2[,…[,paramN]]]])
      2. 1.2.2. obj:这个对象将代替Function函数里的this对象
      3. 1.2.3. params:这个是一个参数列表
      4. 1.2.4. 代码解析
      5. 1.2.5. 代码解析
    3. 1.3. 巧妙使用apply(this,args)的args参数
    4. 1.4. 比如下面的例子想得到数组中最大的一项 。
    5. 1.5. 同样的push方法没有提供push一个数组中的每一项
,