老生常谈javascript之call，apply的区别

rollback 发布于2019-08-19 17:13 / 3106人阅读

摘要：刚开始看到的函数和时，非常的模糊，不知所云，然后看书，网上查询多少知道点了眉目，下面是我做的笔记，希望和大家分享，有不对之处希望各位多多指正，共同进步。。。

刚开始看到javascript的函数apply和call时，非常的模糊，不知所云，然后看书，网上查询多少知道点了眉目，下面是我做的笔记，希望和大家分享，有不对之处希望各位多多指正，共同进步。。。
本文将从三个方面介绍apply，call的用法

1. apply,call的定义和区别
2. 什么情况下使用apply,什么情况下使用call
3. 巧用apply

apply,call的定义和区别
apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象(就是定义函数代码块里面的this)
args：这个是数组，它将作为参数传给Function（args-->arguments）,这个可以是数组也可以是 arguments

call和apply的意思一样，唯一不同的是接受的参数不同，
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表

aplly示例
//定义一个Animal的类
function Animal(name,age){

   this.name = name;
   this.age = age;

}
//定义一个cat类
function Cat(name,age,kind){

   Animal.apply(this,arguments);//调用Animal的方法，并将里面的this，转换成Cat实例
   this.kind = kind;

}
var cat = new Cat("yingwu",4,"cat");

分析: Animal.apply(this,arguments);
this:在创建对象在这个时候代表的是cat实例
arguments:是一个数组,也就是[“zhangsan”,”21”,”一年级”];
也就是通俗一点讲就是:用cat去执行Animal这个类里面的内容,在Animal这个类里面存在this.name等之类的语句,这样就将属性创建到了catt对象里面

call示例，将上面代码变成call就是
Animal.call(this,name,age)//其他的保持不变，这就是差uncanbutong

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

在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且在调用Animal的时候参数的列表是对应一致的(也就是Animal和Cat的参数列表前两位是一致的) 就可以采用 apply , 如果我的Animal的参数列表是这样的(age,name),而Cat的参数列表是(name,age,kind),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,kind));

apply的一些其他巧妙用法
通过以上示例可以看出apply可以讲一个数组默默的解析成一个一个的参数，可以将一个数组默认的转换为一个参数列表([param1,param2,param3] 转换为 param1,param2,param3) ，利用aplly这个特点我们就可以用在一些针对字符串操作的方法了：例如
a) Math.max 可以实现得到数组中最大的一项

   

  因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组
  但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决                                          
   var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项  (apply会将一个数组装换为一个参数接一个参数的传递给方法)    这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去（利用Math方法但是不改变this的指向）

b) Math.max 可以实现得到数组中最大的一项
和 max是一个原理 var min=Math.min.apply(null,array);
c) Array.prototype.push 可以实现两个数组合并

var arr1=new Array("1","2","3");

var arr2=new Array("4","5","6");

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

通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

**
一般在目标函数只需要n个参数列表,而不接收一个数组的形式（[param1[,param2[,…[,paramN]]]]）,可以通过apply的方式巧妙地解决这个问题!
末尾略微提一下bind方法是ES5新出的，它主要是绑定函数内部的this，示例

window.color = "red";
var o = { color: "blue" };
function sayColor(){

alert(this.color);

}
var objectSayColor = sayColor.bind(o);
objectSayColor(); //blue
//讲this绑定在o对象上，所以sayColor里面的this.color就指向哦，即使全局调用ojectSayColor依旧输出blue
支持bind()方法的浏览器有 IE9+、Firefox 4+、Safari 5.1+、Opera 12+、 Chrome

总结，这个一定要多敲代码，理解，目前我的理解是aplly,call都是调用别人的方法并且讲方法里面的this改变，两者传参数不同，正因为传参数不同，所以可以用aplly用在一些目标函数只需要接受n个参数列表，而不接受数组的函数里面，文章中部分内容参考自http://www.cnblogs.com/xiaoho...，也添加了自己的理解，不对之处还望各位多多指正

GPU云服务器云服务器 apply与call的区别 js中的call和apply JS中bind、call和apply的作 javascript call

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78306.html

老生常谈javascript之call，apply的区别

摘要：开始看到的函数和时，非常的模糊，不知所云，然后看书，网上查询多少知道点了眉目，下面是我做的笔记，希望和大家分享，有不对之处希望各位多多指正，共同进步。。。开始看到javascript的函数apply和call时，非常的模糊，不知所云，然后看书，网上查询多少知道点了眉目，下面是我做的笔记，希望和大家分享，有不对之处希望各位多多指正，共同进步。。。本文将从三个方面介绍apply，call...

高胜山 2019-08-19 18:02 评论0 收藏0
JavaScript深入系列15篇正式完结！

摘要：写在前面深入系列共计篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺底层知识的系列。深入系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 深入系列共计 15 篇已经正式完结，这是一个旨在帮助大家，其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、...

fxp 2019-08-20 16:50 评论0 收藏0
Javascript重温OOP之类与对象

摘要：对构造函数使用运算符，就能生成实例，并且变量会绑定在实例对象上。这个对象的所有属性和方法，都会被构造函数的实例继承。对象对象的含义所谓对象，就是一种无序的数据集合，由若干个键值对（key-value）构成。对象的创建使用new运算符创建Object var p = new Object(); p.name = Tony; 使用对象字面量的形式 //对象字面量形...

RancherLabs 2019-08-22 11:01 评论0 收藏0
前端基础知识总结

摘要：关于前端中是个老生常谈的问题，总是说不清道不明，看这里。的大致用法，相信接触过前端的同学都知道，无非以下种。先想一下，两次执行后结果是什么。输出总结被谁调用指向谁，没有被调用的情况下，浏览器默认为。由于箭头函数中的，总是指向父级作用域。关于this 前端中this是个老生常谈的问题，总是说不清道不明，看这里。this只能用在函数里面，相信全世界的人都知道。this就是函数在被执行的时...

MageekChiu 2019-08-22 18:24 评论0 收藏0
不再彷徨：完全弄懂JavaScript中的this（译文总结）

摘要：至于，其只是以数组的方传入参数，其它部分是一样的，如下它们也可用于在中的类继承中，调用父级构造器。间接调用，调用了父级构造器对比方法和，它俩都立即执行了函数，而函数返回了一个新方法，绑定了预先指定好的，并可以延后调用。其实this是一个老生常谈的问题了。关于this的文章非常多，其实我本以为自己早弄明白了它，不过昨天在做项目的过程中，还是出现了一丝疑惑，想到大概之前在JavaScri...

YanceyOfficial 2019-08-21 10:56 评论0 收藏0