夯實JS系列--變量、做用域和內存問題

最近在忙於寫一個react+node的全棧博客demo,沒有時間更新文章。可是仍是以爲這樣一忙起來不更新是不該該的。正好在空閒上下班地鐵上都會再去細讀js原生知識。因此打算整理、總結、系統性的分享給你們。

基本類型和引用類型

在ECMAScript中，變量分爲基本類型和引用類型兩種。
基本類型就是存儲簡單的數據段。而引用類型指的是那些可能由多個值構成的對象。
在ECMAScript中，基本類型包括：Undefined、Null、Boolean、Number和String。
這些基本類型的對象都是按值訪問的。因此js中咱們能夠直接操做他們。
可是引用類型如Object等，是按照引用來操做的。並不是直接操做其值。
而且咱們能夠動態的爲引用類型變量添加屬性和方法。而基本類型則不能夠。

變量賦值和傳參

這裏其實對於基本類型來講沒有什麼須要重點說明的。這裏就重點說下引用類型吧

對於賦值

function setName(obj) {
  obj.name = "Neal";
  obj = new Object();
  obj.name = "yang";
}
var person = new Object();
setName(person);
console.log(person.name);複製代碼

如上代碼，最後console出來的是Neal。

這段代碼說明兩點：

• 引用類型在傳參的時候，是按照引用傳遞的，否則不可能person.name爲Neal
• 即便在函數內部修改了參數的值。原始的引用依然不變。實際上，在重寫obj的時候，這個變量的引用已是一個局部變量了。只是在這兒函數運行完，這個對象被銷燬了。

因此說到這，對於對象的賦值，一句以概之：引用的賦值。

執行環境及其做用域

這大概是一個很是基礎也是重要的部分，後續會在進階裏面詳細展開。

執行環境定義了變量或者函數有權訪問的其餘數據，決定了他們的行爲。每個執行環境都有一個與之關聯的變量對象（如global、window）。環境中定義的全部變量和函數都保存在這個對象中。

某一個執行環境執行完畢後，該環境會被銷燬。其中的全部的變量和函數也將隨之銷燬。全局執行環境知道應用程序退出才被銷燬（如關閉網頁等）

當代碼在一個環境中執行的時候，會建立變量對象的一個做用域鏈。做用域鏈的用途，是保證對執行環境有權訪問的變量和函數的有序訪問。做用域鏈的前端，始終是當前執行的代碼所在的
環境的變量對象。全局執行環境始終是做用域鏈的最後一個對象。

標識符的解析也就是沿着做用域鏈一級一級的搜索的過程。搜索過程從做用域鏈的前端開始，而後逐級向後回溯。知道找到標識符爲止。

var color = 'red';
function changeColor() {
  var anotherColor = 'blue';
  function swapColors() {
    var tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;
    //這個執行環境中能夠訪問到 tempColor color antherColor
  }
  //這裏只能訪問anotherColor color
  swapColors();
}
changeColor();//這裏只能訪問color複製代碼

因此從上面代碼咱們能夠感覺到：內部環境能夠經過做用域鏈訪問到外部環境的變量。反之不可。這些環境之間的聯繫都是線性、有次序的。

延長做用域鏈

雖然執行環境的類型只有兩種。局部的和全局的。可是還有一種方法能夠延長做用域鏈。

這是由於有些語句能夠在做用域鏈的前端臨時添加一個變量對象，改變量對象會在代碼執行後被移除。

• try-catch 語句中的catch
• with語句

對於width語句而言，會將指定的對象添加到做用域鏈中。對於catch語句而言，會建立一個新的變量對象，其中包含被拋出的錯誤對象的申明。

關於做用域、環境之類的話題後續會再細說。這裏做爲基礎篇，就先介紹到這裏。

垃圾收集

很開心~js不須要你來收拾垃圾！好~此篇完結！

好吧~雖然咱們不收拾垃圾，可是也是要稍微瞭解下js是如何收拾垃圾的。

首先什麼是垃圾：哪些再也不被繼續使用的變量都是垃圾。什麼叫收拾？釋放起垃圾所佔用的空間即爲釋放。

局部變量只在函數執行過過程當中存在。而在這個過程當中，會爲局部變量在棧或者堆中分配相應的內存空間（存值唄）。而後函數執行啦，用了這些變量，執行完啦。完啦！則這些變量就沒有用了。沒用了，則爲垃圾，既需清理。

可是並不是全部的狀況下都這麼容易的得出結論。垃圾收集器必須跟蹤哪一個變量用了哪一個變量沒用。對於不在利用的打上標記，已被未來收回其所佔用的內存。

標記清除

這是最爲經常使用一種清除方式。當一個變量進入到環境的時候，標記爲‘進入環境’，這個基本是不會被清除的，由於執行流進入到相應的環境的時候可能會用到。當變量離開環境的時候，標記爲‘離開環境’。

可使用任何方式來標記。咱們要知道是如何標記不重要，重要的是採用什麼策略。

垃圾收集器在運行的時候會給存儲在內存中的全部變量都加上標記。他會去掉環境中的變量以及被環境中的變量所引用的變量的標記。剩下的，則視爲嫌疑人，準備刪除。由於環境中的變量已經沒法訪問到這些變量了。目前IE、ff 、 opera 、 chrome都是這種標記清除方式

引用計數

由於不經常使用，簡單說下

引用計數的意思就是跟蹤記錄每個值被引用的次數。當一個引用類型的變量複製給一個變量的時候，這個引用次數則+1，若是有別複製給另外一個變量，則再+1，若是包含對這個值的引用的變量又被賦值了別的值。則這個值-1.

當引用次數爲0的時候，爲垃圾~回收！

爲何不經常使用呢？看着也很清晰啊！

look code:

function test() {
  var objectA = new Object();
  var objectB = new Object();

  objectA.someOtherObject = objectB;
  objectB.someOtherObject = objectA;
}複製代碼

如上，對象A和對象B的屬性互相引用。也就是說，這兩個對象的引用次數永遠都是2.哪怕這個函數執行完咯，也無法清理的。對的，這就是bug~

節制點~你懂得

雖然垃圾回收機制幫咱們作了不少事，可是電腦分配給瀏覽器的可用內存一般要比桌面應用的內存要小的多，畢竟是爲了防止運行js的網頁耗盡全部的內存而致使系統崩潰的問題發生。

因此咱們確保用最少的內存可讓頁面獲取最好的性能，最佳的執行方案就是執行中的代碼都是有必要的數據。就比如用最低的經濟拿最多的人頭同樣，一旦經濟不夠，技術彌補！一旦數據不要用了，本身主動掃除。

function createPerson(name) {
  var localPerson = new Object();
  localPerson.name = name;
  return localPerson;
}
var neal = createPerson('Neal');

//主動清理垃圾
createPerson = null;複製代碼

這裏講createPerson設置爲null，並無就把他給清除了，只是釋放了他的引用。讓其脫離其執行環境，以便於垃圾收集器更快的將其回收。

微信公衆號：前端的全棧之路

歡迎你們訂閱~更多原創文章整理（js、react）

一塊兒交流~一塊兒進步~