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 相关文章推荐
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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 的几个配置文件函数
2006/12/21 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
用js遍历 table的脚本
2008/07/23 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
露营世界:Camping World
2017/02/02 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
升学宴主持词
2014/04/02 职场文书
活动总结格式范文
2014/04/26 职场文书
表彰大会策划方案
2014/05/13 职场文书
2014年质量工作总结
2014/11/22 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
实施意见格式范本
2015/06/05 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书