Javascript调用函数方法的几种方式介绍


Posted in Javascript onMarch 20, 2015

javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了。我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了。

在javascript中,方法可以通过以下几种方式执行:

1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释。

2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中的入参一一对应。

3.func.bind(sth)(),mozilla手册中提到bind是在ECMA-262 5th Edition中新增的一个特性,这里单独列出来作为一种调用方式是因为它弥补了直接调用中不能绑定作用域的缺陷。

4.func.call(),这是第二种调用方式,每个方法的原型中都定义了call方法,用来执行当前方法。

5.func.apply(),call的双胞胎兄弟。

func()

这是最常见的调用方式,在任何语言中随处可见。func(x, y)可以传入不同的参数。在某些语言,例如php,java中,这种调用足以解决一切问题。但是javascript是一门函数式语言,闭包的概念和一个奇怪的关键词this决定了这种调用方式的不足。this应该可以解释为当前代码段的作用域,会随着代码执行到不同的片段而改变,但是某些情况下我们不希望这个this被改变,例如绑定在某些dom上的事件,我们肯定不希望他们被调用的时候this被转移到了window对象上,但有时候确实如此,再比如下面的代码。

var a ={};

var func = function(x) {

    console.log(this);

};

a.onclick = function() {

    var x = 100;

    func(x);

};

a.onclick();

可以把a想象成页面中的一个链接,由于我们只是想将定义好的方法绑定到onclick事件上,而不是立刻调用它,而且这个方法拥有一个参数,所以我们需要用一个匿名方法将他包起来传递给a的onclick事件。这样就有了一个问题,func中的this变成了全局对象window,显然我们并不希望如此。这个时候,使用func()这种直接调用的方式就不行了,于是我们需要将func外的this绑定到func方法上。于是就有了bind,call,apply方法。

bind

bind的目的非常简单,返回一个绑定了this对象的相同方法。上面的代码修改一行就可以实现绑定this在a对象上目的。

var a ={};

var func = function(x) {

    console.log(this);

};

a.onclick = function() {

    var x = 100;

    func.bind(this)(x);  // bind here

};

a.onclick();

这样,onclick事件的this就不会像无头苍蝇一样到处乱跑啦。

call & apply

call和apply要放在一起讲,因为他们实在太像了。他们都支持多参数,而且第一个参数都是即将绑定的this对象,第二个参数则是他们的区别所在,call使用独立的参数作为调用方法的入参,apply使用一个数组作为入参。有的时候我们并不是不想改变this对象,而是想人为的将他绑定到别的对象上,这个时候call和apply是很好用的。(并不是说不能用bind,不过貌似bind出现的比较晚,可能浏览器兼容性不好)。举个栗子:

a = {

    func: function() {

              this.x += 1;

          },

    x: 0

};

b = {

    a: a,

    x: 20

};

for(var i = 0; i < 10; i++){

    b.a.func();

}

console.log(a.x);

console.log(b.x);

上面的a和b对象中都有x,我们希望func能针对性的修改对应的x,但是直接调用只可能修改func作用域中的x,也就是a.x。修改一下代码,就可以实现修改b.x目的

a = {

    func: function() {

              this.x += 1;

          },

    x: 0

};

b = {

    a: a,

    x: 20

};

for(var i = 0; i < 10; i++){

    b.a.func.call(b);  // bind this to b

}

console.log(a.x);

console.log(b.x);

这个栗子举得不好,有点牵强附会,而且这是一种很容易让人迷惑的代码风格,有适用的场景,但不是处处都可用。

Javascript 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
初识Node.js
Mar 20 #Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 #Javascript
JS实现的数组全排列输出算法
Mar 19 #Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 #Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 #Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 #Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 #Javascript
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
安全大检查实施方案
2014/02/22 职场文书
个人存款证明书
2014/10/18 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js