***call,apply,bind

替换this

何时: 只要this不是想要的都可用call,apply,bind替换

选择:

call/apply: *调用*函数,在调用时,*临时*替换函数中的this为指定对象.

何时: 希望在调用函数时,临时替换this,就用call

apply的作用和call完全一样!

差别: apply要求传入函数的参数,必须放在数组中传入。

apply可自动打散数组类型参数为单个数据再传递给函数参数

回顾: Math.max(值1,值2,…)

Math.max.apply(null,arr)

apply: 1. 调用max

2. 用null代替max中的this——无视

3. 打散arr,再分别传给max

bind: 基于原函数*创建*一个新函数,*永久*绑定其中的this为指定对象

  function calc(base,bonus1,bonus2){
console.log(this.ename+"的总工资是:"
+(base+bonus1+bonus2));
}
var lilei={ename:"Li Lei"};
var hmm={ename:"Han Meimei"};
calc.call(lilei,10000,1000,2000);
var hmm_sals=[3000,4000,5000];
calc.apply(hmm,hmm_sals);
//calc(10000,1000,2000); var lilei_calc=calc.bind(lilei,10000);
//lilei_calc:function(base=10000,bonus1,bonus2){
// ...lilei.ename...
// }
lilei_calc(1000,2000);
lilei_calc(2000,3000);
//lilei_calc.call(hmm,3000,4000,5000);
var name = 'global';
var person = {
name: 'zero'
};
// 输出姓名、年龄和职业
function printInfo(age, job) {
console.log(this.name, age, job);
}
// 直接调用
printInfo(20, '前端工程师');
// 打印:global 20 前端工程师
// 因为默认的上下文是window,所以this.name是全局定义的global,如果我们想打印出来zero的话,就需要改变函数执行的上下文
printInfo.call(person, 20, '前端工程师');
printInfo.apply(person, [20, '前端工程师']);
// 这两种方式是一样的,第一个参数都是传进去的上下文,this.name取的是person.name,所以打印出来的名字就是zero了,后面的为age和job,只是参数传递的方式不一样,apply比较特殊,把要传的参数放在数组里面
// 而bind和以上两种有区别,bind是es5定义的新方法,用来返回一个有自己上下文的函数,用法也比较类似:
printInfo.bind(person)(20, '前端工程师');
// printInfo.bind(person)这一块是返回的以peron为上下文的函数,后面的(20, '前端工程师')是函数调用

call、apply、bind的更多相关文章

  1. JS中call、apply、bind使用指南,带部分原理。

    为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...

  2. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  3. 图解call、apply、bind的异同及各种实战应用演示

    一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...

  4. JavaScript中call、apply、bind、slice的使用

    1.参考资料 http://www.cnblogs.com/coco1s/p/4833199.html   2.归结如下 apply . call .bind 三者都是用来改变函数的this对象的指向 ...

  5. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  6. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  7. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  8. 数组去重,call、apply、bind之间的区别,this用法总结

    一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...

  9. javascript中call()、apply()、bind()的用法终于理解

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  10. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

随机推荐

  1. java基础3之IO

    流 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数据源可以是文件,内存,或是网络连接.类似的,当程序需要写入数据的时候,就会开启一个通向目的地的流. 流的种类 字符 ...

  2. 基于stm32智能车的设计(ucosiii)---北京之行

    实物演示视频:https://v.youku.com/v_show/id_XMzc3MDE3NjMyNA==.html?x&sharefrom=android&sharekey=172 ...

  3. git 忽略部分文件类型的同步

    场景 利用 pycharm 进行代码操作的时候会自动创建 .idea/ 文件夹 特么我每次随便做点操作.这里面的东西也会随着自动改一些 一开始开始无视 如果是多人协同开发会导致代码合并相关的问题 因此 ...

  4. Numpy 系列(十一)- genfromtxt函数

    定义输入 genfromtxt的唯一强制参数是数据的源.它可以是字符串,字符串列表或生成器.如果提供了单个字符串,则假定它是本地或远程文件或具有read方法的打开的类文件对象的名称,例如文件或Stri ...

  5. MySQL关于日志配置安全整改及处理方法

    [环境介绍] 系统环境:Linux + mysql 5.7.18 + 主从复制架构 [背景描述] 需求:MySQL数据库都有每年的集团安全整改,常常要求弱口令扫描,基线扫描,漏洞扫描等等.对于MySQ ...

  6. [再寄小读者之数学篇](2014-11-02 Herglotz' trick)

    设 $f$ 是 $\bbR$ 上周期为 $1$ 的连续可微函数, 满足 $$\bee\label{141102_f} f(x)+f\sex{x+\frac{1}{2}}=f(2x),\quad\for ...

  7. Javaweb学习笔记——(二十四)——————图书商城项目

    图书商城          环境搭建         1.导入原型             *用户模块             *分类模块             *图书模块              ...

  8. Android App性能测试之二:CPU、流量

    CPU---监控值的获取方法.脚本实现和数据分析 1.获取CPU状态数据 adb shell dumpsys cpuinfo | findstr packagename 自动化测试脚本见cpustat ...

  9. day 14 - 1 生成器

    生成器 生成器 生成器的本质就是迭代器生成器的表现形式 生成器函数 生成器函数 —— 本质上就是我们自己写得函数 生成器表达式生成器函数: 含有 yield 关键字的函数就是生成器函数 特点: 调用函 ...

  10. JavaWeb - apache和tomcat是如何配合工作的

    ref: https://jingyan.baidu.com/article/47a29f246f354ec0142399dc.html 网上有很多的介绍apache和tomcat的区别,但大部分都是 ...