ES6（函数）

ES6中的函数

1.函数

函数：实现某种功能的程序模块。

function 函数名([参数]){
	函数体语句;
}

（1）参数

1. 形参：形式参数，是一个占位符，在函数定义时没有数据。
2. 实参：实在参数，在函数调用时使用，表示的是实际的数据。

2.函数参数的默认值

function 函数名(参数1=默认值，参数2=默认值){}

//ES5中定义函数的默认参数

function fun(name,age){    //name、age、cb是形参

    name = undefined?"张三":name;
    age = undefined?20:age;

    console.log(`${name},${age}`);
}

fun();

fun('李四',30);


//ES6中的写法

function fun1(name="张三",age="30"){
    console.log(`${name},${age}`);
}

fun1()

fun1("刘备",36)

3.函数的不定参数

function 函数名(参数1，参数2，...rest){}

//ES5中

function fun(){
    console.log(arguments);
    console.log(arguments.length);
    console.log(arguments[0]);
    console.log(...arguments);
    console.log([...arguments]);
}

fun(123,"张三","雁塔区");

输出结果如下：

//ES6中

function fun1(...rest){
    console.log(rest);    //输出结果为：[ 123, '张三', '雁塔区' ]
}

fun1(123,"张三","雁塔区")

function fun1(a,b,...rest){

    console.log(a);    //输出结果为：123
    console.log(b);    //输出结果为：张三
    console.log(rest);    //输出结果为：[ '雁塔区', 456, 789 ]
}

fun1(123,"张三","雁塔区",456,789);

注意：’…rest’必须放在形参列表的最后

4.箭头函数：

箭头函数：箭头函数语法最大的特点石油’=>'符号，它也有很多变形写法。

let/const/var 变量名 = ([参数]) =>{ 函数体语句 }

1. 若只有一个参数，则’()'可以省略
2. 若函数体只有一条语句，则’{}'可以省略，且默认带有return功能。
3. 没有隐形参数arguments
4. 在返回对象时，需要使用"()"将对象括起来
5. 没有this指针的绑定

（1）没有参数，用括号代替

let fun = () => "张三";

console.log(fun());    //输出结果为:张三

（2）一个参数，括号可以省略

let fun = arg => ++arg;

console.log(fun(3));

（3）多个参数

let fun = (arg1,arg2) => arg1+arg2;

console.log(fun(1,2));

（4）利用箭头语句里隐式返还的时候需要注意对象的情况，可能会出现以下的错误：

let fun = () =>{
	name:'张三',
	age:20
}

这个代码初步感觉是返还一个对象，但是这里的大括号和函数内的大括号会有冲突，导致报错。

正确书写格式如下：

let fun = () => ({
    name:"张三",
    age:20
})

console.log(fun());    //输出结果为：{ name: '张三', age: 20 }

（5）箭头函数里没有this绑定，如下代码，this指向对象本身

let obj = {
    id:2,
    fun:function(){
        console.log(this.id);
    }
}

obj.fun();    //输出结果为2

上面代码可以打印出id为2，this指向了obj，所以this.id可以取得obj.id。如果改成箭头语法会发现，函数中this指向改变了，代码如下：

let obj = {
    id:2,
    fun:() => {
        console.log(this.id);
    }
}

obj.fun();    //输出结果为undefined

这里发现this.id获取不到值，原因是箭头函数没有this绑定，箭头函数中的this会指向最近的上层this，所以这里的this指向是window，所以最终取不到this.id。

var id = 12;

let obj = {
    id:2,
    fun:() => {
        console.log(this.id);
    }
}

obj.fun();

用谷歌浏览器打印显示结果如下：