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 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
AngularJS指令用法详解
Nov 02 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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 开发工具
2006/12/06 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题