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 相关文章推荐
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
js中实现继承的五种方法
Jan 25 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php+mysql实现无限级分类
2015/11/11 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python实现控制台进度条功能
2016/01/04 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python实现KNN邻近算法
2021/01/28 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python yield的用法实例分析
2020/03/06 Python
python如何写try语句
2020/07/14 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
幼儿园家长评语
2014/02/10 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
学生会部长竞聘书
2014/03/31 职场文书
合同意向书范本
2014/07/30 职场文书
暑假安全保证书
2015/02/28 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
教师师德承诺书2016
2016/03/25 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Python数组变形的几种实现方法
2022/05/30 Python