ES6中的箭头函数部分总结(This)

忘是亡心i 2023-05-30 08:58 11阅读 0赞

# 箭头函数 #

## 箭头函数中的This ##

1.  箭头函数中的this是确定好目标的(ES5中的this是谁调用，指向谁)，即ES6中的this是定义的时候就已经确定好的。
2.  箭头函数中的This总是指向其父级上下文环境(也就是父级的环境)。
3.  箭头函数是不可以用new的，也就是不能作为构造函数(因为箭头函数里根本就没有this)。同时也是无法使arguments参数(想使用可以用rest参数来代替)。
4.  个人理解：普通函数就是指向调用的对象，没有调用的对像的话一般就默认是windows或者是undefined。而在箭头函数中，由于箭头函数本身是没有this的，所以箭头函数会找父级的上下文环境，把上下文环境当做自己的this来源(换句话说就说普通函数里，谁调用this就指向谁，箭头函数里是我在什么环境，我就指向什么环境)。

第一个案例:下面是一个普通函数：

> 这是因为b()这个函数是被c调用的，所以this就会在c里找，即’a+’。

下面是箭头函数:

> 这是因为b本身是没有this的，所以要先找b的父级，即c。而c的上下文环境都是在factory里，所以this的指向就是factory，而factory中的a即’a’,所以输出’a’。

第二个案例:下面是一个普通函数:

> 这是因为foo中的this是在一个定时器中，且被windows调用，所以this会指向windows。即windows中的names=‘小张2’。

下面是箭头函数：

var names = "小张2";
    let obj = {
    thist: this,

names: "小张",
    foo: function () {
        setInterval(() => {
            console.log(this.names)
       		}, 1000)
    	}
    };
    obj.foo();//输出小张

> 首先这是一个箭头函数，所以this会先找父级，父级很明显是foo，foo的上下文环境是在obj中。所以this.names即为小张。

\#\#箭头函数的结构()=>\{\}

1.  箭头函数的基本结构是`()=>{}`
2.  当没有参数的时候()是不可以省略的，即()=>\{\},如果返回的值是一个固定的值可以不要\{\}，例如我只返回2的话可以这样写 `var a=()=>2;`
3.  单个参数的话()是可以省略的`var sum=b=>2;`，多个参数`var sum=(a,b)=>2;`,结果不固定的话`var sum=(a,b)=>a+b;`。
4.  如果返回值是一个对象的话必须要在大括号外加一个小括号`({})`,即`var obj=()=>({'a':2});`
5.  形参是可以赋予一个默认值的,赋值的方式就是在参数后面加一个等于号跟一个默认值。例如`sum=(a==1,b==2)=>a+b`
6.  形参如果赋予默认值，在函数体里不能用let和const再次赋值，否则会报错。
7.  箭头函数中在不确定参数数量的时候是不能用arguments的，可以用…来代替。