// 要點：1.箭頭函式 2.this繫結 // 一.箭頭函式 // 1.ES6新增一個使用(=>)箭頭符號定義函式的語法特徵 // let fn=name=>name; // console.log(fn('Mr.Lee')); // 翻譯成函式程式碼為： // let fn=function(name){ // return name; // } // 2.箭頭函式也可以傳遞兩個或以上的引數，並實現運算後返回 // let fn=(x,y)=>x+y; // console.log(fn(10,20)); // 翻譯成函式程式碼： // let fn=function(x,y){ // return x+y; // } // 3.若定義的函式，不需要傳參，可用()括號方式直接返回 // let fn=()=>'Mr.Lee'; // console.log(fn()); // 翻譯成函式： // let fn=function(){ // return 'Mr.Lee'; // } // 4.函式體需要更復雜的操作，可以將箭頭符號右邊使用傳統函式體 // let fn=(x,y)=>{ // return x+y; // } // console.log(fn(10,20)); // 5.若箭頭符號右邊是物件，返回的是物件，則需要用圓括號包含著 // let fn=name=>({name:name,age:100}); // console.log(fn('Mr.Lee').name); // 翻譯成函式 // let fn=function(name){ // return{ // name:name, // age:100 // } // }; // console.log(fn('Mr.Lee').name); // 6.若箭頭符號左邊是物件作為引數，右邊是物件的屬性運算，也支援 // let fn=({name,age})=>name+','+age; // console.log(fn({name:'Mr.Lee',age:100})); // 7.自我立即執行函式，也可以使用箭頭函式來建立 // ((name)=>{ // console.log(name); // })('Mr.Lee'); // 翻譯成函式程式碼 // (function(name){ // console.log(name); // })('Mr.Lee'); // 二.繫結this // 1.ES6之前有個this指向的問題 // let obj={ // name:'Mr.Lee', // age:100, // fn:function(){ // // console.log(this); // // setTimeout(function(){ // // console.log(this.name+','+this.age);undefined // // },500) // let that=this; // setTimeout(()=>{ // console.log(that.name); // },500) // } // } // obj.fn(); // 2.上例，this全域性指向window，在某個物件內部指向當前物件 // 3.當obj物件下包含類似setTimeout函式內部，this指向出問題 // 4.Web環境下，它指向window，node環境下它指向setTimeout // 5.通俗做法，將this在 setTimeout外部進行賦值儲存 // 6.箭頭函式的出現，徹底解決this在內部的指向問題，直接指向我們所需要的 // 7.箭頭函式中this是最外層定義的函式繫結，不受內部影響 // let obj={ // name:'Mr.Lee', // age:100, // fn:function(){ // setTimeout(()=>{ // console.log(this); // console.log(this.name+','+this.age); // },500) // } // } // obj.fn();