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

箭头函数

箭头函数中的This

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

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

var factory = function () {
this.a = 'a';
this.b = 'b';
this.c = {
    a: 'a+',
    b: function () {
        return this.a;
    	}
	}
};
console.log(new factory().c.b());//输出'a+'.

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

下面是箭头函数:

var factory = function () {
this.a = 'a';
this.b = 'b';
this.c = {
    a: 'a+',
    b: () => {
        return this.a;
	    }
	}
};
console.log(new factory().c.b());//输出的是'a'

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

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

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

这是因为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的，可以用…来代替。