ES6之浅谈箭头函数

ES6新语法之箭头函数

箭头函数的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
语法：
箭头函数
(参数1,参数2…) => {
函数体
}

• 1. 箭头函数基本形式
  (1). 如果参数只有一个，可以省略小括号 ：参数 => {}

const print = num => {
	console.log(num);
}
print(1000)

(2).如果箭头函数只有一条返回语句，可以省略花括号，可以省略return : 参数 => 返回值

const isOdd = num => {
 	return num % 2 !== 0;
}

(3).如果返回值是一个对象的时候,就会认为成函数体,把返回值变成表达式的形式.

const obj = (a,b) => 
		({
			a : a,
			b : b
		})	
console.log( obj(1,2) )

• 2. 箭头函数的特点
  (1). 箭头函数this为父作用域的this，不是调用时的this
  箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
  普通函数的this指向调用它的那个对象。

let person = {
    name:'jike',
    init:function(){
        //为body添加一个点击事件，看看这个点击后的this属性有什么不同
        document.body.onclick = ()=>{
            alert(this.name);//?? this在浏览器默认是调用时的对象,可变的？                  
        }
    }
}
person.init();

这题中，init是function，以person.init调用，其内部this就是person本身，而onclick回调是箭头函数，
其内部的this，就是父作用域的this，就是person，能得到name。

(2). 箭头函数不能作为构造函数，不能使用new

//构造函数
function Person(p){
    this.name = p.name;
}
//用箭头函数作为构造函数
var Person = (p) => {
    this.name = p.name;
}
//由于this必须是对象实例，而箭头函数是没有实例的，此处的this指向别处，不能产生person实例。

(3). 箭头函数没有arguments，caller，callee

/*常规函数使用arguments*/
function test1(a){
  console.log(arguments);   //1
}
/*箭头函数不能使用arguments*/
var test2 = (a)=>{console.log(arguments)}  //ReferenceError: arguments is not defined
/*箭头函数使用reset参数...解决*/
let test3=(...a)=>{console.log(a[1])} //22

test1(1);
test2(2);
test3(33,22,44);

(4).箭头函数通过call和apply调用，不会改变this指向，只会传入参数

var obj = {
  value:1,
  add:function(a){
    var f = (v) => v + this.value; //a==v,3+1
    return f(a);
  },
  addThruCall:function(a){
    var f = (v) => v + this.value; //此this指向obj.value
    var b = {value:2};
    return f.call(b,a); //f函数并非指向b,只是传入了a参数而已
    
  }
}
 
console.log(obj.add(3));    //4
console.log(obj.addThruCall(4));    //5

(5). 箭头函数没有原型属性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}

注意：
1.箭头函数返回对象时，要加一个小括号
2.箭头函数不能作为Generator函数，不能使用yield关键字
3.箭头函数不能换行