箭头函数和普通函数，在语法上虽然看上去很相似，但其实它们之间有许多的不同点。在ES6的语法下，箭头函数被广泛的应用于前端开发中，那么为什么箭头函数如此的受欢迎呢？它与普通函数的区别又在哪里呢？下面，让我们深入剖析箭头函数与普通函数的区别。

一、语法

箭头函数和普通函数，在语法上确实非常的相似，都使用function关键字进行声明，然后后面加上函数名、参数以及函数主体。然而，箭头函数却更为简洁明了，它通过“=>”来代替function关键字，如下所示：

```

// 普通函数

function test () {

console.log("这是一个普通函数");

}

// 箭头函数

const test2 = () => console.log("这是一个箭头函数");

```

二、this 的指向

箭头函数和普通函数的最大区别就在于this的指向。在普通函数中，this的指向是动态的，它在调用的时候才会指向特定的对象。而在箭头函数中，this 的值与外层上下文的 this 值相同。

以普通函数为例，下面代码的this 值指向是obj1，因为调用test方法时通过obj1调用的。

```

let obj1 = {

name: "小明",

test: function() {

console.log(this.name); // 输出：小明

}

}

let obj2 = {

name: "小红"

}

obj1.test.call(obj2);

```

另外，如果在使用React时不使用箭头函数，this 的指向很容易出现问题。在下面的例子中，如果使用普通函数，在没有进行额外的bind操作时，onClick方法中的this 指向的时undefined，这是因为在函数的执行过程中，function的this值指向它的调用者，而此时onClick作为一个回调函数没有被绑定，所以this指向的是undefined。

```

class Test extends React.Component {

handleClick() {

console.log(this); // 输出undefined

}

render() {

return (

Click me!

);

}

}

```

而如果使用箭头函数，则不需要进行额外的绑定操作，因为箭头函数的 this 值与上下文的 this 值相同。换句话说，在 Test 的 handleClick 中，this 值指向的是 Test 的实例。

```

class Test extends React.Component {

handleClick = () => {

console.log(this); // 输出 Test 的实例

}

render() {

return (

Click me!

);

}

}

```

三、return 语句

当函数主体只有一行时，箭头函数可以省略 return 关键字，直接将返回值写在“=>”后面。

```

// 普通函数

function square (x) {

return x * x;

}

// 箭头函数

const square2 = x => x * x;

```

四、适用场景

箭头函数多用于简单的逻辑中，比如filter、map等。

```

const nums = [1,2,3,4,5,6,7,8,9,10];

// 普通函数

let newNums1 = nums.filter(function (item) {

return item % 2 === 0;

});

// 箭头函数

let newNums2 = nums.filter(item => item % 2 === 0);

console.log(newNums1); // 输出 [2, 4, 6, 8, 10]

console.log(newNums2); // 输出 [2, 4, 6, 8, 10]

```

但是，由于箭头函数没有this指向，所以在需要使用this的场景中，我们还是需要使用普通函数。另外，由于箭头函数只能是匿名函数，所以在需要命名函数的场景下，我们也需要使用普通函数。

总结：

通过上面的介绍，我们了解了箭头函数与普通函数的不同之处。虽然箭头函数更简洁明了，但是在使用的过程中，我们还是需要根据场景和需求来选择其适用的范围。