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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue全局分页组件的实现代码
Aug 10 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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 超链接 抓取实现代码
2009/06/29 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python基础入门之seed()方法的使用
2015/05/15 Python
python基于http下载视频或音频
2018/06/20 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
python无序链表删除重复项的方法
2020/01/17 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
实习销售业务员自我鉴定
2013/09/21 职场文书
临床医学应届生求职信
2013/11/06 职场文书
党支部承诺书范文
2014/03/28 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
个人年终总结怎么写
2015/03/09 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技