本文实例讲述了JS箭头函数和常规函数之间的区别。分享给大家供大家参考，具体如下：在 JavaScript 中，你可以通过多种方式去定义函数。第一种常用的方法是使用关键字 function：function
// 函数声明
function greet(who) {
return `Hello, ${who}!`;
}
// 函数表达式
const greet = function(who) {
return `Hello, ${who}`;
}
// 函数声明
function greet(who) {
return `Hello, ${who}!`;
}
// 函数表达式
const greet = function(who) {
return `Hello, ${who}`;
}代码中的函数声明和函数表达式被称为“常规函数”。从 ES2021 开始，第二种可用的方法是 箭头函数 语法：箭头函数
const greet = (who) => {
return `Hello, ${who}!`;
}
const greet = (who) => {
return `Hello, ${who}!`;
}虽然两者的语法都能够定义函数，但是在开发时该怎么选择呢？这是个好问题。在本文中，我将展示两者之间的主要区别，以供你能够根据需要选择正确的语法。1. this 值this1.1常规函数在常规 JavaScript 函数内部，this 值（即执行上下文）是动态的。this动态上下文意味着 this 的值取决于如何调用函数。在 JavaScript 中，有 4 种调用常规函数的方式。this如何在简单调用过程中，this 的值等于全局对象（如果函数在严格模式下运行，则为 undefined ）：简单调用thisundefined
function myFunction() {
console.log(this);
}

// 简单调用
myFunction(); // logs global object (window)
function myFunction() {
console.log(this);
}

// 简单调用
myFunction(); // logs global object (window)在方法调用过程中，this 的值是拥有该方法的对象：方法调用this
const myObject = {
method() {

console.log(this);
}
};
// 方法调用
myObject.method(); // logs "myObject"
const myObject = {
method() {

console.log(this);
}
};
// 方法调用
myObject.method(); // logs "myObject"在使用 myFunc.call(context, arg1, ..., argN) 或 myFunc.apply(context, [arg1, ..., argN]) 的间接调用中，this 的值等于第一个参数：myFunc.call(context, arg1, ..., argN)myFunc.apply(context, [arg1, ..., argN])this
function myFunction() {
console.log(this);
}

const myContext = { value: 'A' };

myFunction.call(myContext); // logs { value: 'A' }
myFunction.apply(myContext); // logs { value: 'A' }
function myFunction() {
console.log(this);
}

const myContext = { value: 'A' };

myFunction.call(myContext); // logs { value: 'A' }
myFunction.apply(myContext); // logs { value: 'A' }在使用关键字 new 的构造函数调用期间，this 等于新创建的实例：newthis
function MyFunction() {
console.log(this);
}

new MyFunction(); // logs an instance of MyFunction
function MyFunction() {
console.log(this);
}

new MyFunction(); // logs an instance of MyFunction1.2箭头函数箭头函数中 this 的行为与常规函数的 this 行为有很大不同。thisthis无论如何执行或在何处执行，箭头函数内部的 this 值始终等于外部函数的 this 值。换句话说，箭头函数可按词法解析 this，箭头函数没有定义自己的执行上下文。thisthisthis在以下示例中，myMethod() 是箭头函数 callback() 的外部函数：myMethod()callback()
const myObject = {
myMethod(items) {

console.log(this); // logs "myObject"


const callback = () => {

console.log(this); // logs "myObject"


};

items.forEach(callback);
}
};

myObject.myMethod([1, 2, 3]);
const myObject = {
myMethod(items) {

console.log(this); // logs "myObject"


const callback = () => {

console.log(this); // logs "myObject"


};

items.forEach(callback);
}
};

myObject.myMethod([1, 2, 3]); 箭头函数 callback() 中的 this 值等于外部函数 myMethod() 的 this。callback()thismyMethod()thisthis 词法解析是箭头函数的重要功能之一。在方法内部使用回调时，要确保箭头函数没有定义自己的 this：不再有 const self = this 或者 callback.bind(this) 这种解决方法。thisthisconst self = thiscallback.bind(this)2.构造函数2.1 常规函数如上一节所述，常规函数可以轻松的构造对象。例如用 Car() 函数创建汽车的实例：Car()
function Car(color) {
this.color = color;
}

const redCar = new Car('red');
redCar instanceof Car; // => true
function Car(color) {
this.color = color;
}

const redCar = new Car('red');
redCar instanceof Car; // => trueCar 是常规函数，使用关键字 new 调用时会创建 Car 类型的新实例。CarnewCar2.2 箭头函数this 词法解决了箭头函数不能用作构造函数。this如果你尝试调用带有 new 关键字前缀的箭头函数，则 JavaScript 会引发错误：new
const Car = (color) => {
this.color = color;
};

const redCar = new Car('red'); // TypeError: Car is not a constructor
const Car = (color) => {
this.color = color;
};

const redCar = new Car('red'); // TypeError: Car is not a constructor 调用 new Car('red')（其中 Car 是箭头函数）会抛出 TypeError: Car is not a constructor。new Car('red')CarTypeError: Car is not a constructor3. arguments 对象arguments3.1 常规函数在常规函数的主体内部，arguments 是一个特殊的类似于数组的对象，其中包含被调用函数的参数列表。arguments让我们用 3 个参数调用 myFunction 函数：myFunction
function myFunction() {
console.log(arguments);
}

myFunction('a', 'b'); // logs { 0: 'a', 1: 'b'}
function myFunction() {
console.log(arguments);
}

