前言:寫着寫着項目,看着日益繁多的js變量,突然對js變量的作用範圍產生了興趣,所以來研究一下,鑑於本人主要是搞後端的,這個主要是入門級js變量範圍介紹.
目錄
第一章 不同script塊中的js變量
1.1 先定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c=6
</script>
<script>
console.log(c)
</script>
</html>
結果:6
結論:會影響
1.2 後定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script>
var c=6
</script>
</html>
結果:c is not defined
結論:定義了才能使用
1.3.1 另一種定義方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script>
c=6
</script>
</html>
結果:c is not defined
結論:定義了才能使用
第二章 定義在js文件中的變量
2.1 先定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
console.log(c)
</script>
</html>
//index1.js
結果:輸出c
結論:會影響
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
</script>
<script src="js/index1.js"></script>
</html>
結果:輸出c
結論:會影響
2.2 後定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
結果:c未定義
結論:定義了才能使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
</script>
</html>
//index1.js
結果:c未定義
結論:定義了才能使用
2.2.1 另一種定義方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
console.log(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
結果:c未定義
結論:定義了才能使用
第三章 js塊中的函數
3.1 不同js塊中的函數先定義再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out(url){
console.log(url)
}
</script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
結果:輸出c
結論:會影響
3.2 不同js塊中的函數先使用再定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
</script>
<script>
function out(url){
console.log(url)
}
</script>
</html>
結果:out未定義
結論:定義了才能使用
3.3 同一塊中的js函先使用再定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
function out(url){
console.log(url)
}
</script>
</html>
結果:輸出c
結論:會影響
3.4 同一塊中的js函數先定義再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out(url){
console.log(url)
}
var c ="www.baidu.com"
out(c)
</script>
</html>
結果:輸出c
結論:會影響
可以看到在一個塊中,函數並不需要遵循定義在前纔可以使用的原則,定義在後面的函數也能被調用.
第四章 js文件中的函數
4.1 先定義再使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
//index1.js
結果:輸出c
結論:會影響
4.2 先使用再定義
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var c ="www.baidu.com"
out(c)
</script>
<script src="js/index1.js"></script>
</html>
//index1.js
結果:out未定義
結論:定義了才能使用
4.3 同一js塊中函數互相調用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
<script>
var c ="www.baidu.com"
out(c)
</script>
</html>
//index1.js
可以看到out2函數定義早於out1
結果:輸出c
結論:會影響
第五章 結論
注:自己的推斷不一定對
5.1 js文件的引入
感覺js所謂的引入就相當於把js文件的代碼導入在引入的位置中,是因爲某個js塊的代碼太多,所以寫在了外部.
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script src="js/index1.js"></script>
</html>
等於
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
function out2(url){
out(url);
}
function out(url){
console.log(url)
}
</script>
</html>
5.2 js變量函數作用規則
在js塊中,全局變量可以作用於所有的js塊,但是必須遵循先定義再使用的原則.
其實會有變量提升和函數提升,會打破這個原則,這裏我們只是初步學習,所以不說這個,感興趣的可以去看
https://blog.csdn.net/qq_42606051/article/details/82016733
https://www.cnblogs.com/enjoymylift/p/6003155.html
局部變量只作用於當前作用域,如只作用在function.如果在function中使用變量不加var,那麼此變量會變成全局變量.
可以參考https://www.cnblogs.com/yedliu/p/6517572.html
同一個塊中,函數不必遵循定義再使用的原則,先定義的函數可以調用後定義的函數,不同塊中要遵循先定義後使用
簡單解釋下:
運行一段JS代碼時：
JS引擎會先掃描整個JS代碼，把所有全局變量都綁定到window對象上，包括函數和變量的定義。此時，window上就有了函數和值爲undefined。
5.2.1 if,for中變量作用域
參考:https://www.cnblogs.com/junwuyao/p/7674753.html
在JS中，只有函數作用域，沒有塊級作用域！！！也就是說，if/for等有{}的結構體，並不能具備自己的作用域。
下面的代碼中,b是全局變量.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
<script>
var a=3
if(a==3){
var b=6
}
</script>
<script>
console.log(b);
</script>
</html>