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 对象

你可能感兴趣的:(ES6——函数)