javascript中call,apply,bind函数用法示例


Posted in Javascript onDecember 19, 2016

本文实例讲述了javascript中call,apply,bind函数用法。分享给大家供大家参考,具体如下:

一.call函数

a.call(b);

简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b)

call()的用法:用在函数上面

var Dog=function(){
  this.name="汪星人";
  this.shout=function(){
  alert(this.name);
  }
};
var Cat=function(){
  this.name="喵星人";
  this.shout=function(){
  alert(this.name);
  }
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
cat.shout();

如果猫函数中没有shout方法,要达到一样的效果

var Dog=function(){
  this.name="汪星人";
  this.shout=function(){
  alert(this.name);
  }
};
var Cat=function(){
  this.name="喵星人";
};
var dog=new Dog();
var cat=new Cat();
dog.shout();
dog.shout.call(cat);
cat.shout();

call的作用:函数可以复用

二、apply函数

var xh=
{
  name:"小红",
  job:"前端工程师"
};
var xm=
{
  name:"小明",
  job:"js工程师"
};
var xw=
{
  name:"小王",
  job:"html5工程师"
};
function myjob(gender,age,company)
{
  alert(this.name+","+gender+",今年"+age+"岁,在"+company+"担任"+this.job);
}
myjob.call(xh,"女",24,"腾讯");
myjob.call(xm,"男",22,"新浪");
myjob.call(xw,"男",28,"网易");

call函数和apply函数功能一样,区别是第二个参数形式不一样,call传递多个参数,任意形式(传入参数和函数所接受参数一一对应),apply第二个参数必须是数组形式,如a.call(b,2,3); ==>  a.apply(b,[2,3]);

var xh=
{
  name:"小红",
  job:"前端工程师"
};
var xm=
{
  name:"小明",
  job:"js工程师"
};
var xw=
{
  name:"小王",
  job:"html5工程师"
};
function myjob(gender,age,company)
{
  alert(this.name+","+gender+",今年"+age+"岁,在"+company+"担任"+this.job);
}
myjob.apply(xh,["女",24,"腾讯"]);
myjob.apply(xm,["男",22,"新浪"]);
myjob.apply(xw,["男",28,"网易"]);

三、bind函数

call,apply和bind都可以“绑架”this,逼迫其指向其他对象

使用上和call,apply的区别,如

xw.say.call(xh);     //对函数直接调用
xw.say.apply(xh);   //对函数直接调用
xw.say.bind(xh)();   //返回的仍然是一个函数,因此后面需要()来调用

传参时可以像call那样

xw.say.bind(xh,"中央大学","一年级")();

由于bind返回的仍然是一个函数,所以也可以在调用时再进行传参

xw.say.bind(xh)("中央大学","一年级");

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
在vs2010中调试javascript代码方法
Feb 11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
详解vue项目打包步骤
Mar 29 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 #Javascript
15个非常实用的JavaScript代码片段
Dec 18 #Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 #Javascript
简单实现node.js图片上传
Dec 18 #Javascript
Javascript计算二维数组重复值示例代码
Dec 18 #Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 #Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php车辆违章查询数据示例
2016/10/14 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
JS实现音乐导航特效
2020/01/06 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
员工培训邀请函
2014/01/11 职场文书
2014升学宴答谢词
2014/01/26 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
销售顾问工作计划书
2014/09/15 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server