【JavaScript】ES6 函数

@H_404_4@

ES5 函数基础

@H_404_4@

ES5 函数进阶

@H_404_4@

参数的默认值

ES5：使用短路算法

function show(a, b) {
    a = a || "welcome"; // 利用短路算法
    b = b || "Peggy";
    console.log(a, b);
};
show("您好", "佩琪"); // 您好 佩琪
show("", ""); // welcome Peggy

ES6：参数=默认值

function show(a = "欢迎", b = "超人") {
    console.log(a, b);
}
show(); // 欢迎 超人
show('welcome', 'superman'); // welcome superman

• 只要传入的实参值为 undefined，就会使用默认值
• 实参需要按顺序传入；可以给前面的参数传入 undefined

show(undefined, '怪兽'); // 欢迎 怪兽
show(, '怪兽'); // SyntaxError: Unexpected token ','

函数的参数是函数的局部变量，函数内部不能再定义同名变量

function show(age = 18) {
    let age = 20; // SyntaxError: Identifier 'age' has already been declared
}

默认参数 & length

• funName.length：形参个数
• arguments.length：实参个数

函数的 funName.length 属性，表示@H_502_73@没有设置默认值的参数个数

所以，设置了默认值后的形参，不会被计算进 funName.length 属性

(function (a, b, c) {}).length; // 3
(function (a, b, c = 5) {}).length; // 2

默认参数 & 作用域

如果设置了函数参数默认值，参数进行初始化时，会形成一个单独的作用域。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的

let x = 1;

function fun(x, y = x) { // AO { x:2, y:2 }
    console.log(x, y);
};

fun(2); // 2 2

上面代码中，y 设置了默认值，所以 (x, y = x) 形成一个作用域，后面的变量 x 指向前面定义的参数 x

let x = 1;

function f(y = x) { // AO { y:1, x:2 }
    let x = 2;
    console.log(x, y);
}

f() // 2 1

上面代码中，y 设置了默认值，所以 (y = x) 形成一个作用域，现在当前作用域寻找 x，发现没有定义，就在父级 ( 全局 ) 作用域中寻找。所以这里的变量 x 指向全局变量 x

箭头函数

ES6 允许使用 “箭头” => 定义函数。箭头函数是一种@H_502_73@函数表达式

 () => {}

• 完整写法：

function show(a, b) {
    console.log(a, b);
    return 1;
}
// ↓
let show = (a, b) => {
    console.log(a, b);
    return a + b;
}

1. 函数里面只有 return 语句时，可以直接写返回值

function show() { return 1; }
// ↓
let show = function () { return 1; }
// ↓
let show = () => 1;

2. 只有一个形参时，小括号也可以省略掉：

function show(a) { return a; }
// ↓
let show = a => a;

3. 如果返回的是对象，需要用 () 括住，因为 {} 会被解释为代码块：

let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数的 this 指向

• 因为箭头函数是@H_502_73@表达式，没有 this，所以获取时，其实是获取到父级函数的 this
• 没有 this 不能用作构造函数，会出错！

正常情况下，对象的 this 指向对象本身

let obj = {
    age: 18,
    show: function () {
        console.log(this.age); // this 指向 obj
    }
}
obj.show(); // 18

使用箭头函数后，this 会指向 window

var age = 20; // 如果用 let 定义，会获取到 undefined，因为 let 定义的全局变量与 window 无关
let obj = {
    age: 18,
    show: () => {
        console.log(this.age); // this 指向 window
    }
}
obj.show(); // 20

在构造函数 Test 内部使用箭头函数，Test 的 this 指向新对象，所以箭头函数的 this 也指向新对象

let a = 11;

function test() {
    this.a = 22;
    let b = () => {
        console.log(this.a); // this 指向新建对象
    };
    b();
};

let obj = new test(); // 22

添加定时器，定时器内的 this 指向 window

var age = 30;

let obj = {
    age: 18,
    show: function () { // this 指向 obj
        setTimeout(function () { // 添加定时器
            console.log(this.age); // this 指向 window
        }, 200);
    }
};

obj.show(); // 30

因为箭头函数写在函数 show 内，箭头函数的 this，其实就是函数 show 的 this

let obj = {
    age: 18,
    show: function () {
        setTimeout(() => {
            console.log(this.age); // this 指向 obj
        }, 200);
    }
};
obj.show(); // 18

箭头函数中的 arguments

和 this 一样，在箭头函数中也没有 arguments；因为箭头函数是@H_502_73@表达式

let show = () => {
    console.log(arguments);
}
show(1, 2, 3, 4, 5); // ReferenceError: arguments is not defined at show

此时我们可以使用 reset 参数代替 arguments：

let show = (...a) => {
    console.log(a);
}

show(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

尾逗号

• ES6 允许函数的最后一个参数 ( 形参 / 实参都可以 ) 后面有尾逗号
• 这使得函数参数与数组、对象的尾逗号规则保持一致

function show(a, b, c, ) {
    console.log(a, b, c);
}
show(1, 2, 3, );