这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 Javascript 中 带名 匿名 箭头函数的重要区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧
带名函数是指函数显示地给出了一个名字的函数,function abs(x){}。匿名函数是指函数只带有 function 这个关键字,而没有像 abs 这种函数名称的函数,如 function(){}。ES6 标准新增了一种新的函数:Arrow Function(箭头函数)箭头函数表面上相当于匿名函数,并且简化了函数定义。它们各自的区别是什么呢?
1 带名和匿名函数的区别
区别:匿名函数需要讲地址赋值给另一个变量 let a,然后再用 a 来调用函数;而带名函数因为显示地给出了函数名称,所以可以直接用这个函数名称调用。
带名函数返回值是函数体内的返回值,如 abs(x) 函数的返回值是 number 变量。函数调用时,直接 abs(6) 调用,这个非常好理解。
- function abs(x){
- if(x>=0){
- return x;
- }else{
- return -x;
- }
- }
但是匿名函数呢?如下所示,函数未显示地给出一个函数名称,但是此处的 abs 被赋值为这个匿名函数的地址,所以使用时可以直接用 abs(-3),诸如此类的调用。
- let abs=function(x){
- if(x>=0){
- return x;
- }else{
- return -x;
- }
- }
2 箭头函数
ES6 标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫 Arrow Function?因为它的定义用的就是一个箭头。箭头函数表面上相当于匿名函数,并且简化了函数定义。
箭头函数有两种格式,一种是只包含一个表达式,连 {…} 和 return 都省略掉了。
- x => x * x
上面的箭头函数相当于一个匿名函数 ""
- function (x) {
- return x * x;
- }
还有一种可以包含多条语句,这时候就不能省略 {…} 和 return:
- (x,y) => {
- if (x > 0) {
- return x + y;
- }
- else {
- return -x + y;
- }
- }
3 箭头函数和匿名函数的不同
箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的 this 是词法作用域,由上下文确定。
调用函数
和调用
- obj1.getAge(2017)
会得到相同的结果吗?
- obj2.getAge(2017)
obj1 中 fn 函数,由于 Javascript 函数对 this 绑定的错误处理,得不到预期的结果,this.birth 指向 window 或 undefined。
但是 obj2,fn 函数是箭头函数,箭头函数完全修复了 this 的指向,this 总是指向词法作用域,也就是外层调用者 obj2。
- var obj1 = {
- birth: 1990,
- getAge: function (year) {
- let fn=function(y){
- return y - this.birth; // this指向window或undefined
- };
- return fn(year);
- }
- };
- var obj2 = {
- birth: 1990,
- getAge: function (year) {
- var fn = (y) => y - this.birth; // this.birth为1990
- return fn(year);
- }
- };
4 总结
和带名函数相比,匿名函数需要讲地址赋值给另一个变量 let a,然后再用 a 来调用函数;和匿名函数比,箭头函数完全修复了 this 的指向,this 总是指向词法作用域。
以上所述是小编给大家介绍的 Javascript 中 带名 匿名 箭头函数的重要区别,希望对大家有所帮助,如果有任何疑问欢迎给我留言,小编会及时回复大家的!
来源: http://www.phperz.com/article/17/0601/328114.html