js檔案命名衝突理解

十里霜天發表於2018-10-19

在一個index.html檔案裡先後匯入a.js和b.js檔案
a.js檔案裡寫上var s = 2;console.log(s);
b.js檔案裡寫上var s = 5;
這時a.js和b.js用了相同的變數名,這就是命名衝突
命名衝突會導致如果修改b.js裡那個重名的變數,則a.js裡的重名變數也會被修改
但這裡a.js裡仍然輸出2,因為這裡是先執行a.js再執行b.js,當在b.js裡修改s的值時,a.js已經執行完了所以雖然s的值被修改了,但是似乎對a.js沒什麼影響

然而,當a.js裡有非同步執行的程式碼(如定時器)時,情況就不同了,如:
var s = 2;
setInterval(function() {
console.log(s);
}, 1000);

b.js程式碼:var s = 5;
此時會發現控制檯不斷輸出5而不是2,這裡a.js就受到了影響

所以,js模組化的好處就是避免了命名衝突,同時避免命名衝突還可以用匿名函式自執行的方式(function() {})()

補充:一個<script></script>或一個js檔案不代表一個作用域,多個js檔案的全域性作用域是共享的

相關文章