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中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
JS实现留言板功能
Jun 17 Javascript
vue中的scope使用详解
Oct 29 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
Python中的引用和拷贝实例解析
2019/11/14 Python
基于opencv实现简单画板功能
2020/08/02 Python
python中xlrd模块的使用详解
2021/02/01 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
2014年安全生产大检查方案
2014/05/13 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
保护环境的宣传语
2015/07/13 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android