[JS-5] JavaScript 函数

定义函数

• 函数声明

  function square(number) {
    return number * number;
  }
  
  square(4) // 输出16
  

• 函数表达式

  var square = function(number) {
    return number * number;
  }
  
  square(4) // 输出16
  

• 箭头函数

  var square = (a) => {
    return a * a;
  }
  
  square(4) // 输出16
  

• 函数构造函数

  var square = new Function('a','return a * a');
  
  square(4) // 输出16
  

• 生成器函数

  function* fn(n) {
    yield n;
    yield n * n;
    yield n * n * n;
    yield n * n * n * n;
  }
  
  for(let k of fn(2)) {
    console.log(k)
  }
  
  /*
    输出：
    2
    4
    8
    16
  */
  
  

调用函数

• 作为函数直接被调用

  function hi(name) {
    return '你好,' + name + '!';
  }
  
  // 调用
  hi('楚中天') // 你好，楚中天！
  

• 做为方法被调用

  var person = {
    name: '楚中天',
    hi() {
      return '你好,' + this.name + '!';
    }
  }
  
  // 调用
  person.hi() // 你好，楚中天！
  

• 作为构造函数被调用

  function Person(name) {
    this.name = name;
    this.hi = () => {
      return '你好,' + this.name + '!';
    }
  }
  
  // 调用
  var p1 = new Person('楚中天');
  p1.hi() // 你好，楚中天！
  

• 通过函数 apply 或 call 调用

  function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  var p1 = { job: 'web' }
  var p2 = { job: 'UI'  }
  
  Person.apply(p1, ['楚中天', 28, '男']);
  Person.call(p2, '王美丽', 26, '女');
  
  console.log(p1)  // { job: "web", name: "楚中天", age: 28, gender: "男" }
  console.log(p2)  // { job: "UI", name: "王美丽", age: 26, gender: "女" }
  

函数作用域与堆栈

递归

调用自身的函数称为递归函数。

function loop(x) {
  if(x >= 10) return;
  loop(x + 1);
}
loop(0);  // 函数将被调用10次

嵌套函数与闭包

闭包是一个可以自己拥有独立的环境与变量的表达式（通常是函数）。

function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}

var fn_inside = outside(1)
console.log(fn_inside)  // function inside()

var result = fn_inside(2)
console.log(result)  // 3

var result1 = outside(2)(3)
console.log(result1 )  // 5

MDN关于闭包的文章

arguments 对象

函数的实际参数会被保存在一个类似数组的arguments对象中。

function fn() {
  if(arguments.length > 0) {
    for(let x of arguments) {
      console.log(x)
    }
  }
}

fn()  // 无输出
fn(1)  // 1
fn(1,2,3)  // 1,2,3
fn(1,2,3,)  // 1,2,3

函数参数

从ECMAScript 6开始，有两个新的类型的参数：默认参数，剩余参数。

默认参数

function add(a, b = 1) {
  return a + b;
}

add(2);  // 3
// 如果函数没有给定默认值，则默认值是 undefined

剩余参数

function add(num1, ...args) {
  return args.reduce((sum, x) => {
    return sum + x
  }, num1);
}

add(1, 2, 3, 4, 5);  // 15

箭头函数

• 更简洁的函数

  var arr = [1, 2, 3, 4, 5];
  
  // ES5写法
  var a1 = arr.map(function(x) {
    return x * 2;
  })
  console.log(a1);  // [2, 4, 6, 8, 10]
  
  // ES6写法
  var a2 = arr.map(x => {
    return x * 2;
  })
  console.log(a2);  // [2, 4, 6, 8, 10]
  

• this
  关于this
  函数的调用方式决定了this的值。要判断this的值，就要判断它的执行上下文。

  \\ ES3/5 错误写法
  function Person() {
    this.age = 0;
  
    setInterval(function() {
      this.age++;  // 此时this指向window，而不是p，在严格模式下将为undefined
      console.log(this.age);
    }, 1000)
  }
  var p = new Person();  // NaN,NaN,NaN...
  

  \\ ES3/5 解决办法
  function Person() {
    var self = this;
    self.age = 0;
  
    setInterval(function() {
      self.age++;
      console.log(self.age);
    }, 1000)
  }
  var p = new Person();  // 1,2,3...
  

  箭头函数捕捉闭包上下文的this值，所以下面代码正常工作。

  \\ ES6箭头函数 解决了上面的问题
  function Person() {
    this.age = 0;
  
    setInterval(() => {
      this.age++;
      console.log(this.age);
    }, 1000)
    
    }
  var p = new Person();  // 1,2,3...
  

---

参考：MDN