菜单

Javascript中call和apply的差别与详解

2019年8月10日 - JavaScript

在js中call和apply它们的作用都是将函数绑定到其它二个对象上去运维,两个仅在概念参数格局有所差别,上面作者来给我们介绍一下call和apply用法。

在js中call和apply它们的效应是改换函数调用对象,落成接二连三

在web前端开拓进程中,大家平常索要退换this指向,平日我们想到的正是用call方法,不过对于call的知情很几人不是很分明,那么下边笔者就给大家详细说一说call和apply的详尽知识

例如:

一.call方法的定义

退换调用对象

大家在百度里面能够寻觅call,关于call的定义都很隐晦。在自家的知情,a.call(b,arg1,arg2..)便是a对象的艺术应用到b对象上。举例如下例子:

function a(x,y)
{
    alert(x+y);
}
function b(x,y)
{
    alert(x-y);
}
a.call(b,1,5) //将a方法交给b用,结果为5

 代码如下

 改变this指向

复制代码

function b()
{
    alert(this)
}
b(); //window
b.call(); //window
b.call(“a”,2,3); //a
方法b定义时属于全局对象window,当b.call("a")时,方法b有=由对象“a”调用

 var a = function () {  
  alert(this.name);  
};  
 var b = {  
  name: "xiaohua"  
};  
a.call(b)  //带有nmae属性的对象b调用方法a,a方法中的this指向b

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

  

二.call能够变动this指向

落到实处持续

如下例:

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

 代码如下

  

复制代码

apply和call的用法一样,唯有传参格局各异

function b()
{
alert(this)
}
b(); //window
b.call(); //window
b.call(“a”,2,3); //a

a.call(b,arg1,arg2…) //
方法.call(对象,参数,参数。。。。)

再看一个繁杂的事例:

a.apply(b,[arg1,arg2])
// 方法.apply(对象,[参数,参数。。。。])

 代码如下

 

复制代码

apply的一些任何巧妙用法

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

(1)Math.max
可以兑现获得数组中最大的一项:

三,完结三番五次

     
 因为Math.max不支持Math.max([param1,param2])也正是数组,可是它援助Math.max(param1,param2…),所以能够依附apply的风味来化解var
max=Math.max.apply(null,array),那样就随便的能够获得一个数组中的最大项(apply会将二个数组调换为二个参数接三个参数的措施传送给艺术)

如下例子:

这块在调用的时候第二个参数给了null,那是因为尚未对象去调用这一个点子,作者只须求用这些主意帮本人演算,获得再次回到的结果就行,所以一向传送了多少个null过去。

 代码如下

用这种方法也能够完成得到数组中的最小项:Math.min.apply(null,array)

复制代码

 

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

(2)Array.prototype.push可以兑现多个数组的合併

四.apply用法

       
同样push方法没有提供push叁个数组,可是它提供了push(param1,param2…paramN),同样也足以用apply来调换一下以此数组,即:

apply和call的用法唯有一个地点不均等,除了那些之外,其余地点主导如出一辙

     1.var arr1=new
Array(“1″,”2″,”3”);

a.call(b,arg1,arg2…)

          2.var arr2=new
Array(“4″,”5″,”6”);

apply(b,[arg1,arg2])
//apply独有2个参数,它将call的参数(arg1,arg2…)放在三个数组中作为apply的第二参数

         
3.Array.prototype.push.apply(arr1,arr2);    

http://www.bkjia.com/AJaxjc/625771.htmlwww.bkjia.comtruehttp://www.bkjia.com/AJaxjc/625771.htmlTechArticle在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别,下面我来给大家介绍一下call和apply用

   //获得统一后数组的尺寸,因为push就是回去三个数组的长短也足以如此明白,arr1调用了push方法,参数是因而apply将数组转换为参数列表的聚合

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图