JavaScript中具名函数的多种调用方式总结_javascript技巧-js教程-PHP中文网

JavaScript中具名函数的多种调用方式总结_javascript技巧

php中文网

发布： 2016-05-16 16:32:07

原创

1974人浏览过

前面有一篇提到了匿名函数的多种调用方式。这篇看看具名函数的多种调用方式。

1、()

平时最常用的就是()运算符来调用/执行一个函数:

复制代码代码如下:

// 无参函数fun1

function fun1() {

    alert('我被调用了');

}

fun1();

// 有参函数fun2

function fun2(param) {

    alert(param);

}

fun2('我被调用了');

ECMAScript3后加入给Function加入了call和apply后，就有了下面两种。

2、call

立即学习“Java免费学习笔记（深入）”；

复制代码代码如下:

// 无参函数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可以纯粹的用来调用/执行函数，但它们更多是用来改变函数执行的上下文。

AI大学堂

科大讯飞打造的AI学习平台

179

查看详情

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的原型与原型链？什么是javascript Tree Shaking_它如何减少代码体积？ javascript中的generator函数如何工作_与async函数有何关联 javascript的3D建模怎么做_如何用Three.js创建场景