JavaScript 變量、作用域及內(nèi)存
JS變量是松散型的(不強(qiáng)制類(lèi)型)本質(zhì),決定了它只是在特定時(shí)間用于保存特定值的一個(gè)名字而已;
由于不存在定義某個(gè)變量必須要保存何種數(shù)據(jù)類(lèi)型值的規(guī)則,變量的值及其數(shù)據(jù)類(lèi)型可以在腳本的生命周期內(nèi)改變;
一 變量及作用域
1.基本類(lèi)型和引用類(lèi)型
// JS變量包含兩種不同的數(shù)據(jù)類(lèi)型的值:基本類(lèi)型值和引用類(lèi)型值;
// 1.基本類(lèi)型值:保存在棧內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段;即這種值完全保存在內(nèi)存中的一個(gè)位置;
// 基本類(lèi)型值包含:Undefined|Null|Boolean|Number|String;
// 這些類(lèi)型在內(nèi)存中占有固定大小的空間;它們的值保存在棧空間,我們按值來(lái)訪(fǎng)問(wèn);
// 2.引用類(lèi)型值:保存在堆內(nèi)存中的對(duì)象(可能由多個(gè)值構(gòu)成),即變量中保存的實(shí)際上只是一個(gè)指針,這個(gè)指針指向內(nèi)存中的另一個(gè)位置,該位置保存對(duì)象;
// 引用類(lèi)型的值的大小不固定,因此不能保存在棧內(nèi)存,必須保存在堆內(nèi)存中;但可以將引用類(lèi)型的值的內(nèi)存地址保存在棧內(nèi)存中;
// 當(dāng)查詢(xún)引用類(lèi)型的變量時(shí),先從棧內(nèi)存中讀取內(nèi)存地址,然后通過(guò)地址找到堆內(nèi)存中的值;=>按引用訪(fǎng)問(wèn);
2.動(dòng)態(tài)屬性
// 定義基本類(lèi)型值和引用類(lèi)型值的方式相似:創(chuàng)建一個(gè)變量并為該變量賦值; // 但當(dāng)這個(gè)值保存到變量中以后,對(duì)不同類(lèi)型值可以執(zhí)行的操作則不一樣; var box = new Object(); // 創(chuàng)建引用類(lèi)型; box.name = 'lee'; // 新增一個(gè)屬性; console.log(box.name); // =>lee; var box = 'lee'; // 創(chuàng)建基本類(lèi)型 box.age = 15; // 給基本類(lèi)型添加屬性; console.log(box.age); // =>undefined;
3.復(fù)制變量值
// 在變量復(fù)制方面,基本類(lèi)型和引用類(lèi)型也有所不同; // 基本類(lèi)型賦值的是值本身; var box = 'lee'; // 在棧內(nèi)存中生成一個(gè)box'lee'; var box2 = box; // 在棧內(nèi)存中再生成一個(gè)box2'lee'; // box和box2完全獨(dú)立;兩個(gè)變量分別操作時(shí)互不影響; // 引用類(lèi)型賦值的是地址; var box = new Object(); // 創(chuàng)建一個(gè)引用類(lèi)型;box在棧內(nèi)存中;而Object在堆內(nèi)存中; box.name = 'lee'; // 新增一個(gè)屬性; var box2 = box; // 把引用地址賦值給box2;box2在棧內(nèi)存中; // box2=box,因?yàn)樗鼈冎赶虻氖峭粋€(gè)對(duì)象; // 如果這個(gè)對(duì)象中的name屬性被修改了,box.name和box2.name輸出的值都會(huì)被修改掉;
4.傳遞參數(shù)
// JS中所有函數(shù)的參數(shù)都是按值傳遞的,即參數(shù)不會(huì)按引用傳遞; function box(num){ // 按值傳遞,傳遞的參數(shù)是基本類(lèi)型; num +=10; // 這里的num是局部變量,全局無(wú)效; 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(); // 函數(shù)內(nèi)部又創(chuàng)建了一個(gè)對(duì)象,它是局部變量;但在函數(shù)結(jié)束時(shí)被銷(xiāo)毀了; obj.name = 'Mr'; // 并沒(méi)有替換掉原來(lái)的obj; } var p = new Object(); box(p); // 變量p被傳遞到box()函數(shù)中之后就被復(fù)制給了obj;在函數(shù)內(nèi)部,obj和p訪(fǎng)問(wèn)的是同一個(gè)對(duì)象; console.log(p.name); // =>lee; // JS函數(shù)的參數(shù)都將是局部變量;也就是說(shuō),沒(méi)有按引用傳遞;
5.檢測(cè)類(lèi)型
// 要檢測(cè)一個(gè)變量的類(lèi)型,通過(guò)typeof運(yùn)算符類(lèi)判斷; // 多用來(lái)檢測(cè)基本類(lèi)型; var box = 'lee'; console.log(typeof box); // =>string; // 要檢測(cè)變量是什么類(lèi)型的對(duì)象,通過(guò)instanceof運(yùn)算符來(lái)查看; 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;是否是字符串對(duì)象; var box5 = 'string'; console.log(box5 instanceof String); // =>false; // 當(dāng)使用instanceof檢查基本類(lèi)型的值時(shí),它會(huì)返回false;
6.執(zhí)行環(huán)境及作用域
// 執(zhí)行環(huán)境:定義了變量或函數(shù)有權(quán)訪(fǎng)問(wèn)的其他數(shù)據(jù),決定了它們各自的行為; // 在Web瀏覽器中,全局執(zhí)行環(huán)境=window對(duì)象; // 因此所有的全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的; var box = 'blue'; // 聲明一個(gè)全局變量; function setBox(){ console.log(box); // 全局變量可以在函數(shù)里訪(fǎng)問(wèn); } setBox(); // 執(zhí)行函數(shù); // 全局的變量=window對(duì)象的屬性; // 全局的函數(shù)=window對(duì)象的方法; // PS:當(dāng)執(zhí)行環(huán)境中的所有代碼執(zhí)行完畢后,該環(huán)境被銷(xiāo)毀,保存在其中的所有變量和函數(shù)定義也隨之銷(xiāo)毀; // 如果是在全局環(huán)境下,需要程序執(zhí)行完畢,或者網(wǎng)頁(yè)被關(guān)閉才會(huì)銷(xiāo)毀; // PS:每個(gè)執(zhí)行環(huán)境都有一個(gè)與之關(guān)聯(lián)的變量對(duì)象,就好比全局的window可以調(diào)用全局變量和全局方法一樣; // 局部的環(huán)境也有一個(gè)類(lèi)似window的變量對(duì)象,環(huán)境中定義的所有變量和函數(shù)都保存在這個(gè)對(duì)象中; // (我們無(wú)法訪(fǎng)問(wèn)這個(gè)變量對(duì)象,但解析器會(huì)處理數(shù)據(jù)時(shí)后臺(tái)使用它); var box = 'blue'; function setBox(){ var box = 'red'; // 這里是局部變量,在當(dāng)前函數(shù)體內(nèi)的值是'red';出了函數(shù)體就不被認(rèn)知; console.log(box); } setBox(); console.log(box); // 通過(guò)傳參可以替換函數(shù)體內(nèi)的局部變量,但作用域僅限在函數(shù)體內(nèi)這個(gè)局部環(huán)境; var box = 'blue'; function setBox(box){ // 通過(guò)傳參,將局部變量替換成了全局變量; alert(box); // 此時(shí)box的值是外部調(diào)用時(shí)傳入的參數(shù);=>red; } setBox('red'); alert(box); // 如果函數(shù)體內(nèi)還包含著函數(shù),只有這個(gè)內(nèi)函數(shù)才可以訪(fǎng)問(wèn)外一層的函數(shù)的變量; // 內(nèi)部環(huán)境可以通過(guò)作用域鏈訪(fǎng)問(wèn)所有的外部環(huán)境,但外部環(huán)境不能訪(fǎng)問(wèn)內(nèi)部環(huán)境中的任何變量和函數(shù); var box = 'blue'; function setBox(){ function setColor(){ var b = 'orange'; alert(box); alert(b); } setColor(); // setColor()的執(zhí)行環(huán)境在setBox()內(nèi); } setBox(); // PS:每個(gè)函數(shù)被調(diào)用時(shí)都會(huì)創(chuàng)建自己的執(zhí)行環(huán)境;當(dāng)執(zhí)行到這個(gè)函數(shù)時(shí),函數(shù)的環(huán)境就會(huì)被推到環(huán)境棧中去執(zhí)行,而執(zhí)行后又在環(huán)境棧中彈出(退出),把控制權(quán)交給上一級(jí)的執(zhí)行環(huán)境; // PS:當(dāng)代碼在一個(gè)環(huán)境中執(zhí)行時(shí),就會(huì)形成一種叫做作用域鏈的東西;它的用途是保證對(duì)執(zhí)行環(huán)境中有訪(fǎng)問(wèn)權(quán)限的變量和函數(shù)進(jìn)行有序訪(fǎng)問(wèn);作用域鏈的前端,就是執(zhí)行環(huán)境的變量對(duì)象;
7.延長(zhǎng)作用域鏈
// 有些語(yǔ)句可以在作用域鏈的前端臨時(shí)增加一個(gè)變量對(duì)象,該變量對(duì)象會(huì)在代碼執(zhí)行后被移除; // with語(yǔ)句和try-catch語(yǔ)句;這兩個(gè)語(yǔ)句都會(huì)在作用域鏈的前端添加一個(gè)變量對(duì)象; // with語(yǔ)句:會(huì)將指定的對(duì)象添加到作用域鏈中; // catch語(yǔ)句:會(huì)創(chuàng)建一個(gè)新的變量對(duì)象,其中包含的是被拋出的錯(cuò)誤對(duì)象的聲明; function buildUrl(){ var qs = '?debug=true'; with(location){ // with語(yǔ)句接收的是location對(duì)象,因此變量對(duì)象中就包含了location對(duì)象的所有屬性和方法; var url = href+qs; // 而這個(gè)變量對(duì)象被添加到了作用域鏈的前端; }; return url; }
8.沒(méi)有塊級(jí)作用域
// 塊級(jí)作用域:表示諸如if語(yǔ)句等有花括號(hào)封閉的代碼塊,所以,支持條件判斷來(lái)定義變量; if(true){ // if語(yǔ)句代碼塊沒(méi)有局部作用域; var box = 'lee'; // 變量聲明會(huì)將變量添加到當(dāng)前的執(zhí)行環(huán)境(在這里是全局環(huán)境); } alert(box); for(var i=0; i<10; i++){ // 創(chuàng)建的變量i即使在for循環(huán)執(zhí)行結(jié)束后,也依舊會(huì)存在與循環(huán)外部的執(zhí)行環(huán)境中; var box = 'lee'; } alert(i); alert(box); function box(num1,num2){ var sum = num1+num2; // 此時(shí)sum是局部變量;如果去掉var,sum就是全局變量了; return sum; } alert(box(10,10)); alert(sum); // sum is not defined;訪(fǎng)問(wèn)不到sum; // PS:不建議不使用var就初始化變量,因?yàn)檫@種方法會(huì)導(dǎo)致各種意外發(fā)生; // 一般確定變量都是通過(guò)搜索來(lái)確定該標(biāo)識(shí)符實(shí)際代表什么;搜索方式:向上逐級(jí)查詢(xún); var box = 'blue'; function getBox(){ return box; // 此時(shí)box是全局變量;如果是var box='red',那就變成局部變量了; } alert(getBox()); // 調(diào)用getBox()時(shí)會(huì)引用變量box; // 首先,搜索getBox()的變量對(duì)象,查找名為box的標(biāo)識(shí)符; // 然后,搜索繼續(xù)下一個(gè)變量對(duì)象(全局環(huán)境的變量對(duì)象),找到了box標(biāo)識(shí)符; // PS:變量查詢(xún)中,訪(fǎng)問(wèn)局部變量要比全局變量更快,因?yàn)椴恍枰蛏纤阉髯饔糜蜴湥?/pre>
二 內(nèi)存問(wèn)題
// JS具有自動(dòng)垃圾收集機(jī)制,執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過(guò)程中使用的內(nèi)存;它會(huì)自行管理內(nèi)存分配及無(wú)用內(nèi)存的回收; // JS最常用的垃圾收集方式就是標(biāo)記清除;垃圾收集器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的變量加上標(biāo)記; // 然后,它會(huì)去掉環(huán)境中正在使用的變量的標(biāo)記,而沒(méi)有被去掉標(biāo)記的變量將被視為準(zhǔn)備刪除的變量; // 最后,垃圾收集器完成內(nèi)存清理工作,銷(xiāo)毀那些標(biāo)記的值并回收他們所占用的內(nèi)存空間; // 垃圾收集器是周期性運(yùn)行的,這樣會(huì)導(dǎo)致整個(gè)程序的性能問(wèn)題; // 比如IE7以前的版本,他的垃圾收集器是根據(jù)內(nèi)存分配量運(yùn)行的,比如256個(gè)變量就開(kāi)始運(yùn)行垃圾收集器,這樣就不得不頻繁地運(yùn)行,從而降低了性能; // 一般來(lái)說(shuō),確保占用最少的內(nèi)存可以讓頁(yè)面獲得更好的性能; // 最佳方案:一旦數(shù)據(jù)不再使用,將其值設(shè)置為null來(lái)釋放引用,這個(gè)做法叫做解除引用; var o = { name:'lee'; }; o = null; // 解除對(duì)象引用,等待垃圾收集器回收;
三 小結(jié)
1.變量
// JS變量可以保存兩種類(lèi)型的值:基本類(lèi)型值和引用類(lèi)型值;它們具有以下特點(diǎn):
// 1.基本類(lèi)型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中;
// 2.從一個(gè)變量向另一個(gè)變量復(fù)制基本類(lèi)型的值,會(huì)創(chuàng)建這個(gè)值的一個(gè)副本;
// 3.引用類(lèi)型的值是對(duì)象,保存在堆內(nèi)存中;
// 4.包含引用類(lèi)型值的變量實(shí)際上包含的并不是對(duì)象本身,而是一個(gè)指向該對(duì)象的指針;
// 5.從一個(gè)變量向另一個(gè)變量復(fù)制引用類(lèi)型的值,復(fù)制的其實(shí)是指針,因此兩個(gè)變量最終都指向用一個(gè)對(duì)象;
// 6.確定一個(gè)值是哪種基本類(lèi)型可以使用typeof操作符;而確定一個(gè)值是哪種引用類(lèi)型可以使用instanceof操作符;
2.作用域
// 所有變量都存在于一個(gè)執(zhí)行環(huán)境(作用域)中,這個(gè)執(zhí)行環(huán)境決定了變量的生命周期,以及哪一部分代碼可以訪(fǎng)問(wèn)其中的變量;
// 1.執(zhí)行環(huán)境有全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境之分;
// 2.每次進(jìn)入一個(gè)新執(zhí)行環(huán)境,都會(huì)創(chuàng)建一個(gè)用于搜索變量和函數(shù)的作用域鏈;
// 3.函數(shù)的局部環(huán)境不僅有權(quán)訪(fǎng)問(wèn)函數(shù)作用域中的變量,而且有權(quán)訪(fǎng)問(wèn)其父環(huán)境,乃至全局環(huán)境;
// 4.變量的執(zhí)行環(huán)境有助于確定應(yīng)該合適釋放內(nèi)存;
3.內(nèi)存
// JS自動(dòng)垃圾收集機(jī)制
// 1.離開(kāi)作用域的值將被自動(dòng)標(biāo)記為可以回收,因此將在垃圾收集期間被刪除;
// 2.為了確保有效地回收內(nèi)存,應(yīng)該及時(shí)解除不再使用的全局對(duì)象/全局對(duì)象屬性以及循環(huán)引用變量的引用;
- JavaScript高級(jí)程序設(shè)計(jì)之變量與作用域
- JS中作用域以及變量范圍分析
- JavaScript變量作用域及內(nèi)存問(wèn)題實(shí)例分析
- JS塊級(jí)作用域和私有變量實(shí)例分析
- JavaScript變量類(lèi)型以及變量作用域詳解
- javascript 的變量、作用域和內(nèi)存問(wèn)題
- JS變量及其作用域
- js 作用域和變量詳解
- 關(guān)于JS變量和作用域詳解
- JavaScript變量的作用域全解析
- JavaScript中的變量作用域介紹
- js變量、作用域及內(nèi)存詳解
- 深入解析JavaScript中的變量作用域
- Javascript變量作用域詳解
- JavaScript中變量的作用域詳解
相關(guān)文章
javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁(yè)
Slip.js能做什么?Slip.js可以讓你的手機(jī)網(wǎng)站像原生手機(jī)軟件一樣慣性滾動(dòng),手觸圖片輪換等等,對(duì)Slip.js感興趣的小伙伴們可以參考一下2015-11-11js ajaxfileupload.js上傳報(bào)錯(cuò)的解決方法
這篇文章主要為大家詳細(xì)介紹了js ajaxupload.js上傳報(bào)錯(cuò)的解決方法,感興趣的小伙伴們可以參考一下2016-05-05JavaScript實(shí)現(xiàn)身份證驗(yàn)證代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)身法證驗(yàn)證代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08通過(guò)JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇通過(guò)JS獲取Request.QueryString()參數(shù)的值實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09原生JavaScript實(shí)現(xiàn)購(gòu)物車(chē)
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)購(gòu)物車(chē),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08頁(yè)面間固定參數(shù),通過(guò)cookie傳值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇頁(yè)面間固定參數(shù),通過(guò)cookie傳值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05Webpack 4如何動(dòng)態(tài)切割JS注入文件名詳解
這篇文章主要給大家介紹了關(guān)于Webpack 4如何動(dòng)態(tài)切割JS注入文件名的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Webpack4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07