js中的call()和apply()区别和详解

责编:menVScode 2018-01-22 0:46 阅读(461)

        call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。call 和 apply二者的作用完全一样,只是接受参数的方式不太一样

        apply

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

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

        args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。

        call

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

        call方法与apply方法的第一个参数是一样的,只不过第二个参数是一个参数列表。

function add(c,d){
    return this.a + this.b + c + d;
}

var s = {a:1, b:2};
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14 
console.log(add.call(s,3,4)); // 1+2+3+4 = 10

        在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

        例子1:此时foo中的logName方法将被bar引用 ,this指向了bar。

var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

        例子2:实现继承

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   
 
function Cat(name){  
  Animal.call(this, name);  
}   
 
var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

        例子3

/*定义一个Person类*/ 
function Person(name,age) { 
     this.name=name; 
     this.age=age;
} 
 /*定义一个学生类*/ 
 function Student(name,age,grade) { 
    //Person.apply(this,arguments);//特点:this指代student对象,只接收2个参数,arguments为隐式类数组对象,用来接收传入的参数;
      Person.call(this,name,age);//特点:this指代student对象,可以接收任意多个参数
      this.grade=grade; 
 } 
 var student =new Student("zhangsan",22,"二年级");//方法Student()也是object的一个实例
 //测试 
 alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade); // name:zhangsan age:22 grade:"二年级"
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.

        什么情况下用apply,什么情况下用call?

        使用apply的情况:在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型。

        使用call的情况: 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

标签: call() apply() js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码