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简单实现图片无缝滚动
Dec 05 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
JavaScript设计模式之装饰者模式实例详解
Jan 17 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/12/29 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php中file_exists函数使用详解
2015/05/08 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python 决策树算法的实现
2020/10/09 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
港湾网络笔试题
2014/04/19 面试题
党员承诺践诺书
2014/05/20 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
给领导的感谢信范文
2015/01/23 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
趣味运动会口号
2015/12/24 职场文书
新员工入职感言范文!
2019/07/04 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript