ES6 箭頭函式

 非箭頭函式與箭頭函式的寫法

//非箭頭函式寫法，函式宣告
function sum(a, b) {
    return a + b;
}
//非箭頭函式寫法，函式運算式
var sum = function(a,b){
    return a+b;
}
//箭頭函式寫法 把箭頭函式賦給一個變數，省略function，（）括號里面是引數，當引數是一個時,（）括號可省略
let sum = (a, b) => {

省略不寫return ，仍有回傳值，可回傳陣列，物件，函式，，，

寫法：去掉大括號，直接把要回傳的值寫到箭頭的后面，但當回傳物件是，{name:'zwq'}會被當成一個箭頭函式的{}，所以，當回傳物件時，可用運算式包裹上，

let sum = (a, b) =>  a + b;   //回傳 a+b

使用箭頭函式簡化代碼，如下代碼

function sum(x) {
    return function (y) {
        return function (z) {
            return x + y + z;
        }
    }
}
var sum1 = sum(1);
var sum2 = sum(2);
console.log(sum2(3));

可以寫成：箭頭函式可以省略return ，并把大括號去掉，引數是一個的時候也可以去掉，

let sum = x => y => z =>  x + y + z

console.log(sum(1)(2)(3));

引數不能重復命名

function sum(a,a){
    console.log(a);    //不報錯
}
let sum  = (a,a) =>{
    console.log(a);    //報錯
}

箭頭函式不能new，并且沒有原型

let Person = () => {
    this.a = 10;
}
new Person();   // Uncaught TypeError: Person is not a constructor

箭頭函式的arguments和this的值是外圍最近一層非箭頭函式的arguments和this值，是詞法作用域下，也就是說是你寫代碼時你眼睛直觀看到的，即使這個函式執行時被保存到外部，

如下代碼箭頭函式外部沒有非箭頭函式，所以沒有arguments，

let a = (x,y) =>{
    console.log(arguments);  //Uncaught ReferenceError: arguments is not defined
}
a(3,4);

當前箭頭函式外面套著非箭頭函式，不管執行時函式是否保存到外部，只是當前肉眼看到的詞法作用域，當前里面的箭頭函式外面套著非箭頭函式，所以可以拿到外部非箭頭函式的arguments.

function fn(a,b){
    return (x,y) =>{
        console.log(arguments,x,y);
    }
}
fn(3,4)(5,6);    //[3,4] 5 6

例如有這樣的需求，我們定義一個函式fn()并且在fn里面定義了其他函式,在這個函式里面需要接受fn函式的引數，當傳入引數不固定時，我們接受arguments，但是每個函式的arguments都是自己函式的引數的arguments，我們需要外部函式的arguments只能用一個變數先保存起來，

function fn(){
   // var a = arguments;
    return function(){
　　　　　console.log(a);   //[3,4]
        console.log(arguments)  //一個空的arguments
    }
}
fn(3,4)();

這是箭頭函式的特點，箭頭函式的arguments只能由外部非箭頭函式的arguments決定

function fn(){
    return () =>{
        console.log(arguments);
    }
}
fn(3,4)();   //[3,4]   

this指向問題

普通函式的this，誰呼叫它，他就指向誰， 如下列印的是物件里的innerObj；

var  a = 'outObj';   
var  obj = {
    a:'innerObj',
    fn:function(){ 
        console.log(this.a);   //innerObj
    }
}
obj.fn();

箭頭函式的this跟arguments一樣是外圍離自己最近一層的非箭頭函式，當箭頭函式外面沒有非箭頭函式時，this指向window

var  a = 'outObj';   //注意 變數宣告不能用let，如果用let a 的話會列印undefined，因為當前this指向全域，但通過let定義的屬性不會定義成window屬性

let obj = {
    a:'innerObj',
    fn:()=>{ 
        console.log(this.a);   //  outObj因為this和arguments的值取決于外面最近一層的非箭頭函式，而當前的箭頭函式外面沒有箭頭函式所以this系結在全域上，
    }
}
obj.fn();

如果想列印物件obj里面的屬性需要在箭頭函式外面套一個非箭頭函式

將變數回傳到外部也是一樣
let obj = {
    a:'innerObj',
    fn(){
        let sum = () =>{
            console.log(this.a);   //innerObj
        }
        return sum;
    }
}
let outerSum = obj.fn();

當用普通函式是使用settimeout，由于沒有物件呼叫settimeout里面的函式，因此他指向的window，利用保存外部函式this，或者用call改變this指向來改變this，

let obj = {
    ms:'abx',
    fn(){
            var self = this;
        　　 setTimeout(function(){
           　　  console.log(this.ms);   
             　　console.log(self.ms);   或者改變this指向  
       　　 },500)
    }
}
obj.fn();

使用箭頭函式解決this指向問題

let obj = {
    ms:'abc',
    fn(){
        setTimeout(() => {
            console.log(this.ms);  //abc
        }, 500);
    }
}
obj.fn();

標籤：JavaScript

上一篇：JavaScript 字串是否包含某個字串

下一篇：Ueditor 關于視頻上傳相關問題