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检测客户端不是firefox则提示下载
Apr 07 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
angular4自定义组件详解
Sep 28 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
vue实现简单计算商品价格
Sep 14 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
使用php4加速网络传输
2006/10/09 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
vue filters的使用详解
2018/06/11 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python自动生产表情包
2017/03/17 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
详解python配置虚拟环境
2019/04/08 Python
django数据库自动重连的方法实例
2019/07/21 Python
python使用smtplib模块发送邮件
2020/12/17 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
广告设计应届生求职信
2014/03/01 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2019年个人工作总结范文
2019/03/25 职场文书