实例讲解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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
chrome下img加载对height()的影响示例探讨
May 26 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
Javascript Dom元素获取和添加详解
Sep 24 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
如何将数据从文本导入到mysql
2006/10/09 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python中id函数运行方式
2020/07/03 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
手机银行营销方案
2014/03/14 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
学习退步检讨书
2014/09/28 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python