箭頭函數

1、箭頭函數介紹

//ES6
let fn=v=>v;
console.log(fn("好酷的箭頭函數！"));//好酷的箭頭函數！

//ES5
let fn=function(v){
    return v;
}
console.log(fn("好酷的箭頭函數！"));//好酷的箭頭函數！

 2、寫法

 如果只有一條語句，可以將{}和return省略掉

v=>v+v;
//相當於
function (v){.
    return v+v;
}

 如果語句為多條，則不可以省略{}和return

v=>{
    var sum=0;
    for(let i=0;i<v;i++){
        sum+=i;
    }
    return sum;
}

 當沒有參數或有多個參數時，需要用括號（）括起來:

（num1,num2)=>num1+num2;

 當省略{}和return時，如果返回的內容是一個對象，對象需要用括號（）括起來

()=>({name:"laoliu"});

 箭頭函數不能用於構造函數

//正常情況
var Box=function(age){
    this.myAge=age;
}
var obj=new Box(20);
console.log(obj.myAge);//20

//箭頭函數
var Box=age=>{
    this.myAge=age;
}
var obj=new Box(20);//Box is not a constructor
console.log(obj.myAge);

 箭頭函數沒有prototype屬性

var Foo = () => {};
console.log(Foo.prototype); // undefined

 箭頭函數不綁定arguments

var arguments = 42;
var fn = () => arguments;
console.log(fn()); // 42
function foo() {
var f = (i) => arguments[0]+i;
return f(2);
}
console.log(foo(1)); // 3

 箭頭函數不綁定this

window.color = "red";
//let 聲明的全局變量不具有全局屬性，即不能用window.訪問
let color = "green";
let obj = {
color: "blue",
getColor: () => {
return this.color;//this指向window
}
};
let sayColor = () => {
return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red

 箭頭函數無法使用 call（）或 apply（）來改變其運行的作用域

window.color = "red";
let color = "green";
let obj = {
　　color: "blue"
};
let sayColor = () => {
　　return this.color;
};
sayColor.apply(obj);//red

 

參考文獻：https://blog.csdn.net/u012149969/article/details/80261081