深刻理解javascript系列(十一):this

曾經我覺得我掌握了this，直到不斷學習，才發現真是個無知...

在前面的系列中咱們已經知道，當函數被調用執行時，變量對象會生成，這個這時候，this的指向會被肯定。所以咱們首先要牢記一個很是重要的結論，當前函數的this是在函數被調用執行的時候才肯定的。若是當前的執行上下文處於函數調用棧的棧頂，那麼這個時候變量對象會變成活動對象，同時this的指向確認。

正是因爲這個緣由，才致使一個函數內部的this到底指向誰是很是靈活且不肯定的，這也是this難以被真正理解的緣由所在。例如，下面的例子，同一個函數因爲調用的方式不一樣，它內部的this指向了不一樣的對象。

var a = 10;
var obj = {
    a: 20
}
function fn() {
    console.log(this.a);
}
fn();        //10
fn.call(obj);//20複製代碼

經過a值的不一樣表現，咱們能夠知道this分別指向了window與obj。

接下來，咱們一步步來分析this中的具體表現。

1.  全局對象中的this

在以前變量對象的筆記中曾提到過，全局對象的變量對象是一個比較特殊的存在。在全局對象中，this指向它自己，所以相對簡單，沒有那麼多複雜的狀況須要考慮。

//經過this綁定到全局對象
this.a1 = 20;

//經過聲明綁定到變量對象，但在全局環境中，變量對象就是它自己
var a2 = 10;

//僅僅只有賦值操做，標識符會隱式綁定全局對象
a3 = 30;
複製代碼

2.  函數中的this

在一開始的例子中，同一個函數中的this因爲調用方式不一樣致使this指向不一樣，所以，this最終指向誰，與調用該函數的方式息息相關。

在一個函數的執行上下文中，this由該函數的調用者提供，由調用函數的方式來決定其指向。

function fn() {
    console.log(this);
}
fn(); //fn爲調用者複製代碼

若是調用者被某一個對象所擁有，那麼在調用該函數時，內部的this指向該對象。若是調用者函數獨立調用，那麼該函數內部的this則指向undefined。可是在非嚴格模式中，當this指向undefined時，他會自動指向全局對象。

//爲了可以準確判斷，咱們在函數內部使用嚴格模式
//由於非嚴格模式會自動指向全局

function fn() {
    'use strict';
    console.log(this);
}

fn();  //fn是調用者，獨立調用，this爲undefined
window.fn();    //fn是調用者，被window所擁有，this爲window對象複製代碼

函數是獨立調用，仍是被某個對象所擁有，是很是容易辨認的。綜合上面的結論，下面結合一些簡單的例子來分析。

//demo01
var a = 20;
var obj = {
    a: 40
}
function fn() {
    console.log('fn this: ',this);

    function foo() {
        console.log(this.a)
    }
    foo();
}

fn.call(obj);
fn();複製代碼

算了，不寫了..................................................

越寫下去，發現本身記錄的這些，還不如'飢人谷方應杭'說的一句話：this 就是 call 的第一個參數！call 的其餘參數統稱爲 arguments。

當你明白了方方說的，call/apply/bind都不是問題了...

這些都是我以往的學習筆記。若是您看到此筆記，但願您能指出個人錯誤。有這麼一個羣，裏面的小夥伴互相監督，堅持天天輸出本身的學習心得，不輸出就出局。但願您能加入，咱們一塊兒終身學習。歡迎添加個人我的微信號：Pan1005919589