資訊專欄INFORMATION COLUMN
摘要：在這里我還在最后加了一個對的指向來銷毀對象嚴(yán)格來說還應(yīng)該掉對象的所有屬性，這里省略，控制臺中的輸出如下可見，控制臺中輸出的延遲范圍是整個腳本代碼的范圍，不局限于某個函數(shù)作用域，同時還不受賦值為的影響，當(dāng)然，在之后的的輸出就確實(shí)為了。
本博客同步自我的Github博客
最近在開發(fā)組件的過程中，需要隨時監(jiān)控整個組件對象的構(gòu)建，包括對象上的屬性方法的變更，以及原型鏈的變化。本來，在測試代碼中加一個console.log：
var d = new dialog({
...
});
console.log("final object", d);
d.show();
就可以觀察最終生成的組件對象是否符合我的預(yù)期，也沒出過什么問題，也沒理由會出現(xiàn)什么問題，直到調(diào)試過程中出現(xiàn)了這樣的情況：
組件的配置需要將用戶傳入的配置屬性和默認(rèn)屬性進(jìn)行合并，然后需要對組件對象中的一個屬性布爾值進(jìn)行判斷后改寫組件的另一個屬性：
this.maskOpacity = this.modal ? this.maskOpacity : 0;
第一眼看上去代碼似乎沒有問題(實(shí)際上有問題)，但是運(yùn)行時和預(yù)期行為不一致，this.modal的判定始終為false。那么我就很順手地打上一句console.log(this)來檢查對象的屬性，當(dāng)調(diào)整傳入的配置對象時，生成對象上的this.modal屬性應(yīng)該會隨之變化，檢查控制臺輸出結(jié)果，this.modal的值確實(shí)是會根據(jù)參數(shù)不同而變化的。這就奇怪了，試著打斷點(diǎn)調(diào)試，結(jié)果就不一樣了，this.modal的值在執(zhí)行判斷時顯示為undefined。同樣的事情在Chrome和FF中都發(fā)生了。
這個modal屬性神秘消失了。
問題一分為二，一個是代碼本身的邏輯問題，經(jīng)過進(jìn)一步調(diào)試，在執(zhí)行到這句判斷的時候，配置對象中的modal屬性值還未寫入this，所以this.modal值為undefined的現(xiàn)象是正常的，通過修改this.modal為opt.modal比較輕易就解決了。第二個問題卻是在調(diào)試過程中遇到的，console.log出的this為何能查找到本不應(yīng)存在的modal屬性，導(dǎo)致誤導(dǎo)了我的思路。借助于萬能的StackOverflow，最后總算是找到了原因。
這段組件的代碼邏輯是比較復(fù)雜的，其中的this.modal屬性，在上文執(zhí)行判斷的語句處，確實(shí)應(yīng)該undefined，但是在后面的代碼中，有這樣一段賦值：
this.modal = opt.modal = true;
這段賦值直接改寫了this.modal，可為何后文的賦值會影響到前文的輸出呢？其中的原因在于，當(dāng)console.log(this)輸出時，this對象在控制臺中的顯示為折疊狀態(tài)，如圖：
為了查看對象中具體的屬性信息，就必須用鼠標(biāo)點(diǎn)一下展開，這個時候，JS早就執(zhí)行完畢了，this.modal的值也已改寫，在展開this對象的時刻，this中的屬性顯示結(jié)果實(shí)際上是this對象的最終形態(tài)，那么這種輸出上的“延遲”是延遲到所有JS執(zhí)行結(jié)束還是僅局限于console語句所在函數(shù)作用域內(nèi)呢？我們可以寫段代碼驗(yàn)證一下：
var foo = {};
function addProperty() {
foo.test1 = "test1";
foo.test2 = "test2";
foo.test3 = "test3";
foo.test4 = "test4";
foo.test5 = "test5";
foo.test6 = "test6";
foo.test7 = "test7";
foo.test8 = "test8";
foo.test9 = "test9";
console.log(foo);
foo.bar = "bar";
}
addProperty();
foo.baz = "baz";
foo = null;
console.log(foo);
代碼寫得很挫，純粹是為了測試而寫了。在這里我還在最后加了一個對null的指向來銷毀對象（嚴(yán)格來說還應(yīng)該delete掉對象的所有屬性，這里省略），控制臺中的輸出如下：
可見，控制臺中輸出的“延遲范圍”是整個腳本代碼的范圍，不局限于某個函數(shù)作用域，同時還不受賦值為null的影響，當(dāng)然，在foo = null;之后的console的輸出就確實(shí)為null了。
同時，觸發(fā)這種“延遲”現(xiàn)象還有一個必要條件，那就是輸出對象的屬性要足夠多，使得控制臺會先將對象內(nèi)容折疊起來，給用戶點(diǎn)擊展開的機(jī)會，如果屬性過少，兩行就顯示完了，也就看不到這個bug了。
在各種條件的巧合作用下發(fā)現(xiàn)了這樣一個現(xiàn)象，在今后的開發(fā)過程中要加以注意，不要受到誤導(dǎo)，甚至于利用這種特性為開發(fā)提供便捷。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87641.html
摘要：動畫庫這個庫包括個組件，今天做項(xiàng)目剛好用到了組件，記錄一下使用過程中的總結(jié)，另外兩個組件用到了再做介紹。規(guī)定完成過渡效果需要多少秒或毫秒。規(guī)定速度效果的速度曲線。參考網(wǎng)址官方案例官網(wǎng)動畫庫的新寫法 react-transition-group動畫庫 這個庫包括3個組件：Transition,CSSTransition,TransitonGroup，今天做項(xiàng)目剛好用到了Transitio...
摘要：動畫庫這個庫包括個組件，今天做項(xiàng)目剛好用到了組件，記錄一下使用過程中的總結(jié)，另外兩個組件用到了再做介紹。規(guī)定完成過渡效果需要多少秒或毫秒。規(guī)定速度效果的速度曲線。參考網(wǎng)址官方案例官網(wǎng)動畫庫的新寫法 react-transition-group動畫庫 這個庫包括3個組件：Transition,CSSTransition,TransitonGroup，今天做項(xiàng)目剛好用到了Transitio...
摘要：動畫以低速開始，然后加快，在結(jié)束前變慢。在函數(shù)中自己的值。在所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值在第一個關(guān)鍵幀中定義。動畫調(diào)用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數(shù)： 動畫名稱 如：bounceIn 一周期所用時間 如：0.3s 速度曲線 如：ease 值 描述 linear 動畫從頭...
摘要：使用這種方法來隱藏元素，是否可以觸發(fā)事件要根據(jù)具體的情況來分析。其他的方式只作了解即可，并不推薦使用它們來隱藏元素，它們的真正用途應(yīng)該不在隱藏元素，而是通過了解這些方法的特點(diǎn)，挖掘出其真正的使用場景 幾種方法的簡單介紹 display:none 最常用的隱藏元素的方法 .hidden{ display:none } 將元素設(shè)置為display:none后，元素在頁面上將徹底...
摘要：分別對應(yīng)于中的幾個常量值。源碼分析的方法源碼分析創(chuàng)建需要使用靜態(tài)的方法，并且其中的參數(shù)是一個查找父布局的起點(diǎn)這里可以看到，的布局是，假如我們需要自定義并且設(shè)置字體顏色，大小等屬性。表示回調(diào)已在隊列中。 目錄介紹 1.最簡單創(chuàng)造方法 1.1 Snackbar作用 1.2 最簡單的創(chuàng)建 1.3 Snackbar消失的幾種方式 2.源碼分析 2.1 Snackbar的make方...
閱讀 1293·2021-09-03 10:44
閱讀 677·2019-08-30 13:13
閱讀 2860·2019-08-30 13:11
閱讀 2029·2019-08-30 12:59
閱讀 1110·2019-08-29 15:32
閱讀 1659·2019-08-29 15:25
閱讀 1099·2019-08-29 12:24
閱讀 1366·2019-08-27 10:58
