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 document.images实例
May 27 Javascript
JavaScript 创建对象
Jul 17 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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技术构造远程服务(上)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP实现验证码校验功能
2017/11/16 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
python常见数制转换实例分析
2015/05/09 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Keras设置以及获取权重的实现
2020/06/19 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
应聘自荐书
2013/10/08 职场文书
合同专员岗位职责
2013/12/18 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
党支部对照检查材料
2014/08/25 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
浅谈MySQL函数
2021/10/05 MySQL