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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
js实现购物车功能
Jun 12 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
详解jQuery中的easyui
Sep 02 jQuery
简单通过settimeout看javascript的运行机制
May 10 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
详解JS数组方法
Nov 20 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
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python操作链表的示例代码
2020/09/27 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
关于打架的检讨书
2014/01/17 职场文书
公路绿化方案
2014/05/12 职场文书
颐和园的导游词
2015/01/30 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
Python图像处理库PIL详细使用说明
2022/04/06 Python
vue实现登陆页面开发实践
2022/05/30 Vue.js