学JS的心路历程-函式(二)arguments

参数(argument)与函式参数(parameter)

在讨论函式时,很多人都会把这两个搞混,我自己也不例外。

虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么!

参数是当我们呼叫函式时传递给它的值

参数是我们在函式定义中所列出的变量
看完还是有点不懂?没关系,上图!


声明式(declaration)与表达式(expression)

发现在前几天介绍声明函式时没有特别说明两者名称的差异,虽然这跟上面的参数与参数一样说错别人也懂(yjssqsdg),但我们还是要分清楚喔!

声明式:

function funA(){

}

表达式:

var myFun = function(){

}

隐含参数

在呼叫函式时候除了传递自己给的参数外,你知道还会传递两个隐含参数:arguments和this吗?

什么事「隐含」,就是这些参数没有明确列在函式署名(function signature)中,只会默默传递给函式,并且可以在函式内存取他们,也可以在函式中被引用。

我们今天只会先介绍arguments,this会在之后的篇幅中提到。

arguments

是传递给函式的所有参数之集合,不用管相对应的参数是否有明确定义。这也让我们可以实现JS本身不支持的函式重载(function overloading)及可变参数数量的可变函式(variadic function)。

讲到这边可能会有人困惑说什么是函式重载?所谓函式重载就是函式的名称都一样,但是会根据不同的输入拥有不同的输出。

看不太懂也没关系,在我们讲完arguments后会提到怎么实作。

我们先来看一个简单的例子:

function show(a,b,c){

console.log(a,b,c);

console.log(arguments);

console.log(arguments[0]);

console.log(arguments.length);

console.log(typeof arguments);

}

show(1,2,3);

可以看到arguments储存了所有传递参数的值。而且还可以用lenght属性,但这边要注意到,它并不是一个数组,是一个叫做类数组的东西,也就是说无法使用JS提供给array的函式库。

function show(a,b,c){

arguments.sort(function(a,b){

return a - b;

});

}

show(1,2,3);//Uncaught TypeError: arguments.sort is not a function

这边要注意到一点,如果我们修改了arguments的值,原本的参数也会被修改:

function modifyArg(a,b,c){

console.log(a,b,c);//1 2 3

arguments[0] *= 20;

console.log(a,b,c);//20 2 3

}

modifyArg(1,2,3);

在前面有提到过说可以利用arguments作可变函式:

function dynamicArg(){

console.log(arguments);

}

dynamicArg(1,2,3);//Arguments(3)[1,2,3,callee:ƒ,Symbol(Symbol.iterator):ƒ]

再来,我们来看一下到底怎么作函式重载呢:

function mutli(){

let argLength = arguments.length;

if(argLength ===1){

console.log(argLength[0])

}else if(argLength ===2){

console.log(argLength[0],argLength[1])

}

}

这是最简单的函式重载,虽然可以运作但实在看了头有点痛。

我们今天来假设一个情境,我们想要有一个函式可以对人名进行搜索,根据不同的参数长度回传搜寻的值,这时候我会就会需要一个object物件:

var people = {

name:[“Dean Edwards”,“Alex Russell”,“Dean Tom”,“Alex Tsai”,“Tom Cruise”,“Tom Ford”]

}

我们想要能find('Dean')时回传[“Dean Edwards”,“Dean Tom”];

find()时回传所有人;find('Tom Cruise')时回传[“Tom Cruise”]。

于是我们需要一个函式:

var people = {

name:[“Dean Edwards”,“Alex Russell”,“Dean Tom”,“Alex Tsai”,“Tom Cruise”,“Tom Ford”]

}

function addMethod(obj,key,fn){

var old = obj[key];

obj[key] = function(){

if(fn.length === arguments.length){

return fn(arguments);

} else if(typeof old ===“function”){

return old(arguments);

}

}

}

接着,我们就可以写搜索人名的函式了:

//没有参数传入,回传所有人

function findAll(){

return people.name;

}

//传入一个参数时,回传firstName相同的人名数组

function findFirstName(firstName){

var ret = [];

for(var i = 0;i < people.name.length;i++){

if(people.name[i].indexOf(firstName)!== -1){

ret.push(people.name[i]);

}

}

return ret;

}

//传入两个参数时,回传firstName和lastName都相同的人名数组

function findFullName(firstName,lastName){

var ret = [];

for(var i = 0;i < people.name.length;i++){

if(people.name[i] ===(firstName +“”+ lastName)){

ret.push(people.name[i]);

}

}

return ret;

}

写完之后,将他们经由addMethod()传入people物件里面:

addMethod(people,“find”,findAll);

addMethod(people,“find”,findFirstName);

addMethod(people,“find”,findFullName);

之后就可以用了:

console.log(people.find());//[“Dean Edwards”,“Alex Russell”,“Dean Tom”,“Alex Tsai”,“Tom Cruise”,“Tom Ford”]

console.log(people.find(“Tom”));//[“Tom Cruise”,“Tom Ford”]

console.log(people.find(“Dean Edwards”));//[“Dean Edwards”]

或许有人会很困惑,为什么我们可以这样用,让我们来逐一分析这个addMethod函式:

function addMethod(obj,key,fn){

var old = obj[key];

obj[key] = function(){

if(fn.length === arguments.length){

return fn(arguments);

} else if(typeof old ===“function”){

return old(arguments);

}

}

}

可以看到我们每次呼叫时,都会先储存原先的people.find到变量old,这时候就会造成闭包的现象(LeLeyuesao),这我们后面篇幅会提到,简单的说,我们可以藉由people.find不断往上找,直到找不到为止。

所以当我们呼叫people.find(“Tom”)时,会执行:

if(fn.length === arguments.length){

return fn(arguments);

}

else if(typeof old ===“function”){

return old(arguments);

}

这时候的fn是findFullName但由于传入参数长度跟findFullName长度不相等,所以会执行:

else if(typeof old ===“function”){

return old(arguments);

}

这时候的old等于people.find(“Tom”),但是里面包附的fn已经换成,

findFirstName由于传入参数长度跟findFirstName长度相等,便会直接执行,不会在往上找。

或许会有人认为,我为了写一个函式重载,还得写这么多复杂的函式,不如需要时在呼叫就好了啊!

但是函式重载的好处在于,只需要苦过一次,后面就可以用短短的一行函式就得到想要的结果了!

参考资料:

忍者JavaScript开发技巧探秘

JavaScript中的函数重载(Function overloading)

猜你喜欢

转载自www.cnblogs.com/lannyQ-Q/p/9927502.html