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做的一个简单的点灯游戏分享
Jul 16 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
javascript常用的方法分享
Jul 01 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
js仿京东放大镜效果
Aug 09 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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生成唯一的订单函数分享
2015/02/02 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
Python内置函数OCT详解
2016/11/09 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python实现移位加密和解密
2019/03/22 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
Python实现自动访问网页的例子
2020/02/21 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
一些.net面试题
2014/10/06 面试题
化工工艺专业求职信
2013/09/22 职场文书
卫生安全检查制度
2014/02/04 职场文书
小学运动会报道稿
2014/10/04 职场文书
2015年销售助理工作总结
2015/05/11 职场文书