javascript 具名函数的四种调用方式推荐

时间:2020-05-12 人气:0

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,['我被调用了'])

4、new （不推荐使用这种方式哦）

复制代码代码如下:

//无参函数fun1
function fun1() {
alert('我被调用了');
}
new fun1();

//有参函数fun2
function fun2(param) {
alert(param);
}
new fun2('我被调用了')

ok,从以上调用方式上看四种方式执行结果没有区别。但如果函数有返回值的话，用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方式调用的细节。

以函数中有无this来讨论。没有this时返回一个空的对象{},有this时返回一个非空对象。
定义一个没有this的函数

复制代码代码如下:

//返回值是基本类型
function fun() {
return "jack";
}

var c = new fun();
for (var atr in c) {
alert(atr);
}
alert(c);//[object Object]

返回值c不是"jack", 从for in执行后没有输出任何属性可以看出 c 是一个空的对象{}。

再看看有this的函数，函数中有this实际上是在写一个类。但由于js的灵活性，造成了许多诡异的写法。

复制代码代码如下:

//返回值是基本类型
function fun() {
this.name = "tom";
return "jack";
}

var c = new fun();
for (var atr in c) {
alert(atr);//name
}
alert(c.name);//tom

返回值也不是"jack"，for in输出了name属性，最后一句输出了tom，说明返回值 c 是一个非空对象。这里的return "jack"压根没起作用。所以当函数返回值是内置类型（基本类型）时，用new方式调用函数将会导致错误的结果。

那么当函数返回值是一个对象，数组，函数呢？

复制代码代码如下:

//不含this，返回值是一个对象
function fun() {
//组装一个对象
var obj = {};
obj.name = 'andy';
obj.age = 20;
obj.msg = function(){}

return obj;
}

var c = new fun();
for (var atr in c) {
alert(atr);//name,age,msg
}
alert(c.name);//andy

复制代码代码如下:

//含this，返回值是一个对象
function fun() {
this.sex = "man";
//组装一个对象
var obj = {};
obj.name = 'andy';
obj.age = 20;
obj.msg = function(){}

return obj;
}

var c = new fun();
for (var atr in c) {
alert(atr);//name,age,msg
}
alert(c.name);//andy

两段的输出结果是一样的，c都含有name,age,msg属性而不含sex属性。说明当返回值是对象类型（对象，数组，函数）时，new不会用this去构造对象，而直接返回组装的对象。

这种方式实际上是工厂方式，在应用中更多的程序员把函数名首字母大写，让它看起来更像一个类。

这里把函数名首字母大写了，让它符合java类命名规范。

复制代码代码如下:

/**
* 定义一个函数Car
*/
function Car(color,doors) {

var car = {};
car.color = color;
car.doors = doors;
car.msg = function(){
alert("This is a " + this.color + " car, there are " + this.doors + " doors." );
}

return car;
}

看起来怪怪的，Car明明是一个类啊，怎么也不像之前的函数调用。和文章标题似乎有些不一致了。但我们的确可以用()来调用它。当然也可以用new来调用它。用new方式则让它更像java的创建对象方式。

复制代码代码如下:

//方式1
var c1 = Car('red',2);
c1.msg();

//方式2
var c2 = new Car('black',4);
c2.msg();

嗯。这种方式在一些js库中也能见到，如mootools.js中的一个很重要的函数Native，返回值是一个函数(类)。mootools core中的Class类就是Native函数返回的。var Class = new Native({..});当然也可以不用new而直接采用()调用。

加载全部内容

javascript 具名函数的四种调用方式 推荐

javascript 具名函数的四种调用方式推荐