【JS Web 前端知识库】15.说一说es6中箭头函数？

15.说一说es6中箭头函数？

得分点:

没有this、this是从外部获取、不能使用new、没有arguments、没有原型和super

标准回答:

1. 箭头函数相当于匿名函数，简化了函数定义。
2. 箭头函数有两种写法:
   ① 当函数体是单条语句的时候可以省略{}和return。
   ② 另一种是包含多条语句，不可以省略{}和return

	   // 单条语句
	   clickEvent: () => this.createBDData()
	   // 多条语句
  	   clickEvent: (e) => {
                                this.establish = false;
                                this.dialogData = toolUtil.deepCopy(e);
                                this.BdJumpToDetails() // 点击跳转到详情界面
                            },

3. 箭头函数最大的特点就是没有this，所以this是从外部获取，就是继承外部的执行上下文中的this，由于没有this关键字所以箭头函数也不能作为构造函数，
4. 同时通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），第一个参数会被忽略。
5. 箭头函数也没有原型和super。 不能使用yield关键字，因此箭头函数不能用作 Generator 函数。 不能返回直接对象字面量。

加分回答:

1. 箭头函数的不适用场景：

① 定义对象上的方法 当调用 dog.jumps 时，lives 并没有递减。因为 this 没有绑定值，而继承父级作用域。

	var dog = { lives: 20, jumps: () => { 
			this.lives--; 
					} 
			  } 

② 不适合做事件处理程序 此时触发点击事件，this不是button，无法进行class切换

	var button = document.querySelector('button'); 
	button.addEventListener('click', () => { 
			this.classList.toggle('on');
			}); 

2. 箭头函数函数适用场景：

① 简单的函数表达式，内部没有this引用，没有递归、事件绑定、解绑定，适用于map、filter等方法中，写法简洁

	var arr = [1,2,3]; 
	var newArr = arr.map((num) => num * num) 

② 内层函数表达式，需要调用this，且this应与外层函数一致时

	let group = {
         title: 'Our Group',
         students: ['John', 'Pete', 'Alice'],
         showList() {
                this.students.forEach(
                    student => alert(this.title + ': ' + student))
            }
        }
        group.showList()

💞💖💓💗每个时代，
✨🌟⭐️💫都悄悄犒赏会学习的人。