(Day13) 函式基础与参数介绍

前言

函式在即使非 JavaScript 的程序语言中是非常重要的一块，我们会根据需求在函式中建立一系列动作，需要的时候便接呼叫对应函式，不管需求是执行 Ajax API ，或是隐藏、显示画面中某某区块，都会将这些需求写在函式中。

呼叫函式

呼叫函式的方法，使用函式名称搭配小刮号 ()

function Fn1(){
	console.log('一般函式')
}
Fn1()

也可以在小刮号中写入参数，参数会带到函式中，而函式的参数只跟在函式中建立的变数一样，他的作用域只存在於函式中。

function Fn1(num){
	console.log(num) //1
}
Fn1(1)
console.log(num) //num 

实做中常常看到在函式 return 某个值，而其实 return 的值会直接回传在呼叫函式的方法中，这种方法常用在会要执行某些重复动作的需求上。

function Fn1(num){
	var sum = num + 10
	return sum 
}

console.log(Fn1(1) , Fn1(2)) //11, 12

arguments

上面有介绍到函式带参数功能，关於参数也有一个特别的功能，就是 arguments 。

arguments 这个语法在函式建立时，他也会被一同建立，即使我们不需告变数、参数他也会存在於函式中，而 arguments 其实就是我们呼叫函式时，所有参数组和而成的 类阵列。

function Fn1(){
	console.log(arguments) //Arguments(3) [1, 2, 3, .... ]
}
Fn1(1,2,3)

什麽是类阵列呢？简单来讲就是一个类似阵列但不是阵列的东西，但是类阵列与阵列最大差异在於可以使用的方法 or 功能会有很大差异，因此我们来看一下范例：

var a = ['1', '2', '3'];
console.dir(a);

点开变数 a 中的 [[Prototype]] 底下都会是阵列中的方法（太长因此不全部截图）：

而 arguments 中的 [[Prototype]] 就只有：

可以看的出来类阵列和原始阵列中的方法相差十分多。

参数作用域

当我们参数名称和函式外层变数相同时，看看花生神魔术

var name ='Ryder'
function Fn1(name){
	console.log(name) // Jack
}
Fn1('Jack')

结果会是以传入参数为准。
那麽看看对参数使用 = 运算子赋予一个新的值看看结果如何：

function Fn1(name){
	name = 'Annie'
	console.log(name) // Annie
}
Fn1('Jack')

结果会发现参数的值确实可以更改，其实参数跟函式中变数的范围练特性是差不多的，当内层有该参数时，就会优先指向内层参数。

ES6 预设参数

在 ES6 语法中有新增一个预设参数方法，只需在参数旁边使用 = 运算子赋值，之後呼叫函式时，若没带上参数，到了函式中参数便会套上预设的值，但如果呼叫函式时，有带上参数，便还是以带上的参数为主，是一个十分方变的功能:

function Fn1(name = 'Annie'){
	return name
}
console.log(Fn1()) //Annie
console.log(Fn1('Jack')) //Jack

参数与物件传参考

先前也有介绍到物件传参考这个特性，当我们物件传入参数时，他也会是传参考， :

var obj1 = { name:'Ryder' }
function Fn1(item){
	item.name = 'Annie'
	console.log(item.name, obj1.name) // Annie , Annie
}
Fn1(obj1 )

范例中两个物件的 name 属性的值也都会改成 'Annie' 。
不过当我们只是传入物件中的属性时，结果并非是传参考，而仅仅是传值

var obj1 = { name:'Ryder' }
function Fn1(item){
	item = 'Annie'
	console.log(item, obj1.name) // Annie , Ryder
}
Fn1(obj1.name)

因此有使用 ES Lint 时，如果有试者修改参数的值，他都会跳出请不要直接修改参数的相关警告，这点就是避免物件传参考特性发生错误。

函式分类

最後来说说函式的分类，在先前 陈述式 /表达式 中有根据建立方法不同，将函式分成：

• 函示陈述式(具名函式)
• 函式表达式(匿名函式)

但这其实是根据这段语法是表达式、陈述式来做区分，或者说函式有没有名字来做分类的，在 ES6 新增箭头函式後，一般会把函式分成三种：

• 一般传统函式（又可分为 具名函式、匿名函式）

function Fn1(){
	console.log('传统具名')
}
Fn1() 

var Fn2 = function(){
	console.log('传统匿名')
}
Fn2()

• 立即函式（IIFE），一般都是以 匿名函式 写成，虽然也可写成具名函式，不过这种写法很少看到：

(function(){
	console.log('立即函式')
})() 

• ES6 新增的箭头函式，箭头函式一律都是匿名函式，设计上就无法使用具名函式写成：

var Fn3 = ()=> {
	console.log('箭头函式')
}
Fn3()

参考文献

• JavaScript 核心篇 (六角学院）