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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery UI 1.72 之datepicker
Dec 29 Javascript
jQuery filter函数使用方法
May 19 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
Feb 16 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
基于php split()函数的用法详解
2013/06/05 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
师范大学生求职信
2014/06/13 职场文书
元旦趣味活动方案
2014/08/22 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
团员年度个人总结
2015/02/26 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis