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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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
php的ajax简单实例
2014/02/27 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
跟老齐学Python之网站的结构
2014/10/24 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
面试后的英文感谢信
2014/02/01 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
酒店节能减排方案
2014/05/26 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
应用心理学专业求职信
2014/08/04 职场文书
创先争优活动承诺书
2014/08/30 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
不同意离婚代理词
2015/05/23 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python