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 具名函数的四种调用方式 推荐】的全部内容了,欢迎留言评论进行交流!

赞(0) 踩(0)
发表我的评论

最新评论

  1. 暂无评论