call、apply、bind
***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的更多相关文章
- JS中call、apply、bind使用指南,带部分原理。
为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...
- Javascript中call、apply、bind函数
javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...
- 图解call、apply、bind的异同及各种实战应用演示
一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...
- JavaScript中call、apply、bind、slice的使用
1.参考资料 http://www.cnblogs.com/coco1s/p/4833199.html 2.归结如下 apply . call .bind 三者都是用来改变函数的this对象的指向 ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 数组去重,call、apply、bind之间的区别,this用法总结
一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...
- javascript中call()、apply()、bind()的用法终于理解
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- JS 中的this指向问题和call、apply、bind的区别
this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...
随机推荐
- python之property、类方法和静态方法
一.完整的property1.定义一个方法被伪装成属性之后,应该可以执行一个属性的增删改查操作,增加和修改就对应着被setter装饰的方法,删除一个属性对应着被deleter装饰的方法. @prope ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
- P1137 旅行计划
/*拓扑排序去寻找点的拓扑序 便于DP,那么怎么去找 首先邻接表存边,然后dfs搜寻每一个点 最后进行拓扑排序,找到拓扑序*/ #include<bits/stdc++.h> ; ; us ...
- 小程序运行报错:errMsg: "request:fail url not in domain list"
错误原因: 报错提示说请求的url不在域名列表里,应该是还没有配置服务器域名 解决方法: 可点击开发者工具右上角 详情-项目设置-不校验合法域名.web-view(业务域名).TLS 版本以及 HTT ...
- 关于百度地图(离线)使用过程报“Cannot read property 'jb' of undefined ”错误的解决办法
使用百度地图(离线)API时,地图无法显示,f12查看报错: BaiduApi_2.0.js:1056 Uncaught TypeError: Cannot read property 'jb' of ...
- python中的三元运算
一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...
- Fiddler--AutoResponder
AutoResponder支持创建规则,可以在响应请求时自动触发,常见例子是返回之前捕捉的响应,而不需要访问服务器. 通俗点讲,就是它能在不访问服务器的情况下,使发送的请求得到自己设置的响应. 下图是 ...
- Entity Framework入门教程(12)--- EF进行批量添加/删除
EF6添加了批量添加/删除实体集合的方法,我们可以使用DbSet.AddRange()方法将实体集合添加到上下文,同时实体集合中的每一个实体的状态都标记为Added,在执行SaveChange()方法 ...
- EF CodeFirst系列(8)--- FluentApi配置单个实体
我们已经知道了在OnModelCreating()方法中可以通过FluentApi对所有的实体类进行配置,然而当实体类很多时,我们把所有的配置都放在OnModelCreating()方法中很难维护.E ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...