JS中call与apply的应用与区别

2019年5月22日 77次阅读 来源: Gavin_Alison

发现http://uule.iteye.com/blog/1158829博客上讲的不对，在此修改一下。

call

语法： call([thisObj [, arg1[, arg2]]])
语义：如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
例子：add.call(sub , 3 , 1);
调用一个对象的一个方法，以另一个对象替换当前对象.
调用add对象的add方法，用sub对象替换 add 对象，就成了调用add();

apply

语法：apply(thisObj [, argArray | arguments ]);
语义：应用某一对象的一个方法，用另一个对象替换当前对象。
tips:
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

区别

call 与apply，这两个方法基本上是一个意思，第一个参数一样。
区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，
也可以是arguments。

例子:
1.执行add方法，add方法中的this说指向的是sub

function add(a, b){
  console.log(a+b);
}
function sub(a, b){
  console.log(a-b);
}
add.call(sub, 3 ,1);  //4

2.执行animal.showName方法，其中的this.name说指向的是cat对象，值为cat。

function Animal(){
  this.name = "Animal";
  this.showName = function(){
    console.log(this.name);
  }
}
function Cat(){
  this.name= 'cat';
}

var animal = new Animal();
var cat = new Cat();

animal.showName.call(cat, ',');//cat
//animal.showName.apply(cat, []); //cat

3.继承，开始cat1对象中没有showName方法，Animal.call(this, name)语句执行后，Cat1函数就可以继承Animal中的属性和方法。

继承
function Cat1 (name){
  Animal.call(this, name); 
}

var cat1 = new Cat1('Black Cat1!');
cat1.showName();//  Animal

4.多重继承

多重继承
function class1(){
  this.showSub = function(a, b){
    alert(a-b);
  }
}
function class2(){
  this.showAdd = function(a, b){
    alert(a +b);
  }
}
function class3(){
  class1.call(this);
  class2.call(this);
}
new class3().showSub(10 , 1);//9
new class3().showAdd(9 , 8); //17

5.call与apply只是改变this的指向.

function Obj (){
  this.value = 'vars';
}
var value = 'args';
function Fun1(){ 
  alert(this.value);
} 
window.Fun1();//args
Fun1.call(window);//args
Fun1.apply(window);//args
Fun1.call(document.getElementById('my'));//args
Fun1.call(new Obj());//vars
//--------------------
var func = new function(){
  this.a = 'func';
}
var myFunc = function(x){
  var a= 'myFunc';
  //this.a = 'myFunc';
  alert(this.a);
  alert(x);
}
myFunc.call(func, 'var'); // func   ----   var
//tips: 调用func的new function()方法，其中的this.a已经替换成myFunc的对象了。

PS: 若你觉得可以、还行、过得去、甚至不太差的话，可以“关注”一下，就此谢过!

    原文作者：Gavin_Alison
    原文地址: https://www.jianshu.com/p/53940f8a80cb
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