箭头函数与function的区别

1.箭头函数与function定义函数的写法不同

//function
function fn(a, b){return a + b;
}
//arrow function
var foo = (a, b)=>{ return a + b };

2.this的指向不同

使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。

//function定义的函数
function fucA() {console.log(this);
}
var objA = { aa: fucA };
fucA(); //Window
objA.aa() //objA { aa: fucA }console.log('=============')
//箭头函数定义的函数
let fucB= ()=>{ console.log(this)}
var objB = { aa: fucB };
fucB();//Window
objB.aa()//Windowconsole.log('=============')
//函数表达式
let fucC=function () {console.log(this);
}
var objC = { aa: fucC };
fucC(); //Window
objC.aa() //objC { aa: fucC }

3.普通函数可以作为构造函数，箭头函数不可以作为构造函数，不能new

function Person(name, age) {this.name = name;this.age = age;
}
let admin = new Person("恩诺小弦", 18);
console.log(admin.name);
console.log(admin.age);let Student=(name,age)=>{this.name=name;this.age=age;
}
let stu = new Student("学生", 10);
console.log(stu.name);
console.log(stu.age);

4.普通函数可以使用arguments参数和args参数，箭头函数不能使用arguments参数，可以使用args参数（结合三点运算符使用）

function person(...args){console.log('普通函数')console.log('args========>',args)console.log('arguments======>',arguments)
}
person(1,2,3,4,5,6)let student=(...args)=>{console.log('箭头函数')console.log('args========>',args)console.log('arguments======>',arguments)
}
student(1,2,3,4,5,6)

输出结果

5.普通函数可以是匿名函数或者具体名函数，箭头函数只能是匿名函数（赋值给变量）

箭头函数与function的区别相关推荐

ES6---箭头函数()={} 与function的区别（转载）
1.箭头函数与function定义函数的写法: //function function fn(a, b){return a + b; } //arrow function var foo = (a, ...
JavaScript 箭头函数与function函数区别
结合以下注释理解代码,有空再分步骤讲解 // 执行正常 function 方法名() 会直接将函数提升到顶部所以此步成功 normalFun(2); // 执行失败因var会将arrowFun变量提 ...
ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
石川es6课程---4、箭头函数
石川es6课程---4.箭头函数一.总结一句话总结: 相当于函数的简写,类似python lambda 函数,先了解即可 let show1 = function () {console.log( ...
箭头函数中的this的使用
什么时候使用箭头函数问题: 箭头函数中的this是如何查找的了? 答案: 向外层作用域中, 一层层查找this, 直到有this的定义. <!DOCTYPE html> <html ...
九、ES6的箭头函数
一.箭头函数的基本使用 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
JavaScript 箭头函数
文章目录箭头函数语法示例 1:无参数的箭头函数示例 2:带一个参数的箭头函数示例 3:作为表达式的箭头函数示例 4:多行箭头函数 this 与箭头函数在常规函数中在箭头函数中参数绑定 ...
10分钟理解ES6箭头函数
前言面试中,ES6 是一大考点,当被问到箭头函数时,我们都会说:箭头函数很好用,而且再也不用操心 this 的指向了. 面试官:箭头函数是挺好用的,那有哪些不适合使用箭头函数的场景呢? 箭头函数在大 ...
JavaScript箭头函数（Arrow Function）
2019独角兽企业重金招聘Python工程师标准>>> ES6标准新增了一种新的函数:Arrow Function(箭头函数). 更简洁的语法我们先来按常规语法定义函数: func ...

箭头函数与function的区别

1.箭头函数与function定义函数的写法不同

2.this的指向不同

3.普通函数可以作为构造函数，箭头函数不可以作为构造函数，不能new

4.普通函数可以使用arguments参数和args参数，箭头函数不能使用arguments参数，可以使用args参数（结合三点运算符使用）

5.普通函数可以是匿名函数或者具体名函数，箭头函数只能是匿名函数（赋值给变量）

箭头函数与function的区别相关推荐

最新文章

热门文章