随着ES6的普及，箭头函数也成为了一种非常流行的语法特性，对于一些喜欢使用ES6的前端开发者来说，箭头函数几乎已经成为了首选函数定义方式。但是，相对于普通函数而言，箭头函数又有哪些不同点呢？本文将从实测对比与注意事项两个方面来探究箭头函数和普通函数之间的差异。

一、实测对比

在实际开发过程中，箭头函数和普通函数具体有哪些差别呢？我们可以通过一些例子来进行测试和比较。

1. this指向

在JavaScript中，this关键字常常会引起开发者的困惑。普通函数里的this，指向调用这个函数的上下文对象，此时this的指向是动态的，因为调用函数的时候，上下文的对象可能会发生改变。而箭头函数里的this，指的是定义时上下文里的this，这个指向在函数定义时就已经确定了，不会随调用的改变而改变。下面是一个例子来测试这个差异：

```javascript

let name = 'Jerry';

let obj = { name: 'Tom' };

function getName() {

console.log(this.name);

}

getName(); // Jerry

obj.getName = getName;

obj.getName(); // Tom

let getUserName = () => {

console.log(this.name);

}

getUserName(); // Jerry

```

从上面的例子可以看出，普通函数的this指向是动态的，根据调用时的上下文对象而变化；而箭头函数的this指向是固定的，跟函数定义时的上下文对象相关。

2. arguments对象

在箭头函数中，没有arguments对象，使用或者对arguments的引用将会导致一个ReferenceError错误。如果想要获取函数参数，可以使用rest参数代替。而在普通函数中，arguments对象是存在的，可以通过访问arguments对象来获取函数的所有参数。下面是一个例子来测试这个差异：

```javascript

function sum() {

let total = 0;

for (let i = 0; i < arguments.length; i++) {

total += arguments[i];

}

console.log(total);

}

sum(1, 2, 3); // 6

let getSum = (...nums) => {

let total = 0;

for (let i = 0; i < nums.length; i++) {

total += nums[i];

}

console.log(total);

}

getSum(4, 5, 6); // 15

let getArgs = () => {

console.log(arguments);

}

getArgs(7, 8, 9); // ReferenceError

```

从上面的例子可以看出，普通函数中可以使用arguments对象访问函数的所有参数；而在箭头函数中，没有arguments对象，可以使用rest参数代替。

3. 函数的prototype属性

普通函数有一个prototype属性，指向一个对象，这个对象包含了所有实例共享的属性和方法。而箭头函数无prototype属性，因为箭头函数没有自己的this，所以也就没有自己的prototype，即使写了一个诸如“Arrow1.prototype.xxx”的语句，也不会有任何效果。下面是一个例子来测试这个差异：

```javascript

function Person(name) {

this.name = name;

}

Person.prototype.sayName = function() {

console.log('My name is ' + this.name);

}

let person1 = new Person('Tom');

person1.sayName(); // My name is Tom

let Student = (name) => {

this.name = name;

}

Student.prototype.sayName = function() {

console.log('My name is ' + this.name);

}

let student1 = new Student('Jerry');

student1.sayName(); // TypeError

```

从上面的例子可以看出，使用箭头函数定义构造函数时，没有prototype属性；调用实例的方法时，也会抛出错误。

二、注意事项

在使用箭头函数时，有一些注意事项需要注意，下面是一些需要注意的地方：

1. 不适用于对象方法

箭头函数不适用于所有需要动态this值的函数场景，特别是在对象方法中，箭头函数的this指向不是当前对象，而是定义时的上下文。因此，在定义对象方法时，还是应该使用普通的函数定义方式。下面是一个例子来测试这个差异：

```javascript

let obj = {

name: 'Tom',

getName: () => {

console.log(this.name);

}

}

obj.getName(); // undefined

```

从上面的例子可以看出，在对象方法中使用箭头函数，this指向的是全局上下文，而不是当前对象。

2. 不适用于构造函数

箭头函数没有prototype属性，因此不适用于定义构造函数。

3. 嵌套函数

在使用嵌套函数时，箭头函数的this会指向外层函数的上下文，如果需要内部函数使用父级函数的this，需要使用普通函数定义。下面是一个例子来测试这个差异：

```javascript

let obj = {

name: 'Tom',

logName() {

console.log(this.name);

let getName = () => {

console.log(this.name);

}

getName();

}

}

obj.logName(); // Tom Tom

```

从上面的例子可以看出，在嵌套函数中使用箭头函数，this指向的是外层函数的上下文；如果需要内部函数使用父级函数的this，需要使用普通函数定义。

4. 函数体没有花括号

箭头函数只有一个表达式或者语句，可以省略函数体外的花括号和return关键字，但是这种方式并不利于代码的阅读和维护。下面是一个例子来测试这个差异：

```javascript

let add = (a, b) => a + b;

console.log(add(1, 2)); // 3

let sum = (a, b) => {

let total = a + b;

return total;

}

console.log(sum(3, 4)); // 7

```

从上面的例子可以看出，箭头函数只有一个表达式或者语句时，可以省略函数体外的花括号和return关键字；但是这种写法并不利于代码的阅读和维护。

总结

在使用箭头函数和普通函数的时候，需要根据具体的场景来选择相应的函数定义方式。一般来说，箭头函数适用于简单的函数定义，可以提高代码的可读性和可维护性；而在需要动态this指向和对象方法定义等场景中，还是应该使用普通函数定义方式。同时，开发者在使用箭头函数时，也需要注意一些可能会引起错误的地方，如this指向和函数体的写法等。