博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Apply、Call、Bind
阅读量:5906 次
发布时间:2019-06-19

本文共 3126 字,大约阅读时间需要 10 分钟。

Apply和Call

在开始,我们带着这几个疑问

  1. apply和call的区别是什么?
  2. 什么情况下使用apply,什么情况下使用call
  3. apply的其他妙用

Apply

方法可以劫持另外一个对象的方法,继承另外一个对象的属性

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

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

args:这个是数组,他将作为参数传给Function

Call

和apply的意思一样,只不过参数列表不一样

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

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

params:这个是一个参数列表

Apply实例

Function Person (name,age){    this.name = name;    this.age = age}Function Student (name,age,grade){    Person.apply(this,arguments);    this.grade = grade;}var student = new Student('zhangsan',21,'一年级')//测试  alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);  //大家可以看到测试结果name:zhangsan age:21  grade:一年级  //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.  复制代码

分析:Person.apply(this,arguments);

this:在创建对象的时候代表的是student

arguments:是一个数组,也就是['zhangsan',21,'一年级']

通俗的讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面

Call实例

Person.call(this,name,age)复制代码

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

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

在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply

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

Apply的一些其他妙用

apply可以将一个数组默认转换为一个参数列表([param1,param2,param3]=>param1,param2,param3) 借助这个特性:

Math.max 可以实现得到数组中最大的一项

Math.max 参数里面不支持Math.max([param1,param2])

var max=Math.max.apply(null,array)

apply会将一个数组装换为一个参数接一个参数的传递给方法

总结:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题!

数组之间的追加

var array1 = [12 , "foo" , {name:"Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); 复制代码

上面的array1定义了this只想array1,后面的array2提供了她的参数

类(伪)数组使用数组方法

什么是类数组

  • 拥有length属性,其它属性(索引)为非负整数
  • 不具有数组所具有的方法
//类数组示例var a = {
'1':'gg','2':'love','4':'meimei',length:5};Array.prototype.join.call(a,'+');//'+gg+love++meimei'复制代码

通过Array.isArray(a)方法判断为false

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));复制代码

JavaScript中存在一种名为伪数组的对象结构。比如arguments对象,childNodes之类的,他们返回的NodeList对象都属于伪数组,不可以用Array的push和pop犯法。

但是! 我们可以通过 Array.prototype.slice.call转换为真正的数组带有length属性的对象,然后就可以用Array下的所有方法了

Bind 绑定函数

bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。

bind() 的传参顺序是传入的预定义参数+原本的参数

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// 预定义参数37var leadingThirtysevenList = list.bind(undefined, 37);var list2 = leadingThirtysevenList(); // [37]var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]复制代码

apply、call、bind比较

var obj = {    x: 81,}; var foo = {    getX: function() {        return this.x;    }} console.log(foo.getX.bind(obj)());  //81console.log(foo.getX.call(obj));    //81console.log(foo.getX.apply(obj));   //81复制代码

注:三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号

即:当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
  • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
  • apply 、 call 、bind 三者都可以利用后续参数传参;
  • bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

仅用于个人整理,参考

转载于:https://juejin.im/post/5c98aa3ce51d4549396da287

你可能感兴趣的文章
python模块--os模块
查看>>
Java 数组在内存中的结构
查看>>
《关爱码农成长计划》第一期报告
查看>>
学习进度表 04
查看>>
谈谈javascript中的prototype与继承
查看>>
时序约束优先级_Vivado工程经验与各种时序约束技巧分享
查看>>
minio 并发数_MinIO 参数解析与限制
查看>>
flash back mysql_mysqlbinlog flashback 使用最佳实践
查看>>
mysql存储引擎模式_MySQL存储引擎
查看>>
java 重写system.out_重写System.out.println(String x)方法
查看>>
配置ORACLE 11g绿色版客户端和PLSQL远程连接环境
查看>>
ASP.NET中 DataList(数据列表)的使用前台绑定
查看>>
Linux学习之CentOS(八)--Linux系统的分区概念
查看>>
System.Func<>与System.Action<>
查看>>
asp.net开源CMS推荐
查看>>
csharp skype send message in winform
查看>>
MMORPG 游戏服务器端设计--转载
查看>>
HDFS dfsclient写文件过程 源码分析
查看>>
ubuntu下安装libxml2
查看>>
nginx_lua_waf安装测试
查看>>