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分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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
2009/06/29 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP代码加密的方法总结
2020/03/13 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
解析js如何获取css样式
2016/12/11 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Pytorch的mean和std调查实例
2020/01/02 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
给领导的检讨书
2014/02/16 职场文书
死亡赔偿协议书
2015/01/28 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL