web前端面试--(JS)箭头函数和普通函数的区别

web前端面试

本人是一个web前端开发工程师，主要是vue框架，整理了一些面试题，今后也会一直更新，有好题目的同学欢迎评论区分享 ;-）

web面试题专栏：点击此处

---

背景

从网上找到一些箭头函数跟普通函数的区别，咋们现在来进行认证，打横线就是错误的地方，所以说网上的东西未必都是对的，要多探讨一下…：）

1. 箭头函数的this是定义时决定的，普通函数是看调用方法。
2. 箭头函数不能使用async/await
3. 箭头函数不能使用Generator函数，不能使用yeild关键字
4. 箭头函数不能使用call、apply、bind来修改this指向
5. 箭头函数不绑定arguments
6. 箭头函数不具有prototype原型对象，不具有super，不能成为构造函数

1、箭頭函数this指向当前调用环境的上下文，普通函数指向函数所在的上下文

• 普通函数this总是指向函数的拥有者, 例如 obj.func ,那么func中的this就是obj；
• 调用的时候，没有任何前缀，则指向window，new的时候，指向new出来的对象。

   
    // this 指向
    var name = 'penk';
    // 箭头函数
    var thisFn1 = () => {
      var name = 'penk1';
      console.log(this.name)
    }
    // 普通函数变量
    var thisFn2 = function () {
      var name = 'penk2';
      console.log(this.name)
    }

    // 对象
    var obj = {
      name: 'objName',
      thisFn1,
      thisFn2,
    }

    // 箭头函数，所以this指向当前调用的上下文，打印penk.
    obj.thisFn1();
    // 普通函数，所以this指向自身所在的上下文，所以打印ojbName.
    obj.thisFn2();

    // 此处为了说明，this与嵌套无关
    // 箭头函数的this只跟当前调用上下文有关
    // 普通函数的this跟自身所在上下文有关
    var objPlus = {
      name: "objPlus",
      obj
    }

    // 箭头函数，所以指向当前调用的上下文，打印penk.
    objPlus.obj.thisFn1();
    // 普通函数，所以指向自身所在的上下文，所以打印ojbName.
    objPlus.obj.thisFn2();

2、箭头函数能使用async/await

下面实例证明箭头函数可以使用async/await…

	// 箭头函数能使用async/await
	function timeout(msg) {
	  return new Promise((resolve, reject) => {
	    setTimeout(() => {
	      console.log(msg);
	      resolve(true)
	    }, 5000)
	  })
	}
	
	var asyncFn = async () => {
	  await timeout("是async函数111");
	  console.log("是async函数222")
	}
	
	asyncFn();

3、箭头函数不能声明为Generator函数

好家伙，vscode直接给了提示，控制台也出错了

这里附带了一段Generator代码，斐波那契数列，刚好也是常考面试题

// 箭头函数不能使用Generator函数，不能使用yeild关键字，生命的时候vscode报错提示，控制台也出错了
// 这边用斐波那契数列来写一个DEMO
	function* fibFn1(max) {
	  var arr = [0, 1]
	  var a = 0,
	    b = 1;
	
	  while (arr.length < max) {
	    yield a;
	    [a, b] = [b, a + b];
	    arr.push(b);
	  }
	
	  return arr;
	}
	
	var b = fibFn1(5);
	console.log(b);
	console.log(b.next());
	console.log(b.next());
	console.log(b.next());
	console.log(b.next());

4、call / apply / bind来修改this指向

由于箭头函数一方面是为了简化代码，另外一方面是让this指向调用者上下文，跟call、apply、bind修改this上下文有冲突，下面可以的知，call、apply、bind修改箭头函数的上下文无效。

	// 箭头函数不能使用call、apply、bind来修改this指向
	// 普通函数
	function callFn1() {
	  console.log("普通函数:", this.name);
	}
	
	// 箭头函数
	var callFn2 = () => {
	  console.log("箭头函数:", this.name);
	}
	
	var obj;
	var name = "penk";
	obj = {
	  name: "objPenk"
	}
	// 普通函数修改上下文，有效果，所以打印objPenk
	callFn1.call(obj);
	// 箭头函数修改上下文不会报错，但是没效果
	callFn2.call(obj);

5、箭头函数不绑定arguments

简单粗暴，箭头函数打印的话，直接报错

    // 箭头函数不绑定arguments
    // 普通函数
    function argFn1(a,b) {
      console.log(arguments);
    }
    // 箭头函数
    var argFn2 = (a,b) => {
      console.log(arguments);
    }

    // 普通函数有打印数据
    argFn1(1,2);
    // 箭头函数报错
    argFn2(1,2);

6、箭头函数不具有prototype原型对象，不具有super，不能成为构造函数

• super指向的是当前对象的原型对象

    // 箭头函数不具有prototype原型对象，不具有super，不能成为构造函数
    var name="prototype";
    // 普通函数
    function protoFn1(){
      console.log("protoFn1");
    }

    // 箭头函数
    var protoFn2 = ()=>{
      
    }

    var fn1 = new protoFn1();
    // prototype：箭头函数原型链上没有prototype，显示undefined
    console.log(protoFn2.prototype);
    // 构造函数：直接报错
    var fn2 = new protoFn2();
    // super：...