箭頭函數的特性

1,箭頭函數沒有自己的this,指向外層普通函數作用域

funtion Timer(){
    this.s1 = 0;
    this.s2 = 0;
    setInterval( ()=>this.s1++,1000 );
    setInterval( function(){
        this.s2++
    },1000 );
}
var t = new Timer();
setTimeout( ()=> console.log(’s1’,t.s1),3100 ); // 3
setTimeout( ()=> console.log(’s2’,t.s2),3100 ); // 0

s1 打印 3 是因爲箭頭函數沒有自己的this,指向外層作用域(即 Timer的實例 t),延遲三秒,
打印 3;
s2 打印 0 是因爲 setInterval 內部是function ,涉及到this的綁定,此處是默認綁定,this
指向window;
window.s2 的默認值是 undefined;
對值爲undefined 執行++操作,輸出NaN;
此時打印window.s2;值爲NaN;
t.s2的初始值爲0;由於值沒有變化,所以此處打印依然是0;

2,箭頭函數沒有constructor,不能通過new 調用;

var a =  new fn()
VM10630:1 Uncaught TypeError: fn is not a constructor

3.沒有new.target 屬性

var fn = ()=>{
	console.log(new.target)
}
VM11266:2 Uncaught SyntaxError: new.target expression is not allowed here
var fn1 = function (){
	console.log(new.target);
}
fn1();
// undefined

在通過new運算符被初始化的函數或構造方法中,new.target返回一個指向構造方法或函數的引用。在普通的函數調用中,new.target 的值是undefined

4.箭頭函數不綁定Arguments 對象

要使用arguments對象時,需要通過rest語法使用
var fn2 = (...a)=>{
    console.log(a)
}
fn2(2)
//  [2]

由於 箭頭函數沒有自己的this指針,通過 call() 或 apply() 方法調用一個函數時,只能傳遞參數(不能綁定this),他們的第一個參數會被忽略。(這種現象對於bind方法同樣成立)

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2,箭頭函數的第一個參數被忽略了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章