myFunction('a', 'b'); // logs { 0: 'a', 1: 'b'}类似于数组对象的 arguments 中包含调用参数：'a' 和 'b'。arguments'a''b'3.2箭头函数另一方面，箭头函数内部未定义 arguments 特殊关键字。arguments用词法解析 arguments 对象：箭头函数从外部函数访问 arguments。argumentsarguments让我们试着在箭头函数内部访问 arguments：arguments
function myRegularFunction() {
const myArrowFunction = () => {


console.log(arguments);
}
myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // logs { 0: 'a', 1: 'b' }
function myRegularFunction() {
const myArrowFunction = () => {


console.log(arguments);
}
myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // logs { 0: 'a', 1: 'b' }箭头函数 myArrowFunction() 由参数 'c', 'd' 调用。在其主体内部，arguments 对象等于调用 myRegularFunction() 的参数： 'a', 'b'。myArrowFunction()'c''d'argumentsmyRegularFunction()'a''b'如果你想访问箭头函数的直接参数，可以使用剩余参数 ...args：...args
function myRegularFunction() {
const myArrowFunction = (...args) => {


console.log(args);
}
myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // logs { 0: 'c', 1: 'd' }
function myRegularFunction() {
const myArrowFunction = (...args) => {


console.log(args);
}
myArrowFunction('c', 'd');
}

myRegularFunction('a', 'b'); // logs { 0: 'c', 1: 'd' }剩余参数 ... args 接受箭头函数的执行参数：{ 0: 'c', 1: 'd' }。... args{ 0: 'c', 1: 'd' }4.隐式返回4.1常规函数使用 return expression 语句从函数返回结果：return expression
function myFunction() {
return 42;
}

myFunction(); // => 42
function myFunction() {
return 42;
}

myFunction(); // => 42如果缺少 return 语句，或者 return 语句后面没有表达式，则常规函数隐式返回 undefined：returnundefined
function myEmptyFunction() {
42;
}

function myEmptyFunction2() {
42;
return;
}

myEmptyFunction(); // => undefined
myEmptyFunction2(); // => undefined
function myEmptyFunction() {
42;
}

function myEmptyFunction2() {
42;
return;
}

myEmptyFunction(); // => undefined
myEmptyFunction2(); // => undefined4.2箭头函数可以用与常规函数相同的方式从箭头函数返回值，但有一个有用的例外。如果箭头函数包含一个表达式，而你省略了该函数的花括号，则将显式返回该表达式。这些是内联箭头函数
const increment = (num) => num + 1;

increment(41); // => 42
const increment = (num) => num + 1;

increment(41); // => 42increment() 仅包含一个表达式：num + 1。该表达式由箭头函数隐式返回，而无需使用 return 关键字。increment()num + 1return5. 方法5.1 常规函数常规函数是在类上定义方法的常用方式。在下面 Hero 类中，用了常规函数定义方法 logName()：HerologName()
class Hero {
constructor(heroName) {

this.heroName = heroName;
}

logName() {
console.log(this.heroName); }}

const batman = new Hero('Batman');
class Hero {
constructor(heroName) {

this.heroName = heroName;
}

logName() {
console.log(this.heroName); }}

const batman = new Hero('Batman');通常把常规函数用作方法。有时你需要把该方法作为回调提供给 setTimeout() 或事件监听器。在这种情况下，你可能会很难以访问 this 的值。setTimeout()this例如用 logName() 方法作为 setTimeout() 的回调：logName()setTimeout()
setTimeout(batman.logName, 1000);
// after 1 second logs "undefined"
setTimeout(batman.logName, 1000);
// after 1 second logs "undefined"1 秒钟后，undefined 会输出到控制台。 setTimeout()执行 logName 的简单调用（其中 this 是全局对象）。这时方法会与对象分离。undefinedsetTimeout()logNamethis让我们手动把 this 值绑定到正确的上下文：this
setTimeout(batman.logName.bind(batman), 1000);
// after 1 second logs "Batman"
setTimeout(batman.logName.bind(batman), 1000);
// after 1 second logs "Batman"batman.logName.bind(batman) 将 this 值绑定到 batman 实例。现在，你可以确定该方法不会丢失上下文。batman.logName.bind(batman)thisbatman手动绑定 this 需要样板代码，尤其是在你有很多方法的情况下。有一种更好的方法：把箭头函数作为类字段。this5.2 箭头函数感谢类字段提案（目前在第3阶段），你可以将箭头函数用作类中的方法。类字段提案与常规函数相反，现在用箭头定义的方法能够把 this 词法绑定到类实例。this让我们把箭头函数作为字段：
class Hero {
constructor(heroName) {

this.heroName = heroName;
}

logName = () => {


console.log(this.heroName);
}
}

const batman = new Hero('Batman');
class Hero {
constructor(heroName) {

this.heroName = heroName;
}

logName = () => {


console.log(this.heroName);
}
}

const batman = new Hero('Batman');现在，你可以把 batman.logName 用于回调而无需手动绑定 this。 logName() 方法中 this 的值始终是类实例：batman.logNamethislogName()this
setTimeout(batman.logName, 1000);
// after 1 second logs "Batman"
setTimeout(batman.logName, 1000);
// after 1 second logs "Batman"6. 总结了解常规函数和箭头函数之间的差异有助于为特定需求选择正确的语法。常规函数中的 this 值是动态的，并取决于调用方式。是箭头函数中的 this 在词法上是绑定的，等于外部函数的 this。thisthisthis常规函数中的 arguments 对象包含参数列表。相反，箭头函数未定义 arguments（但是你可以用剩余参数 ...args 轻松访问箭头函数参数）。argumentsarguments...args如果箭头函数有一个表达式，则即使不用 return 关键字也将隐式返回该表达式。return最后一点，你可以在类内部使用箭头函数语法定义去方法。粗箭头方法将 this 值绑定到类实例。this不管怎样调用胖箭头方法，this 始终等于类实例，在回调这些方法用时非常有用。this感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》JavaScript常用函数技巧汇总javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。