我對JavaScript中this的一些理解

由於平常工做中常常使用到this，並且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。
這段時間翻閱了一些書籍也查閱了網上一些資料而後結合本身的經驗，爲了能讓本身更好的理解this，進而總結一篇文章。

this 是什麼

this是 JavaScript 語言的一個關鍵字。它是函數運行時，在函數體內部自動生成的一個對象，只能在函數體內部使用。
實際是在函數被調用時才發生的綁定，也就是說this具體指向什麼，取決於你是怎麼調用的函數。

this 指向的四種狀況

這四種狀況基本涵蓋了JavaScript中常見的this指向問題

1. 全局的函數調用，this指向window

var a = 1;
function fn() {
   console.log(this.a);
}
fn();  // 1

這種 狀況下的this其實就是window對象，這個很好理解。
可是還有一種狀況，就是匿名函數的this也會指向window。

var a= 'window';
var obj={a: 'object'}
obj.fn=function(){
    console.log(this.a);//Object
    +function(){
        console.log(this.a)//window
    }()
}
obj.fn()

匿名函數的執行環境具備全局性，所以它的this對象一般指向windows。
若是對此有疑惑，能夠看知乎上的答案：知乎 - 匿名函數的this指向爲何是window?

2. 做爲對象方法的調用，this指向該對象

var a ='window'
var obj={
  a: 'object',
  fn: function(){
    console.log(this.a);
  }
}

obj.fn(); // object

當函數做爲某個對象的方法調用時，this就指這個函數所在的對象。

3. 做爲構造函數調用，this指向實例

function fn() {
　this.x = 1;
}
var obj = new fn();
console.log(obj.x) // 1

構造函數中的this，在經過new以後會生成一個新對象，this就指這個新對象。
對new有疑問的話，能夠看 冴羽的博客 JavaScript深刻之new的模擬實現

4. 使用call/apply/bind調用, this指向第一個參數

var obj1={
  a: 'boj1'
}
var obj2={
  a: 'obj2'
}
var obj3={
  a: 'obj3'
}
function fn(){
  console.log(this.a);
}
// apply
fn.apply(obj1);// 'obj1'
// call
fn.call(obj2);// 'obj2'
// bind
var fnBind= fn.bind(obj3);
fnBind();// 'obj3'

call/ apply / bind 都有一個共同的特色，就是改變this的指向，使用這種方法能夠把別人的方法拿過來用到本身身上。

第一個參數爲 null 的時候，視爲指向 window.

var a='window'
var obj={
  a: 'boj',
  fn: function (){
    console.log(this.a);
  }
}
obj.fn.call(null);// 'window'

在這裏若是是obj.fn()調用的fn()方法，this應該指向obj沒錯。
可是由於call(null)的存在，改變了指向，因此this指向了window。

深刻理解

正由於比較難理解，因此this指向也是面試時最容易遇到的問題，好比下面這道我曾遇到的一個面試題：

var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn){
    fn();
    arguments[0]();
  }
};
obj.method(fn, 1);

在這道題裏，不只考察了對this熟悉程度，還考察了函數的傳參形式、做用域、以及arguments這種特殊的數組的理解。
只有真正理解了這些才能正確的判斷this究竟指向了誰。
因此，只有對JavaScript中的各項知識點深刻理解，纔會對this的概念越加清晰。

參考：
阮一峯 - Javascript 的 this 用法
前端開發博客 - 深刻理解JavaScript this

文章僅平常學習工做所得，歡迎你們訪問個人blog。