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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 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
PHP仿盗链代码
2012/06/03 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
js类型检查实现代码
2010/10/29 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
JSONP基础知识详解
2017/03/19 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python实现代码审查自动回复消息
2021/02/01 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
初三学习决心书
2014/03/11 职场文书
缅怀革命先烈演讲稿
2014/05/14 职场文书
售房协议书
2014/08/19 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2014年仓库工作总结
2014/11/20 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
校园运动会广播稿
2015/08/19 职场文书
汽车销售合同文本
2019/08/08 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Python 中的 copy()和deepcopy()
2021/11/07 Python