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 相关文章推荐
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 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实现分页工具类分享
2014/01/09 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
网页常用特效代码整理
2006/06/23 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Puppet的一些技巧
2018/09/17 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python中模块查找的原理与方法详解
2017/08/11 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
深入浅析python的第三方库pandas
2020/02/13 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
python exit出错原因整理
2020/08/31 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
鲜果饮品店创业计划书
2014/01/21 职场文书
30岁生日感言
2014/01/25 职场文书
党风廉政承诺书
2014/03/27 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers