ES6——函数、箭头函数、箭头函数中的this

1，ES6中，函数添加哪些特性：支持参数有默认值，支持剩余参数，支持参数展开运算，新建箭头函数（IE不支持箭头函数）

2，支持参数默认值：在为传参数值或传递的参数值是undefined的情况下，参数取默认值。

//参数b有默认值 'hello'
function test(a, b='hello'){
    console.log(a);
    console.log(b);
}
//未传参数给参数b
test('hi');
//'hi'
//'hello'
//传递 undefined作为参数b的值
test('hi', undefined);
//'hi'
//undefined
//null是个有效的值，于是被赋给了参数b
test('hi', null);
//'hi'
//null

3，支持剩余参数：剩余参数没有明确列出参数名的鲜明、具体、语义，参数剩余可用于当可能有多个参数的情况下或不确定调用时会传几个参数，类似于argumets，但又不同于arguments。

//当不确定参数个数时，可以考虑使用剩余参数
//args是个简单数组，与arguments变量不同。
function test(...args){
    console.log(args);
}
test(1, 4, 6);
//[1,4,6]


//剩余参数只能至于参数列表末尾，不然会报错。
function test(...args, a){
    console.log(args);
}
//SyntaxError: Rest parameter must be last formal parameter

//以下是正确的写法
//当剩余的参数个数小于0时，args是个空数组。
function test(a, b, ...args){
    console.log(a);
    console.log(b);
    console.log(args.length);
}
test('hi');
//'hi'
//undefined
//0

4，支持参数展开运算：

function test(a, b, c){
    console.log(a);
    console.log(b);
    console.log(c);
}
//调用函数时，参数展开运算，操作数必须是个可迭代对象
test(...[2, 1]);
//2
//1
//undefined

5，新建箭头函数（IE浏览器不支持箭头函数）：箭头函数在语法上比较简便，在不需要绑定this的情况下使用箭头函数如回调函数，有时会显得简便；在需要绑定this的情况下使用箭头函数，某些情况下是个不错的选择，如setTimeout、setInterval、返回函数。箭头函数没有自己的this，super，arguments 和 new.target变量，箭头函数的this是在定义时，拿到的this的值是什么就是什么，它没有普通函数中的this的取值规则；在箭头函数内访问arguments会报错（ReferenceError: arguments is not defined）；使用new.target会报错（SyntaxError: new.target expression is not allowed here），况且箭头函数不能像普通函数被当作构造函数；箭头函数没有prototype（undefined）；箭头函数不能像普通函数那样可以通过bind、apply、call绑定this参数，用在箭头函数中，this参数会被忽略；箭头函数不能用作函数生成器。其他的特点跟普通函数一样：

//箭头函数语法：---------
//最简单的是
var fn = x => x*x; //参数是x，隐式地返回表达式的值。
fn(6);
//36
//当没有接收参数或多个参数的时候，需要显示使用括号
() => console.log(hi);
(x, y) => x+y;
//当函数体是声明语句或多条语句时，需要用花括号括起代码形成代码块。
//不然会报错，即使是一条return语句。
//()=> return true; ()=> var a='kl'; //这都会报错。
//这个时候若要返回数据，需要显示地写上retrun 语句。
(x, y) => { let sum = x+y; console.log(sum); return sum; }; 

//需要注意的地方：--------------
//1,注意运算优先级解析规则，是这样的情况：
var conditionA;
conditionA || function(){}; //正常的表达式
conditionA || ()=> 7; //这会报错，需要用括号括起箭头函数
//SyntaxError: Malformed arrow function parameter list
conditionA || (()=> 7); //正常

//2,bind、apply、call调用函数
var test = (x)=> { console.log(this.a); console.log(x);};
var bindFn = test.bind({a: 'hi'});
bindFn(9);
//undefined //因为this的绑定的上下文环境是全局。
//'9'
test.apply({a: 'hi'}, [9]);
test.call({a: 'hi'}, 9);
//上面两行代码的结果跟使用bind函数的结果一样。

//3,当返回字面量对象时
() => {a: 9}; //这样没办法返回对象{a: 9}的，因为花括号被当作代码块
() => ({a: 9});
//or 
() => {return {a: 9}}; //相比之下，还是上一句的比较简洁。

//4,箭头函数不能使用super、new.target、arguments，因为会报错。
//本文章提到的普通函数是指非箭头函数的一般函数，
//new.target在直接调用函数时值是undefined，被当作构造函数执行，new.target是构造函数本身：
function Person(){
    console.log(new.target);
}
Person();
//undefined
new Person(); //new.target 是Person
//function Persion(){console.log(new.target)}
//5,prototype 为undefined

//像普通函数的其他特点如：支持参数有默认值，支持剩余参数，支持参数解构，闭包，递归等---------

6，箭头函数中，this的规则：那么，怎么确认箭头函数中的this绑定的是哪个作用域下的？？以下例子可以表明这一点：

//文档说箭头函数的this是在定义的时候确定它的值。
var a = 'Here, Hello';
//这种情况下，在定义obj的时候也在以下这个箭头函数，-------------
//它绑定的this是在定义的时候的上下文，global，在这里先当global是window，
//this.a 是window.a，所以：
var obj = {
    a: 'hi',
    b: () => {
        console.log(this.a);
    }
};
obj.b();
//'Here, Hello'

//但是下面这样就不同了-----------
var obj = {
    a: 'hi',
    b: function(){
        setTimeout( () => {
            console.log(this.a);
        });
    }
}
//下面语句运行到b函数体时，箭头函数定义时所处的上下文环境是b函数，而此时的this正是obj
obj.b();
//'hi'

//再来比较下面代码的操作：--------------
function Person(){
    this.a = 'construct';
    this.b = function(){
        console.log(this.a);
        return ()=> console.log(this.a);
    }
}
var person = new Person(); //按理说，this绑定的是person这个实例，那么以下的执行会是什么结果
var bFn = person.b; //b函数体未被执行，箭头函数还未定义
bFn()();//第一个括号调用b函数，箭头函数这时定义，但此时的b函数内的this指向变了，是window。
//'Here, Hello'
//'Here, Hello'
var nResult = person.b();//这种调用实例方法的方式，b方法里this是person，箭头这时定义
//'construct'
nResult();
//'construct'

//那么，以上的例子足以用于判断不同情况下箭头函数this的指向。
//这里提到的绑定，指向，this的值，上下文环境的这些词汇，且在广义下当它们是一个意思。
//狭义下，绑定，如bind方法为函数绑定this之后，返回一个this的值不会变函数，
//又如箭头函数的this在定义时绑定，之后不管在哪运行不变。
//this的指向，如apply、call方法可以暂时改变函数体内this的值，使this指向参数提供的对象。
//上下文环境，所处的一个环境，比如在函数体内也是一个环境。

7，其他文档（后面补上）

改变this的指向

函数中this的指向

8参考文档

MDN箭头函数

runoobES6函数