使用JavaScript閉包遇到的陷阱（一）

caohaoyu 發(fā)布于2019-08-19 18:19 / 2710人閱讀

摘要：使用閉包遇到的陷阱一陷阱在類的原型對(duì)象中添加特權(quán)方法首先定義一個(gè)類，該類中有一個(gè)私有變量定義個(gè)特權(quán)方法來(lái)訪問(wèn)修改私有變量然后我們對(duì)類進(jìn)行測(cè)試到目前為止，類正常工作。

使用JavaScript閉包遇到的陷阱（一） 陷阱：在類的原型對(duì)象中添加特權(quán)方法

首先定義一個(gè)Page類，該類中有一個(gè)私有變量dom：

function Page(){
    var dom;
}

定義2個(gè)特權(quán)方法來(lái)訪問(wèn)、修改私有變量dom：

function Page(){
    var dom;
    this.setDom=function(newDom){
        dom=newDom;
    };
    this.getDom=function(){
        return dom;
    }
}

然后我們對(duì)Page類進(jìn)行測(cè)試：

var page1=new Page();
page1.setDom("page1");
console.log(page1.getDom());//page1
var page2=new Page();
page2.setDom("page2");
console.log(page2.getDom());//page2
console.log(page1.getDom());//page1

到目前為止，Page類正常工作。
這時(shí)問(wèn)題來(lái)了：我想每個(gè)Page類的對(duì)象都有相同的特權(quán)方法，那就將這兩個(gè)特權(quán)方法添加到Page的原型對(duì)象中好了。

function Page(){
    var dom;
    if(this.__proto__.setDom !== "function"){
        this.__proto__.setDom=function(newDom){
            dom=newDom;
        };
        this.__proto__.getDom=function(){
            return dom;
        };
    }
}

對(duì)修改后的Page類進(jìn)行測(cè)試：

var page1=new Page();
page1.setDom("page1");
console.log(page1.getDom());//page1
var page2=new Page();
page2.setDom("page2");
console.log(page2.getDom());//page2
/*
    注意！問(wèn)題出現(xiàn)了！
*/
console.log(page1.getDom());//page2

這時(shí)最后一行的console.log(page1.getDom())打印的結(jié)果變成了

page2

探究前提

在使用new操作符調(diào)用Page構(gòu)造函數(shù)創(chuàng)建對(duì)象的過(guò)程：先創(chuàng)建一個(gè)Page類的空對(duì)象，并將構(gòu)造函數(shù)中的this指向該對(duì)象，再執(zhí)行構(gòu)造函數(shù)。

在函數(shù)中定義的變量都保存在該函數(shù)執(zhí)行環(huán)境的變量對(duì)象中。

每個(gè)函數(shù)都有一個(gè)作用域鏈。函數(shù)在定義時(shí)，就會(huì)生成不完整的作用域鏈，該作用域的前端是函數(shù)定義時(shí)所在環(huán)境的變量對(duì)象。函數(shù)在執(zhí)行時(shí)，會(huì)創(chuàng)建該函數(shù)的執(zhí)行環(huán)境，并將該執(zhí)行環(huán)境的活動(dòng)對(duì)象（這里可理解為變量對(duì)象）添加到之前創(chuàng)建的作用域鏈的前端，此時(shí)的作用域鏈?zhǔn)峭暾淖饔糜蜴湣?/p>

變量訪問(wèn)的過(guò)程就是從作用域鏈家前端沿著作用域鏈查找變量的過(guò)程。

分析

Page類的構(gòu)造函數(shù)使用動(dòng)態(tài)原型的方式來(lái)給原型對(duì)象添加方法。因此在創(chuàng)建第一個(gè)Page實(shí)例時(shí)，調(diào)用Page函數(shù)創(chuàng)建執(zhí)行環(huán)境a，這時(shí),會(huì)在a中定義setDom和getDom方法并添加到Page類的原型對(duì)象中。原型對(duì)象中的setDom和getDom方法的作用域鏈前端都是執(zhí)行環(huán)境a（準(zhǔn)確的說(shuō)是a對(duì)應(yīng)的變量對(duì)象）。

創(chuàng)建第一個(gè)Page實(shí)例時(shí)，給Page類的原型對(duì)象添加了setDom和getDom方法。之后再創(chuàng)建其他的Page實(shí)例時(shí)，都不會(huì)再修改原型對(duì)象中的setDom和getDom方法了。

在創(chuàng)建第二個(gè)Page實(shí)例時(shí)，再次調(diào)用Page函數(shù)，創(chuàng)建了執(zhí)行環(huán)境b。

在調(diào)用Page實(shí)例的setDom或getDom方法時(shí)，由于都是調(diào)用原型對(duì)象中的方法。而根據(jù)之前說(shuō)的，原型對(duì)象中的setDom方法和getDom方法在訪問(wèn)dom變量的時(shí)候，都要沿著作用域鏈查找，最后找到的是環(huán)境a中的變量dom，也就是第一個(gè)Page實(shí)例的私有變量dom。

所以在測(cè)試的時(shí)候，無(wú)論是page1還是page2調(diào)用setDom和getDom方法，都是修改或訪問(wèn)page1中的私有變量dom。

小結(jié)

在類的原型對(duì)象中添加的特權(quán)方法，不能用來(lái)訪問(wèn)或操作類的私有變量，只能用來(lái)訪問(wèn)或操作this修飾的特權(quán)變量。