// JS變量是松散型的(不強制類型)本質(zhì),決定了它只是在特定時間用于保存特定值的一個名字而已;

// 由于不存在定義某個變量必須要保存何種數(shù)據(jù)類型值的規(guī)則,變量的值及其數(shù)據(jù)類型可以在腳本的生命周期內(nèi)改變;

??一 變量及作用域

1.基本類型和引用類型

1 // JS變量包含兩種不同的數(shù)據(jù)類型的值:基本類型值和引用類型值; 2 3 // 1.基本類型值:保存在棧內(nèi)存中的簡單數(shù)據(jù)段;即這種值完全保存在內(nèi)存中的一個位置; 4 // 基本類型值包含:Undefined|Null|Boolean|Number|String; 5 // 這些類型在內(nèi)存中占有固定大小的空間;它們的值保存在棧空間,我們按值來訪問; 6 7 // 2.引用類型值:保存在堆內(nèi)存中的對象(可能由多個值構(gòu)成),即變量中保存的實際上只是一個指針,這個指針指向內(nèi)存中的另一個位置,該位置保存對象; 8 // 引用類型的值的大小不固定,因此不能保存在棧內(nèi)存,必須保存在堆內(nèi)存中;但可以將引用類型的值的內(nèi)存地址保存在棧內(nèi)存中; 9 // 當(dāng)查詢引用類型的變量時,先從棧內(nèi)存中讀取內(nèi)存地址,然后通過地址找到堆內(nèi)存中的值;=>按引用訪問;

?2.動態(tài)屬性

1 // 定義基本類型值和引用類型值的方式相似:創(chuàng)建一個變量并為該變量賦值; 2 // 但當(dāng)這個值保存到變量中以后,對不同類型值可以執(zhí)行的操作則不一樣; 3 var box = new Object(); // 創(chuàng)建引用類型; 4 box.name = 'lee'; // 新增一個屬性; 5 console.log(box.name); // =>lee; 6 7 var box = 'lee'; // 創(chuàng)建基本類型 8 box.age = 15; // 給基本類型添加屬性; 9 console.log(box.age); // =>undefined;

?3.復(fù)制變量值

1 // 在變量復(fù)制方面,基本類型和引用類型也有所不同; 2 // 基本類型賦值的是值本身; 3 var box = 'lee'; // 在棧內(nèi)存中生成一個box'lee'; 4 var box2 = box; // 在棧內(nèi)存中再生成一個box2'lee'; 5 // box和box2完全獨立;兩個變量分別操作時互不影響; 6 7 // 引用類型賦值的是地址; 8 var box = new Object(); // 創(chuàng)建一個引用類型;box在棧內(nèi)存中;而Object在堆內(nèi)存中; 9 box.name = 'lee'; // 新增一個屬性; 10 var box2 = box; // 把引用地址賦值給box2;box2在棧內(nèi)存中; 11 // box2=box,因為它們指向的是同一個對象; 12 // 如果這個對象中的name屬性被修改了,box.name和box2.name輸出的值都會被修改掉;

?4.傳遞參數(shù)

1 // JS中所有函數(shù)的參數(shù)都是按值傳遞的,即參數(shù)不會按引用傳遞; 2 function box(num){ // 按值傳遞,傳遞的參數(shù)是基本類型; 3 num +=10; // 這里的num是局部變量,全局無效; 4 return num; 5 } 6 var num = 50; 7 var result = box(num); 8 console.log(result); // 60; 9 console.log(num); // 50; 10 11 function box(num){ 12 return num; 13 } 14 console.log(num); // num is not defined; 15 16 function box(obj){ 17 obj.name = 'lee'; 18 var obj = new Object(); // 函數(shù)內(nèi)部又創(chuàng)建了一個對象,它是局部變量;但在函數(shù)結(jié)束時被銷毀了; 19 obj.name = 'Mr'; // 并沒有替換掉原來的obj; 20 } 21 var p = new Object(); 22 box(p); // 變量p被傳遞到box()函數(shù)中之后就被復(fù)制給了obj;在函數(shù)內(nèi)部,obj和p訪問的是同一個對象; 23 console.log(p.name); // =>lee; 24 25 // JS函數(shù)的參數(shù)都將是局部變量;也就是說,沒有按引用傳遞;

5.檢測類型

1 // 要檢測一個變量的類型,通過typeof運算符類判斷; 2 // 多用來檢測基本類型; 3 var box = 'lee'; 4 console.log(typeof box); // =>string; 5 6 // 要檢測變量是什么類型的對象,通過instanceof運算符來查看; 7 var box = [1,2,3]; 8 console.log(box instanceof Array); // =>true; 9 var box2 = {}; 10 console.log(box2 instanceof Object); 11 var box3 = /g/; 12 console.lgo(box3 instanceof RegExp); 13 var box4 = new String('lee'); 14 console.log(box4 instanceof String); // =>true;是否是字符串對象; 15 16 var box5 = 'string'; 17 console.log(box5 instanceof String); // =>false; 18 // 當(dāng)使用instanceof檢查基本類型的值時,它會返回false;

