JS變量是松散型的(不強制類型)本質,決定了它隻是在特定時間用于儲存特定值的一個名字而已;
由于不存在定義某個變量必須要儲存何種資料類型值的規則,變量的值及其資料類型可以在腳本的生命周期内改變;
一 變量及作用域
1.基本類型和引用類型
// JS變量包含兩種不同的資料類型的值:基本類型值和引用類型值;
// 1.基本類型值:儲存在棧記憶體中的簡單資料段;即這種值完全儲存在記憶體中的一個位置;
// 基本類型值包含:Undefined|Null|Boolean|Number|String;
// 這些類型在記憶體中占有固定大小的空間;它們的值儲存在棧空間,我們按值來通路;
// 2.引用類型值:儲存在堆記憶體中的對象(可能由多個值構成),即變量中儲存的實際上隻是一個指針,這個指針指向記憶體中的另一個位置,該位置儲存對象;
// 引用類型的值的大小不固定,是以不能儲存在棧記憶體,必須儲存在堆記憶體中;但可以将引用類型的值的記憶體位址儲存在棧記憶體中;
// 當查詢引用類型的變量時,先從棧記憶體中讀取記憶體位址,然後通過位址找到堆記憶體中的值;=>按引用通路;
2.動态屬性
<span style="font-size:18px;">// 定義基本類型值和引用類型值的方式相似:建立一個變量并為該變量指派;
// 但當這個值儲存到變量中以後,對不同類型值可以執行的操作則不一樣;
var box = new Object(); // 建立引用類型;
box.name = 'lee'; // 新增一個屬性;
console.log(box.name); // =>lee;
var box = 'lee'; // 建立基本類型
box.age = 15; // 給基本類型添加屬性;
console.log(box.age); // =>undefined;</span>
3.複制變量值
<span style="font-size:18px;">// 在變量複制方面,基本類型和引用類型也有所不同;
// 基本類型指派的是值本身;
var box = 'lee'; // 在棧記憶體中生成一個box'lee';
var box2 = box; // 在棧記憶體中再生成一個box2'lee';
// box和box2完全獨立;兩個變量分别操作時互不影響;
// 引用類型指派的是位址;
var box = new Object(); // 建立一個引用類型;box在棧記憶體中;而Object在堆記憶體中;
box.name = 'lee'; // 新增一個屬性;
var box2 = box; // 把引用位址指派給box2;box2在棧記憶體中;
// box2=box,因為它們指向的是同一個對象;
// 如果這個對象中的name屬性被修改了,box.name和box2.name輸出的值都會被修改掉;</span>
4.傳遞參數
// JS中所有函數的參數都是按值傳遞的,即參數不會按引用傳遞;
function
box(num){
// 按值傳遞,傳遞的參數是基本類型;
num +=10;
// 這裡的num是局部變量,全局無效;
return
num;
}
var
num = 50;
var
result = box(num);
console.log(result);
// 60;
console.log(num);
// 50;
function
box(num){
return
num;
}
console.log(num);
// num is not defined;
function
box(obj){
obj.name =
'lee'
;
var
obj =
new
Object();
// 函數内部又建立了一個對象,它是局部變量;但在函數結束時被銷毀了;
obj.name =
'Mr'
;
// 并沒有替換掉原來的obj;
}
var
p =
new
Object();
box(p);
// 變量p被傳遞到box()函數中之後就被複制給了obj;在函數内部,obj和p通路的是同一個對象;
console.log(p.name);
// =>lee;
// JS函數的參數都将是局部變量;也就是說,沒有按引用傳遞;
5.檢測類型
<span style="font-size:18px;">// 要檢測一個變量的類型,通過typeof運算符類判斷;
// 多用來檢測基本類型;
var box = 'lee';
console.log(typeof box); // =>string;
// 要檢測變量是什麼類型的對象,通過instanceof運算符來檢視;
var box = [1,2,3];
console.log(box instanceof Array); // =>true;
var box2 = {};
console.log(box2 instanceof Object);
var box3 = /g/;
console.lgo(box3 instanceof RegExp);
var box4 = new String('lee');
console.log(box4 instanceof String); // =>true;是否是字元串對象;
var box5 = 'string';
console.log(box5 instanceof String); // =>false;
// 當使用instanceof檢查基本類型的值時,它會傳回false;</span>
6.執行環境及作用域
<span style="font-size:18px;">// 執行環境:定義了變量或函數有權通路的其他資料,決定了它們各自的行為;
// 在Web浏覽器中,全局執行環境=window對象;
// 是以所有的全局變量和函數都是作為window對象的屬性和方法建立的;
var box = 'blue'; // 聲明一個全局變量;
function setBox(){
console.log(box); // 全局變量可以在函數裡通路;
}
setBox(); // 執行函數;
// 全局的變量=window對象的屬性;
// 全局的函數=window對象的方法;
// PS:當執行環境中的所有代碼執行完畢後,該環境被銷毀,儲存在其中的所有變量和函數定義也随之銷毀;
// 如果是在全局環境下,需要程式執行完畢,或者網頁被關閉才會銷毀;
// PS:每個執行環境都有一個與之關聯的變量對象,就好比全局的window可以調用全局變量和全局方法一樣;
// 局部的環境也有一個類似window的變量對象,環境中定義的所有變量和函數都儲存在這個對象中;
// (我們無法通路這個變量對象,但解析器會處理資料時背景使用它);
var box = 'blue';
function setBox(){
var box = 'red'; // 這裡是局部變量,在目前函數體内的值是'red';出了函數體就不被認知;
console.log(box);
}
setBox();
console.log(box);
// 通過傳參可以替換函數體内的局部變量,但作用域僅限在函數體内這個局部環境;
var box = 'blue';
function setBox(box){ // 通過傳參,将局部變量替換成了全局變量;
alert(box); // 此時box的值是外部調用時傳入的參數;=>red;
}
setBox('red');
alert(box);
// 如果函數體内還包含着函數,隻有這個内函數才可以通路外一層的函數的變量;
// 内部環境可以通過作用域鍊通路所有的外部環境,但外部環境不能通路内部環境中的任何變量和函數;
var box = 'blue';
function setBox(){
function setColor(){
var b = 'orange';
alert(box);
alert(b);
}
setColor(); // setColor()的執行環境在setBox()内;
}
setBox();
// PS:每個函數被調用時都會建立自己的執行環境;當執行到這個函數時,函數的環境就會被推到環境棧中去執行,而執行後又在環境棧中彈出(退出),把控制權交給上一級的執行環境;
// PS:當代碼在一個環境中執行時,就會形成一種叫做作用域鍊的東西;它的用途是保證對執行環境中有通路權限的變量和函數進行有序通路;作用域鍊的前端,就是執行環境的變量對象;
</span>
7.延長作用域鍊
// 有些語句可以在作用域鍊的前端臨時增加一個變量對象,該變量對象會在代碼執行後被移除;
// with語句和try-catch語句;這兩個語句都會在作用域鍊的前端添加一個變量對象;
// with語句:會将指定的對象添加到作用域鍊中;
// catch語句:會建立一個新的變量對象,其中包含的是被抛出的錯誤對象的聲明;
function buildUrl(){
var qs = '?debug=true';
with(location){ // with語句接收的是location對象,是以變量對象中就包含了location對象的所有屬性和方法;
var url = href+qs; // 而這個變量對象被添加到了作用域鍊的前端;
};
return url;
}
8.沒有塊級作用域
<span style="font-size:18px;">
// 塊級作用域:表示諸如if語句等有花括号封閉的代碼塊,是以,支援條件判斷來定義變量;
if(true){ // if語句代碼塊沒有局部作用域;
var box = 'lee'; // 變量聲明會将變量添加到目前的執行環境(在這裡是全局環境);
}
alert(box);
for(var i=0; i<10; i++){ // 建立的變量i即使在for循環執行結束後,也依舊會存在與循環外部的執行環境中;
var box = 'lee';
}
alert(i);
alert(box);
function box(num1,num2){
var sum = num1+num2; // 此時sum是局部變量;如果去掉var,sum就是全局變量了;
return sum;
}
alert(box(10,10));
alert(sum); // sum is not defined;通路不到sum;
// PS:不建議不使用var就初始化變量,因為這種方法會導緻各種意外發生;
// 一般确定變量都是通過搜尋來确定該辨別符實際代表什麼;搜尋方式:向上逐級查詢;
var box = 'blue';
function getBox(){
return box; // 此時box是全局變量;如果是var box='red',那就變成局部變量了;
}
alert(getBox());
// 調用getBox()時會引用變量box;
// 首先,搜尋getBox()的變量對象,查找名為box的辨別符;
// 然後,搜尋繼續下一個變量對象(全局環境的變量對象),找到了box辨別符;
// PS:變量查詢中，通路局部變量要比全局變量更快，因為不需要向上搜尋作用域鍊；</span>
二 記憶體問題
<span style="font-size:18px;">// JS具有自動垃圾收集機制,執行環境會負責管理代碼執行過程中使用的記憶體;它會自行管理記憶體配置設定及無用記憶體的回收;
// JS最常用的垃圾收集方式就是标記清除;垃圾收集器會在運作的時候給存儲在記憶體中的變量加上标記;
// 然後,它會去掉環境中正在使用的變量的标記,而沒有被去掉标記的變量将被視為準備删除的變量;
// 最後,垃圾收集器完成記憶體清理工作,銷毀那些标記的值并回收他們所占用的記憶體空間;
// 垃圾收集器是周期性運作的,這樣會導緻整個程式的性能問題;
// 比如IE7以前的版本,他的垃圾收集器是根據記憶體配置設定量運作的,比如256個變量就開始運作垃圾收集器,這樣就不得不頻繁地運作,進而降低了性能;
// 一般來說,確定占用最少的記憶體可以讓頁面獲得更好的性能;
// 最佳方案:一旦資料不再使用,将其值設定為null來釋放引用,這個做法叫做解除引用;
var o = {
name:'lee';
};
o = null; // 解除對象引用,等待垃圾收集器回收;</span>
三 小結
1.變量
// JS變量可以儲存兩種類型的值:基本類型值和引用類型值;它們具有以下特點:
// 1.基本類型值在記憶體中占據固定大小的空間,是以被儲存在棧記憶體中;
// 2.從一個變量向另一個變量複制基本類型的值,會建立這個值的一個副本;
// 3.引用類型的值是對象,儲存在堆記憶體中;
// 4.包含引用類型值的變量實際上包含的并不是對象本身,而是一個指向該對象的指針;
// 5.從一個變量向另一個變量複制引用類型的值,複制的其實是指針,是以兩個變量最終都指向用一個對象;
// 6.确定一個值是哪種基本類型可以使用typeof操作符;而确定一個值是哪種引用類型可以使用instanceof操作符;
2.作用域
// 所有變量都存在于一個執行環境(作用域)中,這個執行環境決定了變量的生命周期,以及哪一部分代碼可以通路其中的變量;
// 1.執行環境有全局執行環境和函數執行環境之分;
// 2.每次進入一個新執行環境,都會建立一個用于搜尋變量和函數的作用域鍊;
// 3.函數的局部環境不僅有權通路函數作用域中的變量，而且有權通路其父環境，乃至全局環境；
// 4.變量的執行環境有助于确定應該合适釋放記憶體;
3.記憶體
// JS自動垃圾收集機制
// 1.離開作用域的值将被自動标記為可以回收,是以将在垃圾收集期間被删除;
// 2.為了確定有效地回收記憶體,應該及時解除不再使用的全局對象/全局對象屬性以及循環引用變量的引用;
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)