ES6——函数

1. 默认参数

1.1 ES6 之前设置默认参数

function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

1.2 es6写法

function log(x,y="ben"){
    console.log(x+" "+y);
};
log("hello");   //hello ben
log("hello","yuan");  //hello yuan
log("hello","");  //hello

1.3 参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

2.不定参数(rest 参数)

2.1不定参数用来表示不确定参数个数，形如，...变量名——是一个数组，该变量将多余的参数放入数组中

function ben(...person){
    console.log(person.length);
    console.log(person[0]);
    console.log(person[1]);
}
ben(1,3,5);

2.2函数的length属性，不包括rest 参数

function ben(a,...person){
    console.log(person[0]);
    console.log(person[1]);
    console.log(a);
}
ben(1,3,5);
console.log(ben.length); //1

2.3rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错

function ben(a,...person,b){
    console.log(person[0]);
    console.log(person[1]);
    console.log(a);
}
ben(1,3,5); //Rest parameter must be last formal parameter
console.log(ben.length); //1

3.箭头函数

基本语法是：参数 => 函数体

3.1 基本用法

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

3.2 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

3.3 多个语句和单个返回

如果箭头函数的代码块部分多于一条语句，使用大括号将它们括起来，并且使用return语句返回。
当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

3.4返回对象

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
 
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

3.5 应用——回掉函数的匿名函数写法简单

setTimeout((name,age) => {
    console.log(name,age);
},1000);

3.6 箭头函数的this

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。前版本this对象的指向是可变的，但是在箭头函数中，它是固定的。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo.call({ id: 42 });

setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。


  var Person = {
    'age': 18,
    'sayHello': function () {
      setTimeout(function () {
        console.log(this.age);
      });
    }
};
var age = 20;
Person.sayHello();  // 20
 

var Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18

懵逼？？？

var Person = {
    'age': 18,
    'sayHello': ()=>{
        console.log(this.age);
      }
};
var age = 20;
Person.sayHello();  // 20
// 此时 this 指向的是全局对象
 
var Person1 = {
    'age': 18,
    'sayHello': function () {
        console.log(this.age);
    }
};
var age = 20;
Person1.sayHello();   // 18
// 此时的 this 指向 Person1 对象

最后编辑于：2019.04.18 16:45:26