6.執(zhí)行環(huán)境及作用域

1 // 執(zhí)行環(huán)境:定義了變量或函數(shù)有權(quán)訪問的其他數(shù)據(jù),決定了它們各自的行為; 2 // 在Web瀏覽器中,全局執(zhí)行環(huán)境=window對象; 3 // 因此所有的全局變量和函數(shù)都是作為window對象的屬性和方法創(chuàng)建的; 4 var box = 'blue'; // 聲明一個全局變量; 5 function setBox(){ 6 console.log(box); // 全局變量可以在函數(shù)里訪問; 7 } 8 setBox(); // 執(zhí)行函數(shù); 9 // 全局的變量=window對象的屬性; 10 // 全局的函數(shù)=window對象的方法; 11 12 // PS:當(dāng)執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后,該環(huán)境被銷毀,保存在其中的所有變量和函數(shù)定義也隨之銷毀; 13 // 如果是在全局環(huán)境下,需要程序執(zhí)行完畢,或者網(wǎng)頁被關(guān)閉才會銷毀; 14 15 // PS:每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象,就好比全局的window可以調(diào)用全局變量和全局方法一樣; 16 // 局部的環(huán)境也有一個類似window的變量對象,環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中; 17 // (我們無法訪問這個變量對象,但解析器會處理數(shù)據(jù)時后臺使用它); 18 var box = 'blue'; 19 function setBox(){ 20 var box = 'red'; // 這里是局部變量,在當(dāng)前函數(shù)體內(nèi)的值是'red';出了函數(shù)體就不被認(rèn)知; 21 console.log(box); 22 } 23 setBox(); 24 console.log(box); 25 26 // 通過傳參可以替換函數(shù)體內(nèi)的局部變量,但作用域僅限在函數(shù)體內(nèi)這個局部環(huán)境; 27 var box = 'blue'; 28 function setBox(box){ // 通過傳參,將局部變量替換成了全局變量; 29 alert(box); // 此時box的值是外部調(diào)用時傳入的參數(shù);=>red; 30 } 31 setBox('red'); 32 alert(box); 33 34 // 如果函數(shù)體內(nèi)還包含著函數(shù),只有這個內(nèi)函數(shù)才可以訪問外一層的函數(shù)的變量; 35 // 內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境,但外部環(huán)境不能訪問內(nèi)部環(huán)境中的任何變量和函數(shù); 36 var box = 'blue'; 37 function setBox(){ 38 function setColor(){ 39 var b = 'orange'; 40 alert(box); 41 alert(b); 42 } 43 setColor(); // setColor()的執(zhí)行環(huán)境在setBox()內(nèi); 44 } 45 setBox(); 46 // PS:每個函數(shù)被調(diào)用時都會創(chuàng)建自己的執(zhí)行環(huán)境;當(dāng)執(zhí)行到這個函數(shù)時,函數(shù)的環(huán)境就會被推到環(huán)境棧中去執(zhí)行,而執(zhí)行后又在環(huán)境棧中彈出(退出),把控制權(quán)交給上一級的執(zhí)行環(huán)境; 47 48 // PS:當(dāng)代碼在一個環(huán)境中執(zhí)行時,就會形成一種叫做作用域鏈的東西;它的用途是保證對執(zhí)行環(huán)境中有訪問權(quán)限的變量和函數(shù)進(jìn)行有序訪問;作用域鏈的前端,就是執(zhí)行環(huán)境的變量對象;

7.延長作用域鏈

1 // 有些語句可以在作用域鏈的前端臨時增加一個變量對象,該變量對象會在代碼執(zhí)行后被移除; 2 // with語句和try-catch語句;這兩個語句都會在作用域鏈的前端添加一個變量對象; 3 // with語句:會將指定的對象添加到作用域鏈中; 4 // catch語句:會創(chuàng)建一個新的變量對象,其中包含的是被拋出的錯誤對象的聲明; 5 function buildUrl(){ 6 var qs = '?debug=true'; 7 with(location){ // with語句接收的是location對象,因此變量對象中就包含了location對象的所有屬性和方法; 8 var url = href+qs; // 而這個變量對象被添加到了作用域鏈的前端; 9 }; 10 return url; 11 }

8.沒有塊級作用域

