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实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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操作XML作为数据库的类
2010/12/19 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP 文件上传限制问题
2019/09/01 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
详解vue组件基础
2018/05/04 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
python连接sql server乱码的解决方法
2013/01/28 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
电气专业推荐信范文
2013/11/18 职场文书
股份合作协议书范本
2014/04/14 职场文书
党员活动总结
2015/02/04 职场文书
教师党员自我评价2015
2015/03/04 职场文书
退休教师追悼词
2015/06/23 职场文书
高中军训感想
2015/08/07 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
java设计模式--七大原则详解
2021/07/21 Java/Android