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+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
关于vue-router路径计算问题
May 10 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue监听input标签的value值方法
Aug 27 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中定义网站根目录的常用方法
2010/08/08 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
移动节点的jquery代码
2014/01/13 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
python每隔N秒运行指定函数的方法
2015/03/16 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python多维数组分位数的求取方式
2020/03/03 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Django如何实现防止XSS攻击
2020/10/13 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
《木笛》教学反思
2014/03/01 职场文书
出纳会计岗位职责
2014/03/12 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python