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

以前用过一段时间 node.js,经常看到有 apply,call这类的函数。干啥用的?很高大上的样子。

一、call 和 apply

在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。

所谓的this,javascript中,this都存在于函数内部。因此,在javascript里面,有一个总的原则,这个this,指的是调用该函数的对象。

所以,this代表什么这个问题,就转化成究竟是谁在调用该函数的问题。所谓的跟运行时上下文有关。

JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

所以,

某函数.call(某对象,参数1,参数2,……)
=》某函数内部的this被替换成了某对象

for example

function fruits() {}fruits.prototype = {color: "red",say: function() {alert("My color is " + this.color);}
};var apple = new fruits();
apple.say();    //My color is redvar banana = {color: "yellow"
};apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

apply类似。与call唯一不同的,是this后面的参数是一个数组

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

二、bind
bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

但apply与call顾名思义,都是在执行某个函数,而bind,是返回一个函数定义。

bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

function fruits() {}fruits.prototype = {color: "red",say: function() {alert("My color is " + this.color);}
};var apple = new fruits();
apple.say();    //My color is redvar banana = {color: "yellow"
};var bananasay = apple.say.bind(banana);//返回的是一个函数定义
bananasay();//My color is yellow

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

四、再说说this

如果不想this被运行时上下文所替换,有时可以将它用别的变量保存下来。看上去,javascript的变量类型都是值类型。

var foo = {bar : 1,eventBind: function(){var _this = this;//《----- 看到没???? $('.someClass').on('click',function(event) {alert(_this.bar);     //1});}
}

用bind来优雅解决:

var foo = {bar : 1,eventBind: function(){$('.someClass').on('click',function(event) {alert(this.bar);      //1}.bind(this));//《----- 看到没???? }
}

参考文章:

【优雅代码】深入浅出 妙用Javascript中apply、call、bind

转载于:https://www.cnblogs.com/leftfist/p/6808722.html

Javascript中的apply、call、bind相关推荐

  1. 如何在JavaScript中使用apply(?),call(?)和bind(➰)方法

    by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用apply(?),call(?)和bind(➰)方法 (How to use ...

  2. JavaScript 中call apply 那点简单事

    谈谈JavaScript 中call apply 那点简单事 平常是否遇到过call apply 的问题 比如说 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply ...

  3. 浅谈JavaScript中的apply、call和bind

    摘要 三种方法均可改变函数this关键字的指向. apply()接受一参数数组,返回函数执行的结果. call()接受一组参数,返回函数执行的结果. bind()接受一组参数,返回函数体.需在bind ...

  4. 复习javascript中call,apply,bind的用法

    一直很难理解js中的call apply bind,在w3schools,mdn阅读了,也看了很多相关的文章,今天我来写下我理解的call apply bind 首先创建一个函数 function m ...

  5. 浅谈JavaScript中的apply,call和bind

    apply,call,bine 这三兄弟经常让初学者感到疑惑.前两天准备面试时特地做了个比较,其实理解起来也不会太难. apply MDN上的定义: The apply() method calls ...

  6. 前端战五渣学JavaScript——call、apply以及bind

    写这篇博客之前,我想先说下今天(2019年3月28日)一直关注的一件事吧(出于凑热闹的心情--尴尬).在昨天,全球最大交友网站Github上悄然出现一个名为996.ICU的文档项目,整个项目没有代码, ...

  7. JavaScript call,apply,bind详解及实现

    1.前言 call,apply,bind这三个方法都是用来改变函数的this指向,如果有对this不熟悉的朋友,可以先看看笔者的这篇博客. call & apply call()语法: fun ...

  8. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = {user:"追梦子",fn:fun ...

  9. java apply 函数_Js(Javascript)中的apply方法的使用

    Function.apply(obj,args)方法能接收两个参数,简单说apply方法作用就是给类或方法中的this赋值.所以学会这个方法首先要知道this的作用.(this的用法可以看一下这个链接 ...

最新文章

  1. java打印四行等腰三角形_(c语言程序案例.doc
  2. 分享Kali Linux 2017年第29周镜像文件
  3. 验证证书有效期_笔试查分前,教资考试4个有效期你到底弄清楚了没?逾期不补!...
  4. web前端-移动端HTML5微商城项目实战分享案例
  5. SAP C4C客户主数据重复检查和清洗实现
  6. go 捕获网卡http_接口测试工具Postman(三)使用postman抓包捕获HTTP请求-Go语言中文社区...
  7. C#中的DBNull、Null、和String.Empty解释
  8. 监视和排错客户端性能和连接性
  9. Builder和Factory模式区别
  10. 关于ping与tracert网络命令详解
  11. google chrome 历史版本下载
  12. 驱动人生安装驱动计算机无法启动,驱动人生怎么安装驱动程序?驱动人生基本功能...
  13. ubuntu18.04桌面美化
  14. CIO40: IT男之日常工作(点线面体)
  15. C语言中正弦函数定义域,三角函数定义域和值域
  16. 苹果三代耳机_苹果准备三款AirPods耳机:Pro取消耳机柄、AirPods3改入耳式设计
  17. 网易考拉卖身阿里的前夜:HR欲哭无泪,太难了。
  18. matlab画图中该如何标注途中的某一点,以SIR模型为例
  19. 【091】肖邦《降B小调第一夜曲》
  20. 前端学习路线图--陆神版本思维导图

热门文章

  1. ubuntu 下 Could not get lock /var/lib/dpkg/lock解决方案
  2. DP Review 1
  3. nova hypervisor接口添加host_ip字段
  4. 关于应用程序启动,你可能不知道的东西
  5. Linux TOP 交互命令
  6. glsl-BufferObject- change
  7. IOS App 后台运行
  8. eclipse的remote search
  9. 在.NET客户端程序中使用多线程
  10. ubuntu下执行ulimit返回“不允许的操作”,问题解决思路