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实现多域名不同文件的调用方法
Jan 12 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
vuejs指令详解
Feb 07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python实现点对点聊天程序
2018/07/28 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
入团者的自我评价分享
2013/12/02 职场文书
承办会议欢迎词
2014/01/17 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js