JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

下面是详细的讲解。

什么是箭头函数

箭头函数是ECMAScript 6中新增的一种语法，用于定义函数。箭头函数相比常规函数，语法更加简洁，同时还有一些不同之处。箭头函数的语法如下：

(param1, param2, …, paramN) => { statements }

其中，param1, param2, …, paramN表示函数的参数列表，statements表示在函数中要执行的语句。

常规函数和箭头函数之间的区别

下面介绍常规函数和箭头函数之间5个不同之处。

1. 箭头函数不能使用arguments对象

在常规函数中，我们可以使用arguments对象来获取传入的参数。但是，在箭头函数中，不能使用arguments对象。这是因为箭头函数没有自己的this值，而arguments对象和this值都是在函数被调用时运行时创建的，因此在箭头函数中无法使用arguments对象。

function foo() {
    console.log(arguments);
}
foo(1, 2, 3);  // 输出: [1, 2, 3]

const bar = () => {
    console.log(arguments);
}
bar(1, 2, 3);  // 报错：arguments is not defined

2. 箭头函数的this值

常规函数中的this值是在函数运行时确定的，取决于函数的调用方式。而箭头函数中的this值是在函数定义时确定的，它指向函数所在上下文的this值。

const obj = {
    name: 'Tom',
    sayHi: function() {
        console.log("Hi, I'm", this.name);
    },
    sayHiArrow: () => {
        console.log("Hi, I'm", this.name);
    }
}

obj.sayHi();         // Hi, I'm Tom
obj.sayHiArrow();    // Hi, I'm undefined

3. 箭头函数无法绑定this

在常规函数中，我们可以使用bind、call、apply等方法来显式绑定this值。但是，在箭头函数中，无法使用这些方法来修改this值，因为箭头函数的this值已经在函数定义时被确定了。

const obj = {
    name: 'Tom',
    sayHi: function() {
        console.log("Hi, I'm", this.name);
    },
    sayHiArrow: () => {
        console.log("Hi, I'm", this.name);
    }
}

const otherObj = {
    name: 'Jack'
}

const sayHi = obj.sayHi.bind(otherObj);
const sayHiArrow = obj.sayHiArrow.bind(otherObj);

sayHi();         // Hi, I'm Jack
sayHiArrow();    // Hi, I'm undefined

4. 箭头函数没有原型

在常规函数中，每个函数都有一个原型对象，该对象上有一些方法和属性。而在箭头函数中，没有原型对象。

function foo() {}
const bar = () => {}

console.log(foo.prototype);  // {}
console.log(bar.prototype);  // undefined

5. 箭头函数不支持yield关键字

yield关键字用于生成器函数中，用于控制生成器函数的执行流程。而箭头函数不支持yield关键字，因此不能用于生成器函数。

function* generator() {
    yield 1;
    yield 2;
}

const generatorArrow = () => {
    yield 1;   // 报错：SyntaxError: Unexpected keyword 'yield'
    yield 2;
}

示例说明

下面的两个示例都是通过比较常规函数和箭头函数的区别来进行解释的。

示例一

function getSalary(salary, tax) {
    return salary - salary * tax;
}

const getSalaryArrow = (salary, tax) => salary - salary * tax;

console.log(getSalary(10000, 0.2));          // 输出: 8000
console.log(getSalaryArrow(10000, 0.2));     // 输出: 8000

上面的示例中，常规函数getSalary和箭头函数getSalaryArrow的功能都是计算税后工资。通过比较可以发现，箭头函数的语法更加简洁。

示例二

function Counter() {
    this.count = 0;
    setInterval(function() {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter();

上面的示例中，Counter是一个构造函数，它会在每一秒钟增加计数器的值并输出。但是，由于在匿名函数中使用了this关键字，而在匿名函数执行时上下文已经改变，因此会出现计数器不变的情况。为了解决这个问题，我们可以使用箭头函数来绑定this值。

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter();

上面的示例中，箭头函数setInterval(() => {...})中的this值指向了Counter函数的实例对象，因此可以正常执行计数器加1的操作。

至此，关于“JS箭头函数和常规函数之间的区别实例分析【 5 个区别】”的完整攻略就讲解完了。