JavaScript中具名函数的多种调用方式总结


Posted in Javascript onNovember 08, 2014

前面有一篇提到了 匿名函数的多种调用方式。这篇看看具名函数的多种调用方式。

1、() 

平时最常用的就是()运算符来调用/执行一个函数:

// 无参函数fun1

function fun1() {

    alert('我被调用了');

}

fun1();

 

// 有参函数fun2

function fun2(param) {

    alert(param);

}

fun2('我被调用了');

ECMAScript3后加入给Function加入了call和apply后,就有了下面两种。

2、call

// 无参函数fun1

function fun1() {

    alert('我被调用了');

}

fun1.call(null);

 

// 有参函数fun2

function fun2(param) {

    alert(param);

}

fun2.call(null,'我被调用了')

3、apply

// 无参函数fun1

function fun1() {

    alert('我被调用了');

}

fun1.apply(null);

 

// 有参函数fun2

function fun2(param) {

    alert(param);

}

fun2.apply(null,['我被调用了'])

虽然call,apply可以纯粹的用来调用/执行函数,但它们更多是用来改变函数执行的上下文。

4、new (不推荐使用这种方式哦 )

// 无参函数fun1

function fun1() {

    alert('我被调用了');

}

new fun1();

 

// 有参函数fun2

function fun2(param) {

    alert(param);

}

new fun2('我被调用了')

new的本质是用来创建/构造一个类的实例,这里定义的fun1,fun2明显不是一个类(没有this,没有prototype)。但两个函数确实执行了。这是new的副作用。

从以上调用方式上看四种方式执行结果没有区别。但如果函数有返回值的话,用new方式调用时可能会让你有些失望。

// 有返回值的函数fun

function fun() {

    alert('我被调用了');

    return "jack";

}

var c = new fun();

alert(c);//[object Object],为什么不是"jack"?

改成这样

// 有返回值的函数fun

function fun() {

    alert('我被调用了');

    return {name:'jack'};

}

var c = new fun();

alert(c.name); //jack,又正常返回了

总结下:用new方式调用函数时。如果存在返回值,当返回值是JavaScript的内置类型(基本类型)如字符串(String),数字(Number),布尔(Boolean)等时,将不会返回该值;当返回值是对象,函数,数组等对象类型时,将直接返回该对象,函数,数组。

当返回值是内置类型(基本类型)时,new fun()到底返回什么呢?下一篇将讨论new方式调用的细节。

Javascript 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
js编写三级联动简单案例
Dec 21 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 #Javascript
JavaScript中判断整数的多种方法总结
Nov 08 #Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 #Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 #Javascript
JavaScript函数模式详解
Nov 07 #Javascript
JavaScript代码复用模式详解
Nov 07 #Javascript
JavaScript中的style.cssText使用教程
Nov 06 #Javascript
You might like
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
jquery 插件开发方法小结
2009/10/23 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
node使用request请求的方法
2019/12/20 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python检查ping终端的方法
2019/01/26 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
ipad上运行python的方法步骤
2019/10/12 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
社会调查研究计划书
2014/05/01 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
入党自传范文2015
2015/06/26 职场文书
KTV员工管理制度
2015/08/06 职场文书
感谢师恩主题班会
2015/08/17 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python