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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
js类的静态属性和实例属性的理解
Oct 01 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jQuery ajax应用总结
Jun 02 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
JS实现手风琴特效
Nov 08 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生成自己的LOG文件
2006/10/09 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python微信公众号开发平台
2018/01/25 Python
Python3标准库总结
2019/02/19 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
员工考核管理制度
2014/02/02 职场文书
美容院经理岗位职责
2014/04/03 职场文书