call,apply,bind
| 一、call&apply |
call, apply都属于Function.prototype的方法,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性啦。
如果不明白，请见“Javascript之一切皆为对象3”。
而且它们的作用都是一样的，只是使用方式不同而已。
作用：借用别人的方法来调用，就像自己有这个方法一样。
咦，那它们怎样才能达到这目的呢？
对象。
对象？
是的，其实就是改变执行上下文对象的内部指针，因为在Javascript中，代码总有一个执行上下文对象，那么当我手动改变它时，就可以改变这个执行上下文啦，也就可以利用非自己的方法成为自己的方法哦。
我们一起来写个Demo。
假如，我有一个方法a，它的作用是输出对象的名字this.name；那么当我使用call或者apply改变它的执行上下文对象时，它的输出结果是不一样的。
什么意思？
详情请见下代码：
<!DOCTYPE html>
<head>
<title>call&apply</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var name = 'windowName';
//方法a的作用，是输出对象的名字
function a(){
console.log(this.name);
}
function b(){
this.name = 'bName';
}
//将a方法的执行上下文对象指向window
a.call(window);
//将a方法的执行上下文对象指向new b()
a.call(new b());
</script>
</body>
</html>
执行上述代码，结果如下：
看见了么？所以说call，apply的作用就是借用别人的方法，改变别人方法的执行上下文对象为自己，成为自己的方法，为己所用。
注意： call或apply的第一个参数传的是什么，它们就会将其默认为执行上下文对象。倘若我们没有指明call或apply的执行上下文对象，即，call和apply的第一个参数是null、undefined或为空时，在非严格模式下，函数内的this指向window或global，浏览器就是window。严格模式下，null为null，undefined或空为undefined。
什么意思，请见下面的demo(仅以call举例且为非严格模式)：
<!DOCTYPE html>
<head>
<title>call&apply</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function print(){
console.log(this);
};
//将第一个参数数字1，作为执行上下文对象
print.call(0,1,2);
//将第一个参数字符串'123'，作为执行上下文对象
print.call('123');
//将第一个参数true，作为第执行上下文对象
print.call(true);
//将第一个参数对象，作为执行上下文对象
print.call(new Object());
//将null传入
print.call(null);
//将undefined传入
print.call(undefined);
//不传任何参数
print.call();
</script>
</body>
</html>
看见了么，我上面传入的依次是数字，字符串，true，对象，null，undefined和空，得到下面的结果：
那么，call与apply既然作用一样，那它们有什么区别呢？
它们的第一个参数，毋庸置疑，都是传入的执行上下文对象，区别是从第二个参数开始的。call方法的其它参数依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递。
简单点，就是：
fun.call(obj, arg1, arg2…) === fun.apply(obj, [arg1, arg2…]) === obj.fun(arg1, arg2…);
咦，call和apply的区别是，参数的传递不同，有什么用呢？
根据它们传递参数的区别，当参数明确的时候，使用call；当传递的参数不明确时，用 apply咯，即传递arguments给apply作为第二个参数。
好了，光说不做没用，我们写个demo看看。
<!DOCTYPE html>
<head>
<title>call&apply</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function print(name, age, time){
console.log("name: "+ name +" age: "+ age +" time: "+ time );
};
function fn(a, b, c){
//使用call，参数明确
print.call(this,a);
//使用apply，参数明确
print.apply(this,[a, b]);
//使用apply，参数不明确
print.apply(this,arguments);
}
fn('monkey',24,'1992');
</script>
</body>
</html>
执行上述代码，结果如下：
call与apply，这下明白了么？
| 二、bind |
bind，最开始认识它的时候，理解就是改变执行上下文的对象。
比如，当我们使用setTimeout时，默认匿名函数里的this指向的是window，但使用对象的方法时，我想将this指向对象呢，怎么办呢？其中的一个方法就是使用bind。
（关于setTimeout的理解，见“setTimeout那些事儿”）。
如：
<!DOCTYPE html>
<head>
<title>bind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var name = 'window';
var obj = {
name:'monkey',
print: function(){
//在这里使用bind，显示地将this指向obj，所以console.log会输出'monkey'
setTimeout(function(){
console.log(this.name);
}.bind(this),100);
}
};
obj.print();
</script>
</body>
</html>
执行上述代码结果为：
好了，既然谈到bind是改变执行上下文中的对象，我靠，那我们怎么不使用call或apply呢？
call或apply不也是改变执行上下文的对象么？
是的，我们将上面的demo修改下，将bind换成call，代码如下：
<!DOCTYPE html>
<head>
<title>bind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
var name = 'window';
var obj = {
name:'monkey',
print: function(){
setTimeout(function(){
console.log(this.name);
}.call(this)/*在这里将bind换成call*/,100);
}
};
obj.print();
</script>
</body>
</html>
打开chrome调试器，得下结果：
咦，我靠，这不是和bind一样么？
是的，但如果我们将setTimeout的延迟时间，换成2秒，或者更长呢？打开chrome调试器，运行修改后的代码，你就会发现区别，call或apply是立马呈现’monkey’，而bind是在延迟相应时间后，呈现’monkey’。
Why？
因为call或apply是将执行上下文对象换了后，立即执行；而bind是将执行上下文对象换了后，创建一个新函数。
我们再一起写个demo看看。
<!DOCTYPE html>
<head>
<title>bind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function fun(){
console.log(this.name);
}
function obj1(){
this.name = 'call||apply';
}
function obj2(){
this.name = 'bind';
}
var o1 = new obj1();
var o2 = new obj2();
fun.call(o1);
fun.bind(o2);
</script>
</body>
</html>
执行上述代码，结果为：
咦，怎么只打印了一个’call||apply’呢？
因为我们在上面的代码中，bind我只是绑定了对象o2，但是它又不立即执行，而是返回一个新函数哦。
我们修改以上代码，手动执行bind返回后的新函数看看。
<!DOCTYPE html>
<head>
<title>bind</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function fun(){
console.log(this.name);
}
function obj1(){
this.name = 'call||apply';
}
function obj2(){
this.name = 'bind';
}
var o1 = new obj1();
var o2 = new obj2();
fun.call(o1);
//手动调用bind创建的新函数
fun.bind(o2)();
</script>
</body>
</html>
运行代码：
嘿嘿，这下对了吧。
所以，一定要记住bind方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为this，即执行上下文对象。
好了，晚安everyone~
call,apply,bind的更多相关文章
- call,apply,bind的用法
关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- call(),apply(),bind()与回调
1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- javascript-this,call,apply,bind简述1
最近在系统的学习面向对象方面的知识,遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用,单独抽出一天时间把这几个烦人的家伙搞定,去学习更深入的内容. 首先介绍一下this的一 ...
- call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- call, apply,bind 方法解析
call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...
- JS中call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...
随机推荐
- PO,VO,BO,DTO,POJO(POCO),DAO的区别（转载）
PO:persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. BO:business object业 ...
- jQuery中prop() , attr() ,css() 的区别
1. HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...
- VMware创建Linux虚拟机并安装CentOS（一）
在VMware中新建虚拟机,在新建虚拟机向导中,选择“自定义(高级)”选项,鼠标单击“继续”按钮 选择VMware的版本workstation9.0(VMware版本对硬盘.内存.cpu等硬件的支持大 ...
- perl学习之路1
一切要从Hollo world开始 公司要用perl....啊, 不会只能自学了, 毕竟是公司啊, 不是学校...公司不学习就滚蛋了...惨惨惨 因为是学习嘛, 感觉开虚拟机比较麻烦所以直接用了个 瘟 ...
- webform 分页
界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...
- HTML5可视化编辑与微数据
1.HTML 5 全局 contenteditable 属性 contenteditable 属性规定是否可编辑元素的内容. <p contenteditable="true" ...
- strcpy函数在VS2015无法使用的问题
一:原因:一般认为是vs准备弃用strcpy的,安全性较低,所以微软提供了strcpy_s来代替 然而,strcpy_s并没有strcpy好用,我们要想继续在VS2015中使用strcpy该怎么办 呢 ...
- 在Excel中把横行与竖列进行置换、打勾号
在Excel中把横行与竖列进行置换:复制要置换的单元,在新的单元上右键->选择性复制,会出现对话框,选中“置换”,即可在Excel中打勾号,左手按住ALT不放,右手在小键盘也就是右边的数字键盘依 ...
- css伪类制作三角箭头
<meta charset="utf-8"> <style type="text/css"> .tip{ padding: 5px 10 ...
- java基本数据类型
基本数据类型概念 java是一种强类型语言,意味着必须为每一个变量声明一种数据类型. java拥有8中基本数据类型,主要包含如下:4中整形类型(long.int.short.byte)表示整形数值:两 ...