h5學習筆記（2）this 迴圈賦值引用問題

這幾天開始練習js，js寫法讓我無法適應，一方面是弱引用，更多方面本身對js不熟悉，於是我連續踩坑了幾次。

第一次踩坑是關於this 這個在閉包函式的時候指向的問題，第一次在使用egret的時候遇到的，我在function 的function 加入了這個this 後出現this 指向了window的可笑情況。

看看下面朋友提供的幾個案例：

var person = , 1000);
}};person.greet();

執行後，你會發現在settimeout 裡面 this 的指向是有問題的。

再看看改寫了情況

var person = , 1000);
}};person.greet();

再來看看，採用匿名函式es6 的寫法（）=> 你會發現其實可以執行到。this 引用沒有錯。

var person = , 1000);
}};person.greet
();

這幾種寫法還是要注意問題，js機制問題，一不小心很容易理解錯誤。this 的指向同一樣，其實會發生改變的。包括oc self ，as3的this 也會出現這種類似的問題。

但是為什麼採用()=> 這個es6 標準，js 的this 沒有之前問題，依舊可以繼續使用?

繼續引用朋友的講解（o(∩_∩)o哈哈~）

經過我們早上的討論和學習，可以發現這個問題，es6 內部已經幹了這件事情，將this 引用改了一下，當中還是回歸到我們上面的案例。es6 暗中幫你解決這個this麻煩事情，你依舊可以安心去使用this，不知道能不能這樣理解呢。

可以在裡面執行**除錯

第二次踩坑是在for 迴圈的時候為按鈕傳遞乙個引數的時候發生乙個問題。

var a = ;
function
foo()
//修改值
var a =['qq'];
foo();

首先我們知道a 在這個區域當中是乙個全域性變數了，a變化，則函式foo 輸出的變不一樣。

在for 迴圈的時候還有乙個要注意的是for的時候或者有其他條件體的時候。我也踩過坑:（引用朋友的話）

for() 
你不要想著a每次都是「新建變數」

其實是這樣

一定記得其實是這樣：
var a;
for()

實際上當你引用這個a的時候，這個a 是發現奇怪為什麼是最後乙個數？這個是作用域的乙個問題。

再來看看坑在哪了。

我將我這個有毛病的**貼上在一起

var vboxs = document.getelementsbyclassname("ui-vbox");
function
show
(value)
for(var j = 0;jvar btn = vboxs[j].getelementsbytagname("button")[0];
var numinput = vboxs[j].getelementsbytagname("input")[1];
var shopname = vboxs[j].getelementsbytagname("p")[0];
var price = vboxs[j].getelementsbytagname("span")[0];
btn.onclick = function
() ;
}

我天真以為，為乙個按鈕傳遞引數是一件很平常的事情，當我執行

btn.onclick = function() ;的時候，其實numinput是一直改變當中，所以當我發現for 迴圈走完後，引用其實一直指向最後乙個。

也是回歸到之前的問題

var a;
for()

這種情況就是我踩坑的地方。

於是朋友改過一下換一種偷懶的做法解決這個問題

var vboxs = document.getelementsbyclassname("ui-vbox");
function
show
(value)
for(var j = 0;jvar btn = vboxs[j].getelementsbytagname("button")[0];
var numinput = vboxs[j].getelementsbytagname("input")[1];
var shopname = vboxs[j].getelementsbytagname("p")[0];
var price = vboxs[j].getelementsbytagname("span")[0];
btn.numinput = numinput;
btn.onclick = function
() ;
}

btn.numinput = numinput;採用這種動態屬性的做法。js 的物件是可以動態加屬性，類似as3 movieclip 裡面動態屬性。借用這個寫法，可以在for 迴圈一一對應了為每一列資料新增相應的物件引用了。突然發現 js 還是挺多需要注意的地方。

最近經常接觸到需要對標籤內的文字進行採用或者浮點數和整形之間的轉換，p ，span ，input 等標籤內的文字進行轉換。

js的浮點數是一大坑，遇到的時候要小心注意使用。

innerhtml 帶標籤的

innertext 不帶標籤文字

parsefloat 轉浮點數

parseint 轉換整形

math.floor 取下限整形還是有效

h5學習筆記（2）this 迴圈賦值引用問題

H5 學習筆記3

H5學習筆記（六）

h5學習筆記 Table

h5學習筆記（2）this 迴圈賦值引用問題

H5 學習筆記3

H5學習筆記（六）

h5學習筆記 Table

相關推薦