箭头函数与传统函数有何本质区别，深入解析？
- 内容介绍
- 文章标签
- 相关推荐
本文共计936个文字，预计阅读时间需要4分钟。
传统函数和箭头函数的区别 + 深入理解箭头函数和传统函数的区别 + 箭头函数是借鉴自其他语言的一种表达式形式，如Java、C++等，具有类似的结构，也被称作Lambda表达式，即匿名函数。
传统函数和箭头函数的区别 深入理解箭头函数和传统函数的区别箭头函数是从其它语言借鉴过来的一种表达形式，如java,c++等都有类似的表达形式，也被称为lambda表达式，即匿名函数。
那么js箭头函数是什么呢？它和传统函数又有什么区别你？
// 传统函数
const fn_a = function(a){
return a
}
console.log(fn_a(1)) //打印 1
// 箭头函数
const fn_b = b => b
console.log(fn_b(1)); //打印 1
箭头函数函数相对于传统函数，它有着更简洁的表现形式，除了function的定义之外，连{ ... }和return都省略掉了。
不同的场景下箭头函数还有着不一样的表现形式：
// 有内部逻辑时
x => {
x = "我想变化一下";
return x;
}
// 多个参数
(x, y) => x + y
// 没有参数
() => "我的入参呢？"
二、没有arguments
// 传统函数
const a = function(){
return Array.from(arguments)
}
console.log(a(1,2,3)); //输出：[1,2,3]
// 箭头函数
const b = () => Array.from(arguments)
console.log(b(1,2,3)); // 报错，arguments is not defined
三、不能用作Generator函数
// 传统函数
const a = function*(){
return "我想成为Generator函数！"
}
console.log(a()); // 输出a{<suspended>}
// 箭头函数
const b = *() => "我想成为Generator函数！";
// 报错：Unexpected token '*'
const b = ()* => "我想成为Generator函数！";
// 报错：Unexpected token ')'
箭头函数是无法定义成Generator函数的，因此yield也是无法使用的。
四、不能使用new命令// 传统函数
const A = function(){
console.log("A");
}
const aa = new A();
// 箭头函数
const B = () => {
console.log("B");
}
const bb = new B(); //报错：B is not a constructor
五、不能调用apply、call
// 箭头函数
const man = {
sex:"男",
a: function(){
console.log(this.sex);
},
b: () => {
console.log(this.sex);
},
}
man.a.apply(man); //男
man.b.apply(man); //undefined
man.a.call(man); //男
man.b.call(man); //undefined
传统函数可以通过apply、call改变函数的this指向，而箭头函数不可以。
这是传统函数和箭头函数最主要的差异。也是箭头函数出来的意义所在。
我们在例子中去看它们差异：
var context = "window"
var obj = {
context: "obj",
fn: function(){
console.log(this.context); //"obj"
const _this = this;
function a(){
console.log(this.context); //"window"
console.log(_this.context); //"obj"
}
const b = () => {
console.log(this.context); //"obj"
console.log(_this.context); //"obj"
}
a();
b();
}
}
obj.fn();
在传统函数执行的时候，this的指向是根据上下文执行环境来确定的，上述例子我们分步看this：
①：obj.fn();从全局上下文栈进入obj.fn的执行栈，由于是从obj引用fn上下文栈，因此此时this是obj对象；
②：obj.fn执行过程中创建了上下栈a；
③：执行a方法，执行时由于是在全局环境中，所以此时this指向的是window。
总结：
传统函数的创建是会开辟一个栈内存的，因此它的this指向是根据栈内存被调用时所在上下文环境所决定的，而箭头函数是不会开辟一个栈内存的，它不像传统函数是一个引用类型，因此它的this指向也是在它被创建时候就固定了，固定指向创建它的内存块的上一层内存块，如：window引用了b内存，b内存创建了箭头函数，此时this指向就是window。
这也是箭头函数无法被apply、call改变this指向，也不能执行new命令，因为这些都是服务于有内存指向的引用类型。
本文共计936个文字，预计阅读时间需要4分钟。
传统函数和箭头函数的区别 + 深入理解箭头函数和传统函数的区别 + 箭头函数是借鉴自其他语言的一种表达式形式，如Java、C++等，具有类似的结构，也被称作Lambda表达式，即匿名函数。
传统函数和箭头函数的区别 深入理解箭头函数和传统函数的区别箭头函数是从其它语言借鉴过来的一种表达形式，如java,c++等都有类似的表达形式，也被称为lambda表达式，即匿名函数。
那么js箭头函数是什么呢？它和传统函数又有什么区别你？
// 传统函数
const fn_a = function(a){
return a
}
console.log(fn_a(1)) //打印 1
// 箭头函数
const fn_b = b => b
console.log(fn_b(1)); //打印 1
箭头函数函数相对于传统函数，它有着更简洁的表现形式，除了function的定义之外，连{ ... }和return都省略掉了。
不同的场景下箭头函数还有着不一样的表现形式：
// 有内部逻辑时
x => {
x = "我想变化一下";
return x;
}
// 多个参数
(x, y) => x + y
// 没有参数
() => "我的入参呢？"
二、没有arguments
// 传统函数
const a = function(){
return Array.from(arguments)
}
console.log(a(1,2,3)); //输出：[1,2,3]
// 箭头函数
const b = () => Array.from(arguments)
console.log(b(1,2,3)); // 报错，arguments is not defined
三、不能用作Generator函数
// 传统函数
const a = function*(){
return "我想成为Generator函数！"
}
console.log(a()); // 输出a{<suspended>}
// 箭头函数
const b = *() => "我想成为Generator函数！";
// 报错：Unexpected token '*'
const b = ()* => "我想成为Generator函数！";
// 报错：Unexpected token ')'
箭头函数是无法定义成Generator函数的，因此yield也是无法使用的。
四、不能使用new命令// 传统函数
const A = function(){
console.log("A");
}
const aa = new A();
// 箭头函数
const B = () => {
console.log("B");
}
const bb = new B(); //报错：B is not a constructor
五、不能调用apply、call
// 箭头函数
const man = {
sex:"男",
a: function(){
console.log(this.sex);
},
b: () => {
console.log(this.sex);
},
}
man.a.apply(man); //男
man.b.apply(man); //undefined
man.a.call(man); //男
man.b.call(man); //undefined
传统函数可以通过apply、call改变函数的this指向，而箭头函数不可以。
这是传统函数和箭头函数最主要的差异。也是箭头函数出来的意义所在。
我们在例子中去看它们差异：
var context = "window"
var obj = {
context: "obj",
fn: function(){
console.log(this.context); //"obj"
const _this = this;
function a(){
console.log(this.context); //"window"
console.log(_this.context); //"obj"
}
const b = () => {
console.log(this.context); //"obj"
console.log(_this.context); //"obj"
}
a();
b();
}
}
obj.fn();
在传统函数执行的时候，this的指向是根据上下文执行环境来确定的，上述例子我们分步看this：
①：obj.fn();从全局上下文栈进入obj.fn的执行栈，由于是从obj引用fn上下文栈，因此此时this是obj对象；
②：obj.fn执行过程中创建了上下栈a；
③：执行a方法，执行时由于是在全局环境中，所以此时this指向的是window。
总结：
传统函数的创建是会开辟一个栈内存的，因此它的this指向是根据栈内存被调用时所在上下文环境所决定的，而箭头函数是不会开辟一个栈内存的，它不像传统函数是一个引用类型，因此它的this指向也是在它被创建时候就固定了，固定指向创建它的内存块的上一层内存块，如：window引用了b内存，b内存创建了箭头函数，此时this指向就是window。
这也是箭头函数无法被apply、call改变this指向，也不能执行new命令，因为这些都是服务于有内存指向的引用类型。