JavaScript- 箭頭函數及This的使用

ES6可以使用“箭頭”（=>）定義函數

語法

首先是寫法上的不同:

    // es5
    var fn = function (x, y) {
      return x + y;
    }

    // es6 箭頭函數寫法，當函數直接被return時，可以省略函數體的括號
    const fn = (x, y) => x + y;

    // es5
    var foo = function () {
      var x = 10;
      var y = 20;
      return x + y;
    }

    // es6
    const foo = () => {
      const x = 10;
      const y = 20;
      return x + y;
    }

 

ps:箭頭函數可以替換函數表達式，但是不能替換函數聲明

其次還有一個至關重要的一點，那就是箭頭函數中，沒有this。如果你在箭頭函數中使用了this，那么該this一定就是外層的this。

 ES5

 var name = "window";
    var obj = {
      name: "kxy",
      sayName: function () {
        console.log(this.name);
      }
    };
    obj.sayName();  //kxy

 

使用ES6

 var name = "window";
    var obj = {
      name: "kxy",
      
      sayName: () => {
        console.log(this.name);
      }
    };
    obj.sayName();  //window

 

換一種寫法

    var name = "window";
    var obj = {
      name: "kxy",
      
      sayName: function () {
        setTimeout(() => {
          console.log(this.name);
        }, 1000);
      }
    };
    obj.sayName();  //kxy

編譯后ES5：

var name = "window";
var obj = {
  name: "kxy", 
  sayName: function sayName() {
    var _this = this;  // 注意這里

    setTimeout(function () {
      console.log(_this.name);
    }, 1000);
  }
};
obj.sayName(); //kxy

 

箭頭函數和普通函數區別

 

 不能作用構造函數，不能使用new

 箭頭函數不綁定arguments，取而代之用rest參數...

 箭頭函數不綁定this，會捕獲其所在的上下文的this值，作為自己this值

call 或 apply 方法調用函數，只是傳入參數而已 對this 並沒有影響。

箭頭函數沒有原型屬性

 

箭頭函數沒有它自己的this值，箭頭函數內的this值繼承自外圍作用域。在箭頭函數中調用 this 時，僅僅是簡單的沿着作用域鏈向上尋找，找到最近的一個 this 拿來使用

 

This的指向 (用法)（this 阮一峰）

this是 JavaScript 語言的一個關鍵字。

它是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。

function test() {
　this.x = 1;
}

上面代碼中，函數test運行時，內部會自動有一個this對象可以使用。

那么，this的值是什么呢？

函數的不同使用場合，this有不同的值。總的來說，this就是函數運行時所在的環境對象。

下面分四種情況，詳細討論this的用法。

 

情況一：純粹的函數調用

 這是函數的最通常用法，屬於全局性調用，因此this就代表全局對象。請看下面這段代碼，它的運行結果是1。

var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1

 

情況二：作為對象方法的調用

函數還可以作為某個對象的方法調用，這時this就指這個上級對象。

 var obj = {
      x: 1,
      m: function () {
        console.log(this.x);
      }
    }
    obj.m(); // 1

 

情況三 作為構造函數調用

謂構造函數，就是通過這個函數，可以生成一個新對象。這時，this就指這個新對象

function Test() {
　this.x = 1;
}

var obj = new Test();
obj.x // 1

運行結果為1。為了表明這時this不是全局對象，我們對代碼做一些改變

var x = 2;
function Test() {
  this.x = 1;
}

var obj = new Test();
x  // 2

 

情況四 apply 調用

apply()是函數的一個方法，作用是改變函數的調用對象。它的第一個參數就表示改變后的調用這個函數的對象。因此，這時this指的就是這第一個參數。

      var x = 0;
      var obj = {
        x: 1,
        m: function () {
          console.log(this.x);
        }
      }
      obj.m.apply(); // 1

apply()的參數為空時，默認調用全局對象。因此，這時的運行結果為0，證明this指的是全局對象。

如果把最后一行代碼修改為

obj.m.apply(obj); //1

運行結果就變成了1，證明了這時this代表的是對象obj。