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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
基于javascript实现放大镜特效
Dec 03 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php下将XML转换为数组
2010/01/01 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
javascript 数组排序函数
2009/08/20 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Mac下安装vue
2018/04/11 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python web框架 django wsgi原理解析
2019/08/20 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
初三化学教学反思
2014/01/23 职场文书
面试后的感谢信范文
2014/02/01 职场文书
迎元旦广播稿
2014/02/22 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
企业党员公开承诺书
2014/03/26 职场文书
应届毕业生自荐信
2014/05/28 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB