大家好，今天给各位分享箭头函数与普通函数的区别的一些知识，其中也会对箭头函数与普通函数的区别和联系进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
在JavaScript这门语言中，箭头函数和普通函数是两种非常常见的函数定义方式。它们在语法、功能以及应用场景上都有所不同。箭头函数与普通函数究竟有哪些区别呢？下面，我们就来详细解析一下这个问题。
一、定义方式的区别
1. 普通函数：
普通函数的定义方式相对简单，只需要使用`function`关键字。以下是普通函数的定义方式示例：
“`javascript
function sayHello() {
console.log(‘Hello, World!’);
}
“`
2. 箭头函数：
箭头函数是ES6引入的一种新的函数定义方式。它使用`箭头`（=>）来定义，语法更加简洁。以下是箭头函数的定义方式示例：
“`javascript
const sayHello = () => {
console.log(‘Hello, World!’);
}
“`
二、参数和返回值的区别
1. 普通函数：
普通函数可以定义多个参数，并且返回值可以通过`return`语句进行返回。以下是普通函数参数和返回值示例：
“`javascript
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 输出：3
“`
2. 箭头函数：
箭头函数与普通函数在参数和返回值方面有相似之处，但也存在一些差异。以下是箭头函数参数和返回值示例：
“`javascript
const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出：3
“`
在上述示例中，箭头函数只有一个参数，因此可以省略括号。如果箭头函数只有一个表达式，那么可以省略花括号和`return`语句。
三、`this`对象的区别
1. 普通函数：
在普通函数中，`this`对象会根据调用该函数的方式来确定其指向。以下是一个例子：
“`javascript
const person = {
name: ‘张三’,
sayName: function() {
console.log(this.name);
}
};
person.sayName(); // 输出：张三
“`
在上述示例中，`sayName`方法被直接调用，因此`this`指向`person`对象。
2. 箭头函数：
箭头函数中的`this`对象与普通函数有所不同。在箭头函数中，`this`对象在定义时就已确定，并且不会随着调用方式的变化而变化。以下是一个例子：
“`javascript
const person = {
name: ‘张三’,
sayName: () => {
console.log(this.name);
}
};
person.sayName(); // 输出：张三
“`
在上述示例中，`sayName`方法使用箭头函数定义，无论以何种方式调用，`this`对象始终指向定义时的上下文环境，即`person`对象。
四、构造函数的区别
1. 普通函数：
普通函数可以作为构造函数使用，即通过`new`关键字创建一个实例。以下是一个例子：
“`javascript
function Person(name) {
this.name = name;
}
const person = new Person(‘张三’);
console.log(person.name); // 输出：张三
“`
2. 箭头函数：
箭头函数不能作为构造函数使用。以下是一个错误示例：
“`javascript
const Person = (name) => {
this.name = name;
};
const person = new Person(‘张三’); // 报错：Person is not a constructor
“`
在上述示例中，由于箭头函数没有`this`对象，因此不能作为构造函数使用。
箭头函数与普通函数在定义方式、参数和返回值、`this`对象以及构造函数等方面存在一定的区别。在实际开发过程中，我们需要根据具体情况选择合适的函数定义方式。以下是箭头函数与普通函数的对比表格：
| 特点 | 普通函数 | 箭头函数 |
|---|---|---|
| 定义方式 | 使用`function`关键字 | 使用箭头（=>） |
| 参数和返回值 | 可以定义多个参数，并使用`return`语句返回值 | 可以定义多个参数，可以省略花括号和`return`语句（只有一个表达式时） |
| `this`对象 | `this`对象会根据调用方式来确定指向 | `this`对象在定义时就已确定，不会随着调用方式的变化而变化 |
| 构造函数 | 可以作为构造函数使用，通过`new`关键字创建实例 | 不能作为构造函数使用，无法创建实例 |
希望通过对箭头函数与普通函数的区别进行深入解析，能帮助大家更好地理解和应用这两种函数定义方式。在JavaScript开发过程中，根据实际情况选择合适的函数定义方式，能提高代码的可读性和可维护性。
箭头函数与普通函数的区别 什么是函数
1、箭头函数与普通函数的区别：外形不同:箭头函数使用箭头定义，普通函数中没有。箭头函数全都是匿名函数，普通函数可以有匿名函数，也可以有具名函数。箭头函数不能用于构造函数，普通函数可以用于构造函数，以此创建对象实例。
2、函数（function）的定义通常分为传统定义和近代定义，函数的两个定义本质是相同的，只是叙述概念的出发点不同，传统定义是从运动变化的观点出发，而近代定义是从集合、映射的观点出发。函数的近代定义是给定一个数集A，假设其中的元素为x，对A中的元素x施加对应法则f，记作f（x），得到另一数集B，假设B中的元素为y，则y与x之间的等量关系可以用y=f（x）表示，函数概念含有三个要素：定义域A、值域B和对应法则f。其中核心是对应法则f，它是函数关系的本质特征。
箭头函数的特点
下面一波栗子走起，读者自己对号入座：
栗子一(请在浏览器环境下测试，不要使用node)
栗子二
箭头函数会捕获其所在上下文的 this值，作为自己的 this值；
但是我觉得这条和上条其实是一条，还是捕获所在的上下文，比如下面这个例子：c是一个箭头函数，然后它的 this是指向window，这是为什么呢，因为箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window，就相当于上一条的例子：在d方法里面return的那个箭头函数捕获的是c:function(){}这个环境的this，而这个环境的this是obj。
栗子三
箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply(),比如栗子二中obj.d().call({ age: 20})//18，再来看稍微复杂的栗子：
PS：
箭头函数不能当做Generator函数,不能使用yield关键字
箭头函数不能换行SyntaxError: Unexpected token=>
普通函数的this指向调用它的那个对象
箭头函数的使用和this指向
(param1, param2,…, paramN)=>{ statements}
(param1, param2,…, paramN)=> expression
//相当于：(param1, param2,…, paramN)=>{ return expression;}
//当只有一个参数时，圆括号是可选的：
(singleParam)=>{ statements}
singleParam=>{ statements}
//没有参数的函数应该写成一对圆括号。
()=>{ statements}
arr= [20,1,34,2]，使用函数实现数组中的每项数据都乘2的操作，最后得到
arr= [40.2.68.4]
1.(param1)=>{}
2.param1=>{}只有一个参数时，可以省略圆括号
3.param1=>……当方法体内只有一个return语句时，可以省略方法体的花括号和return关键字
箭头函数没有自己的this，那他的this去哪里找？
箭头函数会继承自作用域链中上一层的this,也就是箭头函数会顺着他的作用域链，一层一层往上找，知道找到有this为止。
setTimeout().call(window),所以setTimeout中的this被call改变成window
第一个setTimeout被call改变this指向，this指向window
第二个setTimeout的箭头函数没有单独的this，向上寻找，找到上一层setTimeout的this,指向window
第三个同第一个一样指向window
第四个同第二个一样，只是第四个的上一层是箭头函数，箭头函数没有this，继续向上一层找，找到aaa()的this，aaa()由obj调用，this指向obj
OK，关于箭头函数与普通函数的区别和箭头函数与普通函数的区别和联系的内容到此结束了，希望对大家有所帮助。
