实例讲解JavaScript中call、apply、bind方法的异同


Posted in Javascript onSeptember 13, 2016

以实例切入,讲解JavaScript中call,apply,bind方法,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
  function MAN(name, sex, age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
  this.say = function(school,zhuanye) {
   console.log(this.name + " , " + this.sex + " ,今年" + this.age+"岁!在"+school+"学习"+zhuanye);
  }
  }
  function WOMAN(name, sex, age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
  }
  var man=new MAN("张三","男",26);
  var woman=new WOMAN("小红","女",18);
  man.say('清华大学','挖掘机');
  man.say.call(woman,"蓝翔技校","电气焊");
  man.say.apply(woman,["新东方","火星语"]);
  man.say.bind(woman)("德云社","流行音乐");
 </script>
 </head>

 <body>
 </body>

</html>

实例讲解JavaScript中call、apply、bind方法的异同

why?call,apply,bind干什么的?为什么要学这个?

一般用来指定this的环境,在没有学之前,通常会有这些问题。 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b(); //undefined

我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的。 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
a.fn(); //追梦子

这里能够打印是因为,这里的this指向的是函数a,那为什么上面的不指向a?我们如果需要了解this的指向问题,请看彻底理解js中this的指向,不必硬背这篇文章。 

虽然这种方法可以达到我们的目的,但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过以下方法。 

1、call()

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.call(a);

通过在call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数,如下: 

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //3
  }
}
var b = a.fn;
b.call(a,1,2);

2、apply() 

apply方法和call方法有些相似,它也可以改变this的指向 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下: 

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //11
  }
}
var b = a.fn;
b.apply(a,[10,1]);

或者 

var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //520
  }
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);


//注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
 
var a = {
  user:"追梦子",
  fn:function(){
    console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
  }
}
var b = a.fn;
b.apply(null);

3、bind() 

bind方法和call、apply方法有些不同,但是不管怎么说它们都可以用来改变this的指向。 

先来说说它们的不同吧。 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b.bind(a);

我们发现代码没有被打印,对,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

那么我们现在执行一下函数c看看,能不能打印出对象a里面的user 

var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
var c = b.bind(a);
c();

ok,同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。 

var a = {
  user:"追梦子",
  fn:function(e,d,f){
    console.log(this.user); //追梦子
    console.log(e,d,f); //10 1 2
  }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 #Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 #Javascript
浅谈JS的基础类型与引用类型
Sep 13 #Javascript
JavaScript简单下拉菜单特效
Sep 13 #Javascript
javascript特殊文本输入框网页特效
Sep 13 #Javascript
浅谈JS之iframe中的窗口
Sep 13 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php数组键名技巧小结
2015/02/17 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python实现自动登录
2018/09/17 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Python urllib.request对象案例解析
2020/05/11 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
老公保证书怎么写
2015/02/26 职场文书
退货证明模板
2015/06/23 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技