對象和作用域

BlackFlagBin 發(fā)布于2019-08-21 11:19 / 1641人閱讀

摘要：一直以來的原型鏈和作用域鏈非常困擾我，其中夾雜著問題更是讓問題雪上加霜，并不是說原型鏈或者說作用域鏈有多難理解，而是經(jīng)常混亂了概念，下面記錄一下思考過程，希望對自己或是他人都有幫助。

一直以來JavaScript的原型鏈和作用域鏈非常困擾我，其中夾雜著this問題更是讓問題雪上加霜，并不是說原型鏈或者說作用域鏈有多難理解，而是經(jīng)常混亂了概念，下面記錄一下思考過程，希望對自己或是他人都有幫助。

    var maybe="maybe"
    
    function ObjectMake (){
    
       var maybe = "hello";
    
       this.getmaybe = function(){
    
           return maybe;
    
       }
    
    }
    
    var b = new ObjectMake();
    
    var c = b.getmaybe(); //hello

作用域（scope）是針對函數(shù)而言的，每個函數(shù)在執(zhí)行的時候都會分配作用域鏈，上面例子是一個典型的工廠模式，其中對于ObjectMake函數(shù)而言，其作用域鏈[[scope]]是scope_0（Windows）+scope_1（ObjectMake），對于getmaybe函數(shù)而言，其作用域是scope_0（Windows）+scope_1（ObjectMake）+scope_2（getmaybe），在scope0和scope1都存在maybe變量的時候，scope1優(yōu)先于scope0，所以變量c的值是hello。

下面這種情況呢：

var maybe="maybe";

var getmaybe = function(){

    return maybe;

}

function ObjectMake (){

    var maybe = "hello";

    this.getmaybe = getmaybe;

}

var b = new ObjectMake();

var c = b.getmaybe(); //maybe
根據(jù)作用域鏈分析可以得出：對于getmaybe函數(shù)而言，其作用域鏈[[scope]]是scope_0（Windows）+scope_1（getmaybe），對于對于ObjectMake函數(shù)而言，其作用域鏈[[scope]]是scope_0（Windows）+scope_1（ObjectMake），所以當(dāng)運行b.getmaybe時getmaybe查找作用域只能在cope_0（Windows）中發(fā)現(xiàn)maybe變量，故c的值為maybe。

有人可能會提出一個問題，為什么getmaybe函數(shù)作用域鏈沒有包含scope_1（ObjectMake），因為JavaScript是詞法作用域，簡而言之，就是函數(shù)的作用域鏈只和函數(shù)在哪里定義有關(guān)系，和函數(shù)在哪里運行沒有關(guān)系，上面getmaybe定義在Windows中，所以其作用域鏈中只存在兩個：Windows和它自己。

明白了這個道理，下面這個例子又讓我暈了很久：
var maybe = "maybe";

var show = {

    maybe:"hello",

    getmaybe:function(){

        return maybe;

    }

}

var d = show.getmaybe();//maybe
按照之前的說法，getmaybe定義在對象show對象當(dāng)中，為何d的值不是maybe？讓我們還是從之前的分析作用域鏈開始，函數(shù)getmaybe定義在對象show中，其作用域鏈為：scope_0（Windows）+scope_（getmaybe），scope作用域代表獲取執(zhí)行環(huán)境的地址，目前JavaScript的執(zhí)行環(huán)境有：1）全局執(zhí)行環(huán)境、2）Eval函數(shù)執(zhí)行環(huán)境、3）普通函數(shù)執(zhí)行環(huán)境，可知show對象不是一個執(zhí)行環(huán)境，函數(shù)的scope無法將它推入作用域鏈中，所以d的值為maybe。

下面我們再看一個例子：

var maybe = "maybe";

var show = {

    maybe:"hello",

    getmaybe:function(){

        return this.maybe;

    }

}

var d = show.getmaybe();//hello
上面在getmaybe函數(shù)中加上this指針后，終于返回了hello了，this指針在JavaScript中是一個非常重要但是又常常會誤導(dǎo)人的概念，在一般的OOP（面向?qū)ο蟮恼Z言中），一般都有this這個概念，比如c++的this，Python的self等等。this代表對象實例的地址，在JavaScript中，對象都是實例，不存在C++中的class概念，而this都是動態(tài)綁定的（可以用apply()或是call()等函數(shù)來改變），show.getmaybe()將getmaybe函數(shù)的this指針綁定了show對象，有些時候this指針會被偷偷的替換掉，這個時候可能我們都不知道，關(guān)于this指針，下次有時間再寫一篇作為理解之用。

這篇文章主要是關(guān)于JavaScript對象和作用域的關(guān)系，但實際上通過上面的例子可以知道，它們并沒有關(guān)系，都是個人見解，有誤后續(xù)會修改。