1 // 塊級作用域:表示諸如if語句等有花括號封閉的代碼塊,所以,支持條件判斷來定義變量; 2 if(true){ // if語句代碼塊沒有局部作用域; 3 var box = 'lee'; // 變量聲明會將變量添加到當(dāng)前的執(zhí)行環(huán)境(在這里是全局環(huán)境); 4 } 5 alert(box); 6 7 for(var i=0; i<10; i++){ // 創(chuàng)建的變量i即使在for循環(huán)執(zhí)行結(jié)束后,也依舊會存在與循環(huán)外部的執(zhí)行環(huán)境中; 8 var box = 'lee'; 9 } 10 alert(i); 11 alert(box); 12 13 function box(num1,num2){ 14 var sum = num1+num2; // 此時sum是局部變量;如果去掉var,sum就是全局變量了; 15 return sum; 16 } 17 alert(box(10,10)); 18 alert(sum); // sum is not defined;訪問不到sum; 19 // PS:不建議不使用var就初始化變量,因為這種方法會導(dǎo)致各種意外發(fā)生; 20 21 // 一般確定變量都是通過搜索來確定該標(biāo)識符實際代表什么;搜索方式:向上逐級查詢; 22 var box = 'blue'; 23 function getBox(){ 24 return box; // 此時box是全局變量;如果是var box='red',那就變成局部變量了; 25 } 26 alert(getBox()); 27 // 調(diào)用getBox()時會引用變量box; 28 // 首先,搜索getBox()的變量對象,查找名為box的標(biāo)識符; 29 // 然后,搜索繼續(xù)下一個變量對象(全局環(huán)境的變量對象),找到了box標(biāo)識符; 30 // PS:變量查詢中，訪問局部變量要比全局變量更快，因為不需要向上搜索作用域鏈；

二 內(nèi)存問題

1 // JS具有自動垃圾收集機制,執(zhí)行環(huán)境會負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存;它會自行管理內(nèi)存分配及無用內(nèi)存的回收; 2 3 // JS最常用的垃圾收集方式就是標(biāo)記清除;垃圾收集器會在運行的時候給存儲在內(nèi)存中的變量加上標(biāo)記; 4 // 然后,它會去掉環(huán)境中正在使用的變量的標(biāo)記,而沒有被去掉標(biāo)記的變量將被視為準(zhǔn)備刪除的變量; 5 // 最后,垃圾收集器完成內(nèi)存清理工作,銷毀那些標(biāo)記的值并回收他們所占用的內(nèi)存空間; 6 7 // 垃圾收集器是周期性運行的,這樣會導(dǎo)致整個程序的性能問題; 8 // 比如IE7以前的版本,他的垃圾收集器是根據(jù)內(nèi)存分配量運行的,比如256個變量就開始運行垃圾收集器,這樣就不得不頻繁地運行,從而降低了性能; 9 10 // 一般來說,確保占用最少的內(nèi)存可以讓頁面獲得更好的性能; 11 // 最佳方案:一旦數(shù)據(jù)不再使用,將其值設(shè)置為null來釋放引用,這個做法叫做解除引用; 12 var o = { 13 name:'lee'; 14 }; 15 o = null; // 解除對象引用,等待垃圾收集器回收;

三 小結(jié)?

1 1.變量 2 // JS變量可以保存兩種類型的值:基本類型值和引用類型值;它們具有以下特點: 3 // 1.基本類型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中; 4 // 2.從一個變量向另一個變量復(fù)制基本類型的值,會創(chuàng)建這個值的一個副本; 5 // 3.引用類型的值是對象,保存在堆內(nèi)存中; 6 // 4.包含引用類型值的變量實際上包含的并不是對象本身,而是一個指向該對象的指針; 7 // 5.從一個變量向另一個變量復(fù)制引用類型的值,復(fù)制的其實是指針,因此兩個變量最終都指向用一個對象; 8 // 6.確定一個值是哪種基本類型可以使用typeof操作符;而確定一個值是哪種引用類型可以使用instanceof操作符; 9 10 2.作用域 11 // 所有變量都存在于一個執(zhí)行環(huán)境(作用域)中,這個執(zhí)行環(huán)境決定了變量的生命周期,以及哪一部分代碼可以訪問其中的變量; 12 // 1.執(zhí)行環(huán)境有全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境之分; 13 // 2.每次進(jìn)入一個新執(zhí)行環(huán)境,都會創(chuàng)建一個用于搜索變量和函數(shù)的作用域鏈; 14 // 3.函數(shù)的局部環(huán)境不僅有權(quán)訪問函數(shù)作用域中的變量，而且有權(quán)訪問其父環(huán)境，乃至全局環(huán)境； 15 // 4.變量的執(zhí)行環(huán)境有助于確定應(yīng)該合適釋放內(nèi)存; 16 17 3.內(nèi)存 18 // JS自動垃圾收集機制 19 // 1.離開作用域的值將被自動標(biāo)記為可以回收,因此將在垃圾收集期間被刪除; 20 // 2.為了確保有效地回收內(nèi)存,應(yīng)該及時解除不再使用的全局對象/全局對象屬性以及循環(huán)引用變量的引用;

?

轉(zhuǎn)載于:https://www.cnblogs.com/yizihan/p/4339814.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript--变量、作用域及内存(12)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。