Javascript带名、匿名、箭头函数区别

移动开发 waitig 405℃ 百度已收录 0评论

一、带名和匿名函数的区别

匿名函数需要将地址赋值给另一个变量a,然后再用a来调用函数;而带名的函数因为显示的给出了函数名,所以可以直接用这个函数名来调用。

1.带名函数的返回值是函数体内的返回值

function abs(x){
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

函数调用时直接调用abs()即可,如abs(6)。

2.匿名函数通过调用被赋值的变量来调用

let abs=function(x){ 
 if(x>=0){
  return x;
 }else{
  return -x;
 }
}

使用时可以使用abs(),如abs(3)

二、箭头函数

箭头函数有两种格式,一种是只包含一个表达式,连{ … }和return都省略掉了。

x => x * x

上面的箭头函数相当于一个匿名函数:

function (x) {
 return x * x;
}

还有一种可以包含多条语句,这时候就不能省略{ … }和return:

(x,y) => {
 if (x > 0) {
  return x + y;
 }
 else {
  return -x + y;
 }
}

三、箭头函数和匿名函数区别

普通函数的this

  1. this总是代表它的直接调用者,如obj.func,那么func中的this就是obj。
  2. 在默认情况下(非严格模式下,未使用’use strict’),没有找到直接的调用者,则this指的是window。
  3. 在严格模式下没有直接调用者的函数中的this是undefine。
  4. 使用call、apply、bind、绑定的,this指的是绑定的对象。

箭头函数中的this

默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window(即继承父级的this);

箭头函数看上去是匿名函数的一种简写,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

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);
 }
};
  • obj1中的fn函数,由于JavaScript函数对this绑定的错误处理,得不到预期的结果,this.birth指向window或undefined。
  • obj2,fn函数是箭头函数,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj2。

本文由【waitig】发表在等英博客
本文固定链接:Javascript带名、匿名、箭头函数区别
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)