箭头函数和普通函数的区别

箭头函数和普通函数的区别

本章主要讲的是箭头函数

一、 （语法）外形

箭头函数表达式用箭头符号（=>），故得名为箭头函数，箭头函数的语法比函数表达式更简洁。
普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。
通常函数的定义方式

// 函数声明
  function name(params) {
    console.log('1');
  }
  // 函数表达式
  var fn = function () {
    console.log('1');
  }
  // 自调用函数
    ; (function () {
      console.log(1);
    })

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。箭头函数相当于匿名函数

// 箭头函数
  var fn = (a) => {
    console.log('1');
  }
//自调用
  ((a) => {
    console.log('1');
  })()

二、 箭头函数可以简写

1、当箭头函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

2、箭头函数只包含一个表达式，可以省略{ } 和return，包含多条语句和return不能省略

  var fn = (a, b) => {
    console.log(1);
  }
  // 省略函数名，自调用函数
  (a, b) => {
    console.log('1');
  }
  // 当箭头函数只有一个参数试，可以省略括号,没有参数不能省略
  (a) => { }
  a => { }
  () => { }
  // 当函数只包含一个表达式，可以省略{ } 和return，包含多条语句不能省略
  (a, b) => {
    return a + b
  }
  // 省略{ }和return
  (a, b) => a + b

三、 函数调用和this指向

概要：头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。但是可以通过改变父作用域的this指向从而改变构造函数的this指向。
普通函数的this指向调用它的那个对象。
普通函数调用可以使用 ：函数名()调用，函数表达式的调用，函数自调用，call()调用，apply()调用，bind()调用。bind()不能直接调用函数
一般谁调用函数，this指向谁，其中call()调用，apply()调用，bind()调用都可以改变this指向

// 函数名调用
  function name(params) {
    console.log('1');
  }
  name()
  // 函数表达式调用
  var fn = function () {
    console.log('1');
  }
  fn()
    // 自调用函数
    ; (function () {
      console.log(this);
    }).bind(fn)()
  // call()调用,apply()调用，bind()调用
  var fn = function () {
    console.log('1');
  }
  fn.call()
  fn.apply()
  fn.bind()()

箭头函数调用可以使用：函数表达式调用，自调用，call()，apply()，bind()调用，bind()不能直接调用函数
注意：箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。但是可以通过改变父作用域的this指向从而改变构造函数的this指向。

// 函数名调用
 // 箭头函数表达式调用
  var fn = (a) => {
    console.log('2');
  }
  fn()
    // 自调用
    ; ((a) => {
      console.log('1');
    })()
  // call(),apply(),bind()调用
  fn.call()
  fn.apply()
  fn.bind()()

四、 构造函数和原型

箭头函数不能作为构造函数，不能使用new
由于this必须是对象实例，而箭头函数是没有实例的，此处的this指向别处，不能产生person实例，自相矛盾。

//构造函数如下：
function Person(p){
    this.name = p.name;
}
//如果用箭头函数作为构造函数，则如下
var Person = (p) => {
    this.name = p.name;
}

所以箭头函数也没有原型属性

var a = ()=>{
  return 1;
}
function b(){
  return 2;
}
console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

五、Arguments对象

arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。

// 普通函数
  var fn_1 = function name(x, y, z) {
    console.log(x, y, z);//1，2，3
    console.log(...arguments);//1，2，3
  }
  fn_1(1, 2, 3)
  // 箭头函数
  var fn_2 = (x, y, z) => {
    console.log(x, y, z);//1，2，3
    console.log(...arguments);// Uncaught ReferenceError: arguments is not defined
  }
  fn_2(1, 2, 3)

总结

箭头函数的特点：
1、箭头函数:去掉function，在小括号后面加=>
2、 只有一个参数，可以省略小括号
3、函数体只有return一条语句，可以省略大括号和return语句
4、箭头函数没有内置对象
5、箭头函数没有原型对象
6、箭头函数不能是构造函数
7、箭头函数的this指向不能被改变,call和apply能调用箭头函数
8、其他函数被谁调用指向谁，箭头函数的this指向父作用域（定义的地方），可以通过改变父作用域的this指向改变箭头函数的this指向