JS中普通函数、匿名函数、构造函数、箭头函数、Generator 函数、async 函数的区别

普通函数

三种声明方式

• 直接声明

    // 1.直接声明
    function f() {
        console.log("这是直接声明的")
    }
    //函数调用
    f();

• 函数表达式声明

    //2.函数表达式
    var test = function () {
        console.log("这是函数表达式声明")
    }
    // 函数调用
    test();

• 构造函数声明

    //3.构造函数调用
    var  test = new Function('name','alert("hello,"+name)');     
     //最末尾的是函数体，其前面的都是参数
    //函数调用
    test('world');

特点

• this指向调用者

  如果在全局中调用就指向window，如果绑定DOM元素事件就指向触发的元素。

  普通函数的this在运行时创建，箭头函数的this是定义时确定。

  this指向可以被call/apply/bind改变。

• 具有prototype

• 函数内部包含一个默认的arguments参数数组，它返回函数所接收的所有参数

• 函数域始终高于全局域

• 默认返回undefined

匿名函数

特点

表现为function后面不带名字的函数，但是可以用一个变量接收，通过执行这个变量来执行这个函数。

• this指向window

• 具有prototype

• this指向可以被call/apply/bind改变

构造函数

function Person(name,job,age)
{
     this.name=name;
     this.job=job;
     this.age=age;
     this.sayHi=function() {
          alert("Hi")
     }
 } 

特点

• 习惯上首字母大写

• 使用new关键字进行调用

• 构造函数用来新建实例对象

• 内部用this来构造属性和方法

• 构造函数在被调用之后会马上创建一个新对象，并将该对象作为返回值返回

• 具有prototype

箭头函数

(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
a => {}
// 箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

特点

• 箭头函数根本没有自己的this！！！导致内部的this就是外层代码块的this。

  因为没有this，所以不能用作构造函数。

  也不能使用call()、apply()、bind() 去改变this的指向。

• 没有原型prototype

  没有super用于访问原型属性。

• 不可以当作构造函数（也是因为没有this）

  （因为构造函数的this永远指向被他实例化出来的对象，但是箭头函数无法对创建出来的实例进行this绑定）

  不可以使用new命令，否则会抛出一个错误。

  不能使用new.target关键字返回创建实例的构造函数(类)本身。

• 不可以使用arguments对象，该对象在函数体内不存在

  如果要用，可以用rest参数代替。

• 不可以使用yield

  因此箭头函数不能用作Generator函数。

• 箭头函数是匿名函数

Generator函数

function* gen(x){
  console.log('x='+x)
  var y = yield x + 2;

  return y;
}
//调用Generator 函数
var g = gen(1);
 
g.next();
// x=1
// {value: 3, done: false}

ES6提供的一种异步编程的解决方案。可以理解成一个状态机，封装了多个内部的状态。执行函数会返回一个遍历器对象，可以依次遍历函数内部的每个状态。

• 形式上，Generator是一个普通函数。

  区别一是function命令和函数名之间有一个星号*

  区别二是函数体内部使用yield定义不同的状态。

• 调用上，也和普通函数一样，在函数名后面加上一对圆括号。

  不同的是，调用后函数并不执行，返回的也不是函数的运行结果，而是一个指向内部状态的指针对象。

async函数

function getSomething() {
    return "something";
}

async function testAsync() {
    return Promise.resolve("hello async");
}

async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}

test();
// something hello async

ES2017标准引入了async函数，使异步操作变得更加方便。它是Generator函数的语法糖，将Generator函数的星号 * 替换成async，将yield替换成await。

相对于Generator函数的改进：

• 内置执行器

  自带执行器，会自动执行。

• 更好的语义

  async表示函数里面有异步操作，await表示紧跟在后面的表达式需要等待结果。

• 更广的适用性

  yield命令后面只能是Thunk函数或Promise对象。

  async函数的await命令后面既可以是Promise对象也可以是原始类型的值。

• 返回值是Promise

  Generator函数返回值是Iterator对象，而async返回值是Promise对象。

  可以用then方法指定下一步的操作。