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图表动画插件Highcharts Examples
Apr 16 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
vue下载excel的实现代码后台用post方法
May 10 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
微信小程序前端promise封装代码实例
Aug 24 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
浅谈php优化需要注意的地方
2014/11/27 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
JS中的phototype详解
2017/02/04 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
bootstrap table使用入门基本用法
2017/05/24 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
tornado 多进程模式解析
2018/01/15 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python的历史与优缺点整理
2020/05/26 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
个人承诺书
2014/03/26 职场文书
2014年党务公开方案
2014/05/08 职场文书
公开承诺书格式
2014/05/21 职场文书
2014年护士长工作总结
2014/11/11 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python