首頁猿問為什么在js...

為什么在js function里面this不能訪問function里的變量（variable）

JavaScript

慕桂英3389331 2019-03-28 13:14:37

大家好，如下面的代碼所示，counter1可以運行，counter2卻不行，兩者的區別是我在counter2里用了this來訪問count變量。function counter1(start){ var count = start; var increase = function(){ count++; }; var getValue = function(){ return count; }; return { inc : increase, get :getValue }}var c1 = new counter1(5);c1.inc(); //is able to increase 1console.log(c1.get());//can return 6function counter2(start){ var count = start; var increase = function(){ this.count++; }; var getValue = function(){ return this.count; }; return { inc : increase , get :getValue }}var c2 = new counter2(5);c2.inc(); //can NOT access this.countconsole.log(c2.get());//return NaN我用debug工具查看counter2里面的this。發現this不包含count變量。我知道在可counter2 里面可以通過 return { count: count, inc : increase , get :getValue })這樣this就能訪問count了。但是我就搞不懂，為什么counter1里面沒有用this，count反而是可以訪問的（即使在counter1也沒有return count這個變量），而counter2卻不行呢？多謝大家。

查看完整描述

6 回答

倚天杖

TA貢獻1828條經驗獲得超3個贊

看我對你代碼的注釋吧.

function counter1(start){

var count = start;

var increase = function(){

// 這里訪問的count就是上面聲明的那個, 這里的概念是閉包

count++;

};

var getValue = function(){

// 這里訪問的count就是上面聲明的那個, 這里的概念是閉包

return count;

};

return {

inc : increase,

get :getValue }

}

var c1 = new counter1(5);

// 下面兩行調用的函數屬于閉包返回的, 本質訪問的是counter1里聲明的那個count

c1.inc(); //is able to increase 1

console.log(c1.get());//can return 6

function counter2(start){

var count = start;

var increase = function(){

// 這里訪問的是this的count. 這里你需要理解this到底指向誰(與C++里的this不同)

this.count++;

};

var getValue = function(){

// 這里訪問的是this的count. 這里你需要理解this到底指向誰(與C++里的this不同)

return this.count;

};

return {

inc : increase ,

get :getValue }

}

var c2 = new counter2(5);

// 這里訪問inc時, this指針指向c2, 由于c2中沒有count屬性;

// 所以其實調用this.count++之前this.count的值是undefined;

// 對一個undefined的值做++操作返回NaN, 即this.count++之后this.count的值是NaN;

// 此時調用c2.get()返回NaN.

c2.inc(); //can NOT access this.count

console.log(c2.get());//return NaN

反對回復 2019-04-13

慕絲7291255

TA貢獻1859條經驗獲得超6個贊

this指向當前作用域的調用者。大概就是這個意思。

試著分析你的c2:

function counter2(start){

var count = start;

var increase = function(){

this.count++;

};

var getValue = function(){

return this.count;

};

return {

inc : increase ,

get :getValue }

}

var c2 = new counter2(5);

實例化c2:

傳入參數start=5；

定義并賦值內部變量count=5

定義increase和getValue函數表達式

將一個匿名對象賦值給c2，對象包含inc和get兩個屬性，分別指向兩個函數。

c2.inc(); //can NOT access this.count

直接執行對象c2下的inc函數。由于是直接執行函數，函數中的this將被指向函數的調用者：對象c2。

increase函數試圖查找this.count，即c2.count，并執行++操作。

由于對象c2中不存在count屬性，對一個undefined對象進行++操作時生成NaN，即c2.count被賦值為NaN。

console.log(c2.get());//return NaN

直接執行對象c2下的get函數。函數this指向c2，因此返回在c2.count。由于在increase中，c2.count被賦值為NaN，因此返回NaN。

反對回復 2019-04-13

慕容3067478

TA貢獻1773條經驗獲得超3個贊

counter1是通過生命周期超長的那個閉包拿到count的。
js里的this到底指向的是誰，是在函數被調用時決定，同一個函數，可能會指向不同的對象。

反對回復 2019-04-13

6 回答
0 關注
2102 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么在js function里面this不能訪問function里的變量（variable）

為什么在js function里面this不能訪問function里的變量（variable）

6 回答

添加回答