实例讲解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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
原生JS实现留言板
Mar 26 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
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在线生成ico文件的代码
2007/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
javascript中的面向对象
2017/03/30 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
教师工作总结范文2014
2014/11/10 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
Python软件包安装的三种常见方法
2022/07/07 Python