1、全局作用域的變量
如果變量的作用域是全局的,就意味著該變量在任何位置都能被訪問到。
2、局部組用域的變量
在函數(shù)中定義的變量作用域是局部的,該變量只能在當前作用于中和內部嵌套的作用域中訪問到,在上級作用域和其他兄弟級作用域中無法訪問。
注意:在js語言中沒有“塊級”的概念
3、什么是塊級?
在其它語言中,一組大括號包裹的范圍就是塊級,我們可以使用塊級來確定一個變量的作用域的范圍。但是在js中,因為沒有塊級的概念,所以只能使用函數(shù)來確定一個作用域范圍。
4、什么是作用域鏈?
// js中變量查詢的一種機制。在某個位置訪問某個變量時,如果當前作用域中沒有定義該變量。則啟動作用域鏈,向上級作用域查詢,一直查詢到全局作用域,如果在上一級中找到該變量,就使用;沒有找到就會報錯:變量未定義。
//undefined:在只定義了變量沒有給變量賦值的情況下,訪問該變量。結果就是undefined(一個已定義的變量標準是:1、在內存中開辟的存儲空間2、數(shù)據(jù)類型已確定,js定義變量實在開辟內存空間,而確定變量類型是由賦值的類型確定的)
//變量提升:在js代碼正式執(zhí)行之前,會把當前作用域中的所有定義操作先執(zhí)行起來,等真正的執(zhí)行到了相關定義并賦值變量的代碼時,才真正的給變量賦值。
//變量提升提升的是當前作用域的所有的定義操作。包括定義變量,定義對象,定義函數(shù)。定義數(shù)組。。。
//console.log(a);--undefined
// var a = 12;
var a = 1;
for(var i = 0; i < 5; i++) {
var a = i; // a:4 i:5
}
function fn1() {
alert(a); // 1/a: undefine
var a = 2; // 小a: 2
alert(a); // 2/2
}
alert(fn1()); // 3/undefined 因為 fn1中沒有返回值;若alert(fn1),則打印出函數(shù)的代碼
alert(a); // 4/4
alert(abc(2)); // 5/報錯
5、閉包
閉包就是把包含了局部變量的操作返回出去,在另外一個作用域中執(zhí)行。
function fn1() {
var n = 999;
return function () {
alert(n);
};
}
var result = fn1();
result();
匿名函數(shù)自調用:
(function () {
for (var i = 0; i < 100; i++) {
var a = i;
}
})()
// 什么是匿名函數(shù)?
// 沒有函數(shù)名的函數(shù)就是匿名函數(shù)
// 匿名函數(shù)的執(zhí)行方式?
// 1、通過事件調用執(zhí)行;
// 2、通過變量名:把匿名函數(shù)賦給一個變量來執(zhí)行
// 3、通過定時器等系統(tǒng)函數(shù)執(zhí)行
// 4、函數(shù)自調用執(zhí)行
// 匿名函數(shù)的使用場景?
// 1、把函數(shù)當做事件函數(shù)時,使用匿名函數(shù)
// 2、把函數(shù)當做另一個函數(shù)的參數(shù)時,使用匿名函數(shù)(定時器)
// 3、把函數(shù)當做另一個函數(shù)的返回值時,使用匿名函數(shù)(閉包)
6、利用閉包解決問題
// 閉包就是把包含了局部變量的操作返回出去,在另外一個作用域中執(zhí)行。
function fn1() {
var n = 999;
return function () {
alert(n);
};
}
var result = fn1();
result();
<script type="text/javascript">
window.onload = function(){
var btns = document.querySelectorAll("button");
// for(var i = 0; i < btns.length;i++){
// btns[i].ind = i;
// btns[i].onclick = function(){
// console.log(this.ind+1);
// }
// }
for(var i = 0; i < btns.length;i++){
(function(index){
btns[index].onclick = function(){
console.log(index+1);
};
})(i)
//利用閉包來改變作用域,index為局部變量。在全局變量中點擊時使用index
}
}
</script>
<div>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
</div>