浅谈箭头函数 与function函数

1.浅谈箭头函数 x=>与function(x){}

1.1. 执行效果等价(匿名函数)

代码实例

//完整格式
const s = new Set();
[2,3,5,4,5,2,2].forEach(function(x) {s.add(x)});
// Set结构不会添加重复的值

for(let i of s) {
    console.log(i);
}
//语法糖格式
const s = new Set();
[2,3,5,4,5,2,2].forEach((x) =>s.add(x));
// Set结构不会添加重复的值
for(let i of s) {
  console.log(i);
}
//简略格式
const s = new Set();
[2,3,5,4,5,2,2].forEach(x =>s.add(x));
// Set结构不会添加重复的值

for(let i of s) {
  console.log(i);
}

1.2箭头函数()=>与function的区别

1.2.1 定义方式(有名函数)

var sum = (a,b) =>{a+b};这么写函数定义不成功

var fun = x=>{(x+2)};// fun(3) ;undefined

var fun = x=>{return (x+2)};//ok

var fun = x=>(x+2);//ok

故，当里面需要()时，外面括号用{}，当只有一个括号时用()或者{return …}

//function
function sum(a,b){
    return a+b;
}
//arrow function
var sum = (a,b) =>(a+b);
var sum = (a,b) =>{return a+b};

1.2.2 this的指向

tip1: function定义的函数，调用时this随着调用环境变化，而箭头函数this指向固定指向定义函数的环境

//使用function
function fun(){
    console.log(this);
}
//定义一个对象
var obj = {aa:fun};
fun();//window
//这里调用的是方法故aa()
obj.aa();//object

//使用箭头函数
var fun = ()=>{console.log(this)};
var obj = {aa:fun};
fun();//window
obj.aa();//window

tip2: 箭头函数this是词法作用域，在编写时就已经确定好了。而匿名函数的this指向运行时实际调用的对象。

 function Test() {
     this.num = 100;
     this.func = function(){
         console.log(this.num); // 100 this:Test
         setTimeout(function(){
             console.log(this.num); //undefined this:window
         }, 500);
     };
 } 
var obj = new Test();
obj.func();

//箭头函数以前这么干，利用闭包的概念，箭头函数可以看做这种方式的语法糖
function Test() {
    this.num = 100;

    this.func = function(){
        console.log(this.num); // 100
        var that = this;
        setTimeout(function(){
            console.log(that.num); // 100
        }, 500);
    };
}
var obj = new Test();
obj.func();
//箭头函数
function Test() {
    this.num = 100;

    this.func = function(){
        console.log(this.num); // 100
        setTimeout(() => {
            console.log(this.num); // 100
        }, 500);
    };
}

var obj = new Test();
obj.func();

1.2.3构造函数

tip3:箭头函数除了传入的参数之外，其它的对象都没有！在箭头函数引用了this、arguments或者参数之外的变量，那它们一定不是箭头函数本身包含的，而是从父级作用域继承的。

• 不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。
• this、arguments、caller等对象在函数体内都不存在。
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

//使用function方法定义构造函数
function Person(name, age){
	this.name = name;
	this.age = age;
}
var lenhart =  new Person('lenhart', 25);
console.log(lenhart);

//尝试使用箭头函数
var Person = (name, age) =>{
	this.name = name;
	this.age = age;
};
var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor

1.2.4变量提升

tip4:由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前！

function foo(){
	console.log('123');//123
}
//先调用，后定义
arrowFn(); //Uncaught TypeError: arrowFn is not a function
var arrowFn = () => {
	console.log('456');
};

//先定义，再调用
var arrowFn = () => {
	console.log('456');
};
arrowFn(); //456