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匿名函数的问题分析
Mar 30 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JS实现密码框效果
Sep 10 Javascript
js实现星星海特效的示例
Sep 28 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人民币金额数字转中文大写的函数代码
2013/02/27 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python 字典中取值的两种方法小结
2018/08/02 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
详解python with 上下文管理器
2020/09/02 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
ORACLE十问
2015/04/20 面试题
营业经理岗位职责
2013/11/10 职场文书
护士在校生自荐信
2014/02/01 职场文书
读书之星事迹材料
2014/05/12 职场文书
企业标语口号
2014/06/10 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
素质教育培训心得体会
2016/01/19 职场文书