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

1,933 阅读4分钟

普通函数

三种声明方式

  • 直接声明
    // 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方法指定下一步的操作。