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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
Node.js的特点详解
2017/02/03 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
Python入门篇之对象类型
2014/10/17 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python自动12306抢票软件实现代码
2018/02/24 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
利用python实现AR教程
2019/11/20 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
C++是不是类型安全的
2014/02/18 面试题
四群教育工作实施方案
2014/03/26 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang