JS中的call()和apply()方法的区别

发表于   |  

call和apply，它们的作用都是将函数绑定到另外一个对象上去运行

方法定义

call方法:

- 语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
- 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 
- 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：

- 语法：apply([thisObj[,argArray]]) 
- 定义：应用某一对象的一个方法，用另一个对象替换当前对象。 
- 说明： 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
  • call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。
    对于apply和call两者在作用上是相同的，但两者在参数上有区别的：第一个参数意义都一样。第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。*

常用实例

call和apply的简单用法

1
2
3
4
5
6
7
8
9
10
var func = function() {
   this.a="func"
}
var myfunc = function(x) {
  var a = "myfunc";
  console.log(this.a);
  console.log(x);
}
myfunc.call(new func(),"var");
myfunc.apply(new func(),["var"]);

实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 // 继承的演示
function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
        window.alert(this.member);
    }
}
function extend() {
    base.call(this);
    window.alert(member);
    window.alert(this.method);
}
function extend2() {
    base.apply(this);
    window.alert(member);
    window.alert(this.method);
}

多重继承

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
var s1 = function(name){
  this.name = name;
}
var s2 = function(sex){
  this.sex = sex;
}
var s3 = function(age){
  this.age = age;
}
var Student = function(name,sex,age,score){
  s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;
}
Student.prototype.construction = Student;
var s = new Student('jack','male','12','100');
console.log(s.name); //输出:jack
console.log(s.sex);  //输出:male 
console.log(s.age);  //输出:12
console.log(s.score);//输出:100

这样我们就可以根据各个不同的功能模块分不同的程序员独立开发，最后合并起来，实现了多重继承。