ES6学习笔记之函数(二)

5.作用域

使用默认参数时,参数会形成一个独立的作用域,此作用域与函数体中的作用域是平行关系,互不影响。

var x = 1;
function show(x, y= function () { x=2; }) {
    var x = 3;
    y();
    console.log(x);
}
show(); //3
console.log(x); //1

上面代码中,函数show的参数形成了一个单独的作用域。这个作用域里面,首先声明了变量 x ,接着声明了变量 y ,y 的默认值是一个匿名函数。这个匿名函数内部没有定义变量 x ,所以找到上一层作用域的变量 x ,即第一个参数 x,赋值为2。函数show 内部又声明了一个内部变量 x ,这个 x 与第一个参数 x 不是同一个作用域,所以不是同一个变量。上面代码标的颜色中,相同颜色表示处于同一作用域。

如果将 var x = 3 的 var 去除,函数show 的内部变量  x 就指向第一个参数,与匿名函数内部的 x 是一致的。如下面代码。

var x = 1;
function show(x, y= function () { x=2; }) {
    x = 3;
    y();
    console.log(x);
}
show(); //2
console.log(x); //1

6. rest参数

 ES6 引入rest参数(形式为 ... 变量名),用于获取函数多余参数。这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add (...values){
    let sum = 0;
    for(var val of values){
        sum += val;
    }
    return sum;
}
add(2,5,3); //10

arguments 对象不是数组,而是一个类似数组的对象。而 rest 参数是一个真正的数组,数组特有的方法都可以使用。注意,rest 参数只能是最后一个参数,否则会报错。

7.name属性

函数的 name 属性,返回该函数的函数名。

8.箭头函数

ES6 允许使用“箭头”(=>)定义函数。

window.onload = ()=>{
    console.log('a');
};

//等同于
window.onload = function (){
    console.log('a');
}

只有一个参数时可以省略参数的括号。函数只有一条 return 语句时,可以不写return,不加函数体的大括号{}。如:

let show = x => { console.log(x); };    //只有一个参数时,可省略参数的括号
show(1);    //1

let sum = (a, b)=> a + b;   //只有一条return语句时,可省略return和{}
console.log(sum(1, 2)); //3

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象时,必须在对象外面加上括号,否则报错。如:

let show = () =>({ x:1,y:2});

箭头函数的一个用处是简化回调函数

console.log([1,2,3].map(x => x * x));   //[ 1, 4, 9 ]

let res = [8,3,1,5].sort((a,b) => a-b);
console.log(res);   //[ 1, 3, 5, 8 ]

箭头函数的几个注意点:

  1. 函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。(箭头函数的 this 指向问题,下篇再详解)
  2. 不可以当做构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。
  3. 不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  4. 不可以使用 yield 命令,因此箭头函数不能用作 Generator 函数
原文地址:https://www.cnblogs.com/ly2019/p/10994244.html