全栈之路-前端javascript基础知识4

Posted 2021-12-17 涂宗勋

1、ES6新增了胖箭头函数，所谓的胖箭头，就是=>，任何使用原始函数表达式的地方都可以使用胖箭头函数，例如下边的写法是可以互相替换的：

let test1=function()
	console.log("函数表达式");

test1();

let test2=()=>
	console.log("箭头函数");

test2();

上边代码输出结果如下：

函数表达式
箭头函数

这种箭头函数可以一定程度简化代码，尤其在需要嵌入函数的场景下更加好用，这种写法和java8的lambda表达式写法几乎一样，例如只有一行逻辑时可以省略大括号，只有一个参数时可以省略小括号等。

2、js中函数名可以理解为是一个引用指针，同一个函数可以有多个函数名，例如：

let test3=()=>
	console.log(new Date());

let test4=test3;
console.log("#######");
test3();
test4();
console.log("#######");
sum=null;
test3();
test4();
console.log("#######");
let test5=test3();
test5();

上述代码输出结果如下：

#######
Sun Nov 21 2021 22:40:48 GMT+0800 (中国标准时间)
Sun Nov 21 2021 22:40:48 GMT+0800 (中国标准时间)
#######
Sun Nov 21 2021 22:40:48 GMT+0800 (中国标准时间)
Sun Nov 21 2021 22:40:48 GMT+0800 (中国标准时间)
#######
tSun Nov 21 2021 22:40:48 GMT+0800 (中国标准时间)

这里其实test3、test4都指向了同一个函数，函数在使用的时候，加了小括号代表调用，不加小括号代表引用。

3、js中的函数没有重载的说法，同名函数只会是后定义的覆盖先定义的，例如：

function test6(name,age)
	console.log("first:"+name+":"+age);


function test6(name)
	console.log("second:"+name);


test6("tzx",31);
test6("tzx");

上述代码输出结果如下：

second:tzx
second:tzx

按照类似java的这种想法，希望的第一个调用应该是两个参数的方法，但其实都是调用的后边一个。
这里就有一个js中函数定义时参数定义问题，在js中实际不是一定要定义参数的，不管是否定义，实际都会以数组的方式获取到，通常写了只是更加直观方便，不管写不写，都可以使用arguments获取到，例如：

function test7(name)
	console.log("three:"+arguments[0]+":"+arguments[1]);

test7("tzx",31);

function test8()
	console.log("four:");
	for(let i=0;i<arguments.length;i++)
		console.log(arguments[i]);
	

test8("tzx",31,"java");

上边代码输出结果如下：

three:tzx:31
four:
tzx
31
java

4、函数声明和函数表达式是有区别的，函数声明会在执行任何函数代码之前被读取，而函数表达式则不会。例如：

test9();
function test9()
	console.log("这是函数声明");


test10();
let test10=function ()
	console.log("这是函数表达式");

上述代码执行结果如下：

这是函数声明
Uncaught ReferenceError: Cannot access 'test10' before initialization
    at test3.html:67

可以看到在函数声明之前调用函数，是可以正常执行的，而在函数表达式之前调用函数则抛出异常。