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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现OpenCV的安装与使用示例
2018/03/30 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
python文件编写好后如何实践
2020/07/07 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
教师党员承诺书2015
2015/01/21 职场文书
幽默导游词开场白
2015/05/29 职场文书
创业计划书之书店
2019/09/10 职场文书
python编写函数注意事项总结
2021/03/29 Python
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
spring 项目实现限流方法示例
2022/07/15 Java/Android