1. 程式人生 > >ES6中的箭頭函數

ES6中的箭頭函數

關於 () color func 不同之處 span 箭頭 支持 通過

關於函數表達式中的this:
自動引用正在調用當前方法的.前的對象
1、obj.fun()中的this
  fun中的this -> obj
2、new Fun()
  Fun中的this -> 正在創建的新對象
3、fun()和匿名函數自調
  this -> window
4、類型.prototype.fun() fun中的this -> 將來調用fun的.前的子對象,子對象一定是當前類型
5、如果this不是想要的對象
  fun.call(替換this的對象),相當於對象.fun()
ex:鍵盤事件

 1 //var self=this;//②將this用變量self替換
 2 //...
 3
document.onkeydown=function(e){ 4 switch(e.keyCode){ 5 case 37:this.moveRow(1); break; 6 case 38:this.moveCow(1); break; 7 case 39:this.moveRow(-1); break; 8 case 40:this.moveCow(-1); break; 9 } 10 }.bind(this)// 11 //...

ECMAScript6中的箭頭函數:(Chrome 56版本以上支持)
語法:標識符 => 表達式
ex1:var result = values.sort(function(a, b){return a - b;});
  function(a,b){return a - b;} -> (a, b) => a - b);

ex2:var sum = function(num1, num2){return num1 + num2;};
  var sum = (num1, num2) => num1 + num2;

舉例說明:

 1 var obj = {
 2   birth:1990,
 3   getAge:function(){
 4     var fun = function(){
 5       return new Date().getFullYear() - this.birth;
 6     };
 7     return fun();
 8   }
 9 };
10 obj.getAge();//NaN

毫無疑問,上述代碼輸出結果為NaN,可通過綁定this,結果輸出27;

1 getAge:function(){
2     var fun = function(){
3       return new Date().getFullYear() - this.birth;
4     }.bind(this);
5     return fun();
6   }

同樣的,可以將上下文this緩存到一個變量中,以便在本函數作用域內包含另一個函數作用域的情況下可以繼續使用此上下文對象this;

 1 var obj = {
 2   birth:1990,
 3   getAge:function(){
 4     var self = this;
 5     var fun = function(){
 6       return new Date().getFullYear() - self.birth;
 7     };
 8     return fun();
 9   }
10 };
11 obj.getAge();//27

更為簡潔的方法,使用箭頭函數代替;

1 var obj = {
2   birth:1990,
3   getAge:function(){
4     var fun = () => new Date().getFullYear() - this.birth;
5     return fun();
6   }
7 };
8 obj.getAge();//27

//箭頭函數沒有它自己的this值,箭頭函數內的this值繼承自外圍作用域;
//可以修復this的指向,始終指向詞法作用域(靜態作用域):在書寫代碼或者說定義時確定的;

箭頭函數的綁定:

1 var obj = {
2   birth:1990,
3   getAge:function (year) {
4     var fun = (y) => y - this.birth;
5     return fun.call({birth:1992}, year);//call函數的第一個參數都是要傳給當前對象的對象及函數內部的this;
6   }
7 };
8 obj.getAge(2017);//27

補充:

箭頭函數的確與傳統函數有不同之處,但仍存在共同的特點;
1、對箭頭函數進行typeof操作會返回“function”;
2、箭頭函數仍是Function的實例,故而instanceof的執行方式與傳統函數一致;
3、call/apply/bind方法仍適用於箭頭函數,但就算調用這些方法擴充當前作用域,this也依舊不會變化;
  箭頭函數與傳統函數最大的不同之處在,禁用new操作;

聲明:本博客的文章除特殊說明外均為原創,轉載請註明出處;

ES6中的箭頭函數