JavaScript中的this關鍵詞指向實例分析

這篇文章主要講解了“JavaScript中的this關鍵詞指向實例分析”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript中的this關鍵詞指向實例分析”吧！

1、es5中的this的指向

• this是JavaScript的一個關鍵字，他是函數執行過程中，自動生成的一個內部對象，指當前的對象，只在當前函數內部使用。

• 在es5中this的指向取決于函數運行時的環境。

• 沒有直接掛載者(或稱調用者)的函數中this，非嚴格模式下指向window，在use strict嚴格模式下，默認為undefined。以下都是在非嚴格模式下討論

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);
  }
};
var fn = obj.fn;
fn();     // hello window!
obj.fn(); // hello obj!

obj.fn()在執行時，fn中的this指向的是當前的調用對象obj。fn()執行時，this指向的是window對象。

var fn = obj.fn; // 等價于 window.fn = obj.fn;
fn();            // 等價于 window.fn();

匿名函數的執行環境是全局的

var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name); // 'hello obj!'
    return function() {
      console.log(this.name); // 'hello window!'
    };
  }
};
obj.fn()();

2、es6中的this

• es6箭頭函數的特點

• 箭頭函數沒有自己的this

• 函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象，即外層代碼的this引用。

• 不可以當作構造函數，也就是說，不可以使用new命令，否則會拋出一個錯誤。

• 沒有arguments對象。如果要用，可以用Rest參數代替。

• 不可以使用yield命令，因此箭頭函數不能用作Generator函數

示例說明，修改上述示例代碼中的函數為箭頭函數：

// 示例代碼1
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: () => {
    console.log(this.name);  // 這里的this指向的外層的this,即window對象，想當于上打印的是console.log(window.name);
  }
};
var fn = obj.fn;
fn();       // hello window!
obj.fn();   // hello window!

// 示例代碼2
var name = 'hello window!';
var obj = {
  name: 'hello obj!',
  fn: function() {
    console.log(this.name);   // hello obj!
    return () => {
      console.log(this.name); // hello obj!  // this指向外層的this，即obj對象
    };
  }
};
obj.fn()();

感謝各位的閱讀，以上就是“JavaScript中的this關鍵詞指向實例分析”的內容了，經過本文的學習后，相信大家對JavaScript中的this關鍵詞指向實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！