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 相关文章推荐
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
JavaScript实现京东快递单号查询
Nov 30 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下载文件的代码示例
2012/06/29 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
药物学专业学生的自我评价
2013/10/27 职场文书
车间组长岗位职责
2013/12/20 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
个人务虚会发言材料
2014/10/20 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书