關於es6的箭頭函數使用與內部this指向

特型介紹:箭頭函數是ES6新增的特性之一,它爲JS這門語言提供了一種全新的書寫函數的語法。程序員

'use strcit';
let arr = [1,2,3];
//ES5
let es5 = arr.map(function(n){
    return n*2;
});
//ES6
let es6 = arr.map(n => n*2);
console.log(es5);    //[2,4,6]
console.log(es6);    //[2,4,6]

箭頭函數簡化了原先的函數語法,不須要再寫 function ,若是函數體只有一行代碼的話連 return 都不用寫,這個特性對於熱衷於簡化流程和工做的程序員來講至關對胃口。es6

箭頭函數支持兩種模式的函數體寫法,咱們姑且叫他簡潔函數體和塊級函數體。app

'use strcit';
// 簡潔函數體
let fn = x => x * x;

// 塊級函數體
let fn = (x, y) => {return x + y;};

簡介函數體默認會把表達式的結果返回,塊級函數體須要手動 return 。若是想要返回一個對象又想使用簡潔函數體的話,須要這麼寫:函數

'use strcit';
let fn = () => ({});
fn();   // {}

 若是寫成 var fn = () => {} ,那麼執行 fn() 只能返回 undefined 。this

'use strict';
//第一種
let Person = function(){
    this.age = 2;
    let that = this;
    setTimeout(function(){
     that.age++;
        console.log(that.age);
    },1000);
};

//第二種
let Person = function(){
    this.age = 2;
    setTimeout(function(){
     this.age++;
        console.log(this.age);
    }.bind(this),1000);
};
new Person();

以前咱們想操做setTimeout參數function內部的this可能會用上述兩種方法,看上去不錯了, 可是如今有了箭頭函數就不同了,代碼以下:es5

'use strict';
let Person = function(){
    this.age = 2;
    setTimeout(() => {
     this.age++;
        console.log(this.age);
    },1000);
};
new Person();  

因爲箭頭函數已經綁定了this 的值,即便使用apply或者call也不能只能起到傳參數的做用,並不能強行改變箭頭函數裏的this。spa

'use strict';
let obj = {
    x:1,
    show1:function(y){
        let fn = y => y+this.x;
        return fn(y);
    },
    show2:function(y){
        let fn = v => v + this.x;
        let whatever = {
            x: 2
        };
        return fn.call(whatever, y);
    }
};
console.log(obj.show1(1));    //2
console.log(obj.show2(2));    //3

箭頭函數不能與new 關鍵字一塊兒使用,會報錯code

'use strict';
let Fn = () => {
    this.a = 1;
};
let f = new Fn();    // Error
相關文章
相關標籤/搜索