实例讲解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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
vue计算属性及使用详解
Apr 02 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
微信小程序文章列表功能完整实例
Jun 03 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 Google的translate API代码
2008/12/10 PHP
php xml实例 留言本
2009/03/20 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php中动态变量用法实例
2015/06/10 PHP
php命令行写shell实例详解
2018/07/19 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
jquery禁用右键示例
2014/04/28 Javascript
对比分析json及XML
2014/11/28 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用tensorflow实现弹性网络回归算法
2018/01/09 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
元旦文艺汇演主持词
2014/03/26 职场文书
平面设计专业求职信
2014/08/09 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
员工教育培训协议书
2014/09/27 职场文书
索赔员岗位职责
2015/02/15 职场文书
自荐信范文
2019/05/20 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL