Javascript中call和apply的区别与详解

时间:2023-03-09 06:10:39
Javascript中call和apply的区别与详解

在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别,下面我来给大家介绍一下call和apply用法;

在web前端开发过程中,我们经常需要改变this指向,通常我们想到的就是用call方法;

说明:a.call(b,arg1,arg2..)就是a对象的方法应用到b对象上

a.apply(b,[arg1,arg2,....])也是a对象的方法应用到b对象上,只不过是第二个参数不一样而已;

例如:

function add(a,b)
{
alert(a+b);
}
function reduce(a,b)
{
alert(a-b);
}
add.call(reduce,1,5) //将add方法运用到reduce,结果为6

function add(a,b)
{
alert(a+b);
}
function reduce(a,b)
{
alert(a-b);
}
add.apply(reduce,[1,5]) //将add方法运用到reduce,结果为6

JS里面实现继承和改变this的引用一样也是通过call和apply

例如

function Animal(name)
{
this.name=name;
this.showName=function()
{
alert(this.name)
}
}
function Cat(name)
{
Animal.call(this,name); //将Animal应用到Cat上,因此Cat拥有了Animal的所有属性和方法
}
var cat = new Cat(“Black Cat”);
cat.showName(); //浏览器弹出Black Cat

改变this的引用

function Animal()
{
this.name=”animal”;
this.showName=function()
{
alert(this.name)
}
}
function Cat()
{
this.name=”cat”;
}
var animal = new Animal();
var cat = new Cat();
animal.showName(); //结果为animal
animal.showName.call(cat); //原本cat没有showName方法,但是通过call方法将animal的showName方法应用到cat上,因此结果为cat