apply、call、bind区别、用法
var maxInNumbers = Math.max.apply(Math, numbers), //458
return Object.prototype.toString.call(obj) === '[object Array]' ;
详解call(),apply()和bind()
http://blog.csdn.net/u014267183/article/details/52610600
之前看了点es6的箭头函数,为了搞懂箭头函数的this,看了很多文章,也顺便看了几个绑定函数,发现很多以前没注意的问题,收获不少。
之前就在网上的笔试题中看过用js实现bind()函数,没怎么在意,以为既然都是用来进行上下文绑定的,用call或者apply应该就能实现。现在看,我还是图样图森破。
先来讲一下call()和apply()吧,对于这两个函数,我是看自己的书学习的,学的时候没觉的有什么问题,但是我查了一下网上的关于call()和apply()的文章,尼玛啊,这说都是些什么啊!!看着真费劲。
其实,call()和apply()就是改变函数的执行上下文,也就是this值。他们两个是Function对象的方法,每个函数都能调用。他们的第一个参数就是你要指定的执行上下文,第二个用来传递参数(说第二个不准确,应该说第二部分,因为参数可以传多个),也就是传给调用call和apply方法的函数的参数。说白了,就是调用函数,但是让它在你指定的上下文下执行,这样,函数可以访问的作用域就会改变。下面看点代码:
function apply1(num1, num2){
return sum.apply(this, [num1, num2]);
}
function call1(num1, num2){
return sum.call(this, num1, num2);
}
这里,我们执行环境传的是this,也就是说没改变函数的执行上下文。这两段代码,只是想告诉你call和apply的区别。
call的第二部分参数要一个一个传,apply要把这些参数放到数组中。这就是他们的区别,真的就这么点区别!!!
然后,不得不说的一点:它们的第二个参数都可以传arguments。
—————————————————————————————————————————————————————————————————————————————
下面来讲bind()函数,bind()是es5中的方法,他也是用来实现上下文绑定,看它的函数名就知道。bind()和call与apply不同。bind是新创建一个函数,然后把它的上下文绑定到bind()括号中的参数上,然后将它返回。
所以,bind后函数不会执行,而只是返回一个改变了上下文的函数副本,而call和apply是直接执行函数。
下面代码可以反映出这点,而且也显示了bind的用法(后面的代码皆取自张鑫旭大神的博客)
var button = document.getElementById("button"),
text = document.getElementById("text");
button.onclick = function() {
alert(this.id); // 弹出text
}.bind(text);
但由于ie6~ie8不支持该方法,所以若想在这几个浏览器中使用,我们就要模拟该方法,这也是面试常考的问题,模拟的代码如下:
if (!function() {}.bind) {
Function.prototype.bind = function(context) {
var self = this
, args = Array.prototype.slice.call(arguments); return function() {
return self.apply(context, args.slice(1));
}
};
}
就是这段代码,纠正了我长久以来的一个误区。下面来讲一下这段代码
首先,我们判断是否存在bind方法,然后,若不存在,向Function对象的原型中添加自定义的bind方法。
这里面var self = this这段代码让我很困扰,按理说,prototype是一个对象,对象的this应该指向对象本身,也就是prototype,但真的是这样吗。看看下面的代码:
function a(){};
a.prototype.testThis = function(){console.log(a.prototype == this);};
var b = new a();
b.testThis();//false
显然,this不指向prototype,而经过测试,它也不指向a,而指向b。所以原型中的this值就明朗了。指向调用它的对象。
Array.prototype.slice.call(arguments);
接下来就是上面这段代码,它会将一个类数组形式的变量转化为真正的数组。为啥呢,其实书上并没有说slice还有这样的用法,也不知道是谁发明的。slice的用法可以顺便上网查一下,就能查到。但要更正一点,网上的介绍说slice有两个参数,第一个参数不能省略。然而我不知道是我理解的问题还是咋地,上面这段代码tmd不就是典型的没传参数吗!!!arguments是传给call的那个上下文,前面讲过,不要弄混(由于arguments自己没有slice方法,这里属于借用Array原型的slice方法)。而且经过测试,若果你不给slice传参数,那就等于传了个0给它,结果就是返回一个和原来数组一模一样的副本。
这之后的代码就很好理解,返回一个函数,该函数把传给bind的第一个参数当做执行上下文,由于args已经是一个数组,排除第一项,将之后的部分作为第二部分参数传给apply,前面讲过apply的用法。
如此,我们自己的这个bind函数的行为就同es5中的bind一样了。
apply、call、bind区别、用法的更多相关文章
- call,apply,bind的用法与区别
1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...
- JS之apply,call,bind区别
为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- call和apply和bind区别
call和apply特征一样 都是用来调用函数 立即调用 但是可以在调用函数的同时 通过第一个参数指定函数内部this的指向 call 调用的时候 参数必须以参数列表的形式进行传递 也就是以逗号分隔的 ...
- call、apply、bind的用法
数组追加 //用apply拼接 var arr1=[12,'name:foo',2048]; var arr2=['Joe','Hello']; Array.prototype.push.apply( ...
- javascript中call()、apply()、bind()的用法理解
一.bind的用法 第一个:obj.showInfo('arg','arg_18');中传的2个参数通过showInfo方法改变的是obj下中的name和age 第二个:obj.showInfo.bi ...
- JS中的call()、apply() 以及 bind()方法用法总结
JS中的call()方法和apply()方法用法总结 : 讲解: 调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. function add(c,d){ return thi ...
- javascript中call()、apply()、bind()的用法终于理解
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- (转)javascript中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- <JavaScript> call()、apply()、bind() 的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例 1 obj.objAge; obj.myFun() // 小张年龄 undefined 例 2 shows() ...
随机推荐
- iOS编程——Objective-C KVO/KVC机制[转]
这两天在看和这个相关的的内容,全部推翻重写一个版本,这是公司内做技术分享的文档总结,对结构.条理做了更清晰的调整.先找了段代码,理解下,网上看到最多的一段的关于KVC的代码 先上代码 1. 1 ...
- Nginx禁止直接通过IP地址访问网站
介绍下在nginx服务器禁止直接通过IP地址访问网站的方法,以避免别人恶意指向自己的IP,有需要的朋友参考下. 有时会遇到很多的恶意IP攻击,在Nginx下可以禁止IP访问. Nginx的默认虚拟主机 ...
- Unity Ioc框架简单例子
IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection).作用:将各层的对象以松耦合的方式组织在一起,解耦,各 ...
- Mybatis中的多表查询 多对多
示例:用户和角色 一个用户可以有多个角色 一个角色可以赋予多个用户 步骤: 1.建立两张表:用户表,角色表 让用户表和角色表具有多对多的关系. 需要使用中间表,中间表中包含各自的主键,在中间表中是外键 ...
- 利用keytool工具生成数字证书
一.制作数字证书 因测试微信小程序, 腾讯要求使用 https协议,所以需要使用证书.使用jdk工具制作数字证书流程如下: 1.查看JDK是否安装,使用命令java -version 2.切换目录至 ...
- [Swift实际操作]八、实用进阶-(10)使用Swift创建一个二叉树BinaryTreeNode
1.二叉树的特点: (1).每个节点最多有两个子树(2).左子树和右子树是有顺序的,次序不能颠倒(3).即使某节点只有一个子树,也要区分左右子树 2.二叉查找树(Binary Search Tree) ...
- Windows NLB搭配IIS的ARR搭建高可用环境(转载)
原文地址:http://www.cnblogs.com/shanyou/archive/2010/04/28/1723276.html 在现行的许多网络应用中,有时一台服务器往往不能满足客户端的要求, ...
- Phpstudy+DiscuzX安装详解
1.下载Discuz,地址:https://gitee.com/ComsenzDiscuz/DiscuzX/repository/archive/master.zip 2.下载phpstudy 3.将 ...
- Python如何在子类里扩展父类的property?
<python cookbook>8.8节讨论子类扩展property时,一开始都晕了,思考了半天才勉强弄懂一点,赶快记下来.废话不多说,先上代码: class Person: def _ ...
- 190221协程与IO模型
一.协程 又称微线程 协程是一种用户态的轻量级的线程 在单线程下实现的并发,例如:yield 优点: 无需线程上下文切换的开销 无需原子操作锁定及同步的开销 方便切换控制流,简化编程模型 高并发,高扩 ...