天天看點

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

作者 | Jeskson

1

在JavaScript中的變量分别區分為兩種:

一種為基本類型值,一種為引用類型值。

基本類型值指的是簡單的資料段

引用類型值為可能由多個值組成的對象

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

引用類型的值是儲存在記憶體中的對象,JavaScript不允許直接操作對象的記憶體空間,實際上操作對象的引用而不是實際對象。

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
var dada = new Object();
undefined
dada.name = "dada";
"dada"
console.log(dada.name);
VM158:1 dada
undefined      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
var da1 = "da1";
undefined
da1.age = 12;
12
console.log(da1.age);
VM272:1 undefined
undefined      

基本類型的值添加屬性,是不管用的,隻能給引用類型的值動态地添加屬性,才是有用的。

2

複制變量值

就是從一個變量向另一個變量複制 基本類型值 和 引用類型值

var da1 = 12;
var da2 = da1;      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

da1中儲存的值是12,使用da1的值來初始化da2時,da2中也儲存了值12,但是d2中的值12和da1中的值12是完全獨立的。這兩個變量可以參與任何操作互不影響。

從一個變量向另一個變量複制引用類型的值:

引用類型的值實際上是一個指針,是指向存儲在堆中的一個對象,引用類型的複制,是将指向引用同一個對象,是以改變其中一個變量,另一哥變量也會受到影響。

var da3 = new Object();
var da4 = da3;

da3.name = "dada";
console.log(da4.name);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

da3和da4指向同一個對象,da3添加name屬性後,da4來通路這個屬性,因為兩個變量指向同一個對象,是以輸出結果為dada。

3

參數傳遞:

在JavaScript中所有函數的參數都是按值傳遞的,參數按值傳遞的意思,和複制一樣的,把函數外的值傳遞到函數内部。

function addNum(num){
 num = num   1;
 return num;
}
var da5 = 12;
var result = addNum(da5);
console.log(da5);
console.log(result);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

函數addNum有一個參數num,這個參數實際為函數的局部變量。調用這個函數,變量da5作為參數被傳遞給了這個函數,這個變量的值為12,是以參數num為12在這個addNum()函數中使用。

function setName(obj) {
 obj.name = "dada";
}
var da6 = new Object();
setName(da6);
console.log(da6.name);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

檢測類型:

typeof操作符是用來檢測一個變量是否是基本資料類型,如果變量的值為一個對象或null,那麼這個typeof操作符下傳回的就是object。

var da7 = "dada";
var da8 = 12;
var da9;
var da10 = null;
var da11 = new Object();

console.log(typeof da7);
console.log(typeof da8);
console.log(typeof da9);
console.log(typeof da10);
console.log(typeof da11);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

instanceof操作符,是用來幹什麼的呢?判斷是什麼類型的對象。

// 前提先定義person
console.log(person instanceof Object);
console.log(person instanceof Array);
console.log(person instanceof RegExp);      

注意,所有的引用類型的值都是Object的執行個體,是以檢測引用類型的值和Object構造函數時,instanceof操作符都是傳回true。instanceof操作符檢測基本類型的值,傳回的則都是false。因為instanceof檢測的都是什麼類型的對象。

4

作用域:

當代碼在一個環境中執行時,會建立變量對象的一個作用域鍊,這個作用域鍊的用途是 保證對執行環境有權通路的多有變量和函數的有序通路。全局執行環境的變量對象都是作用域鍊中的最後一個對象。

辨別符解析是沿着作用域鍊一級一級地搜尋辨別符的過程。

var da12 = "dada"

function changeDa(){
 if(da12 === "dada"){
  da12 = "da";
 }else{
  da12 = "da1";
 }
}

changeDa();

console.log(da12);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

函數changeDa()的作用域鍊包含兩個對象:

它自己的變量對象,和,全局環境的 變量對象。

它自己的 定義着的arguments對象

var da12 = "dada"

function changeDa(){
 var anotherDa = "dadada";
 
 function daDa(){
  var tempDa = anotherDa;
  anotherDa = da12;
  da12 = tempDa;
  // 可以通路 tempDa, anotherDa,da12
 }
 // 這裡隻能通路 da12,anotherDa
 daDa();
}
// 這裡隻能通路da12;
changeDa();      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

分析執行環境,有3個,一個為全局環境,一個為changeDa()的局部環境,一個為daDa()的局部環境。

全局環境中有一個變量da12,和一個函數changeDa()。

changeDa()的局部環境中有什麼?

一個變量anotherDa,一個名為daDa()的函數。這個函數可以通路全局變量中的da12。

daDa()的局部環境中有什麼?

一個變量tempDa,該變量隻能在這個環境中通路。

無論是全局環境還是changeDa()的局部環境都無法通路tempDa。

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

為什麼内部的daDa()可以通路其他兩個環境中的所有變量呢?

因為那是它們兩個的環境是它的父執行環境。

内部環境可以通過作用域鍊通路所有的外部環境,但是外部環境不能通路内部環境中的任何變量和函數,内部環境都可以向上搜尋作用域鍊,查變量和函數名,不能向下搜尋作用域鍊進入另一個環境。

對于daDa()函數,其中作用域鍊包含3個對象:

daDa()的變量對象,changeDa()的變量對象,全局變量對象。

過程:

daDa()函數的局部環境,會先開始搜尋自己的變量對象中的變量和函數名,如果找不到,會向上搜尋上一級的作用域鍊。

對于changDa()中的環境:

它包含兩個對象::一為它自己的變量對象,二為全局變量對象。

即它不能通路daDa()函數的局部環境。

5

執行環境分兩種:

一種為全局作用域,一種為局部作用域。

如何了解 try catch 延長了作用域鍊?

with語句和 try catch 都可以延長作用域鍊

with比較好了解,而且一般有性能問題,也不推薦用

try catch 是捕獲Error對象的時候 會新開一個作用域嗎?

還是說 catch的大括号内就是一個能通路到error對象的塊級作用域?

try中的代碼捕獲到錯誤以後,會把異常對象推入一個可變對象并置于用域的頭部,在catch代碼塊内部,函數的所有局部變量将會被放在第二個作用域對象中,catch中的代碼執行完,會立即銷毀目前作用域。

執行環境(變量對象可謂是它的衍生物)、作用域、作用域鍊

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

作用域:函數目前執行環境。

作用域鍊:執行環境産生的變量對象構成。 作用域鍊是保證函數在執行時能夠正确通路需要的變量和函數。

作用域鍊最外層就是全局作用域

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
var i = 0;
function dada(){
    console.log(i);
}
undefined
dada();
VM656:3 0
undefine      

在函數中是沒有存在i的,但是在調用這個函數時會傳回為0,這是為什麼呢?這就是函數作用域鍊的作用。

延長一: try catch

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
(function(window){
   try{
       throw Error("出錯誤了");
   }catch(e){
      alert(e);  //alert("Error: 出錯誤了")
   }
   console.log(e);  //undefind
})(window);      

在執行catch語句塊時,JavaScript自動把其執行環境添加作用域鍊中,但是該語句塊執行完後又自動把該執行環境(變量對象)移除。

alert(e) ==  alert("Error:出現錯誤");
console.log(e)  ==  undefined;      

IE結果:

alert(e)  =>  alert("Error: 出錯誤了");   

console.log(e) =>   
object Error: 
出錯誤了{description: "出錯誤了",message: "出錯誤了",name: "Error"}      

延長二:with

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
function da(){
    console.log(location.href); 
} 

function da(){ 
    with(location){ 
        console.log(href); 
    } 
}      

兩種方式是等價的:

前提是非嚴格模式下, 因為嚴格模式下不支援 with這種方式。

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

延長作用域的表現

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

什麼是作用域鍊?

我的了解就是,根據在内部函數可以通路外部函數變量的這種機制,用鍊式查找決定哪些資料能被内部函數通路。

想要知道js怎麼鍊式查找,就得先了解js的執行環境。

每個函數運作時都會産生一個執行環境,而這個執行環境怎麼表示呢?

js為每一個執行環境關聯了一個變量對象。環境中定義的所有變量和函數都儲存在這個對象中。

沒有塊級作用域:

if(true) {
 var da = "dada";
}
console.log(da);      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
function add(num1,num2){
    var num = num1   num2;
    return num;
}
undefined
var result = add(1,2);
undefined
console.log(result);
VM962:1 3
undefined      
一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題

向上查詢:

一篇文章帶你了解JavaScript中的變量,作用域和記憶體問題
var da = "dada";

function getDa(){
 var da = "dadada";
 return da;
}

console.log(getDa());      

JavaScript中最常用的垃圾收集方式是标記清除,另一種不太常見的垃圾政策叫做引用計數。

基本類型值和引用類型值:

基本類型值在記憶體中占據固定的空間,儲存在棧記憶體中,從一個變量向另一個變量複制基本類型的值,會建立這個值的一個副本,引用類型的值為對象,儲存在堆記憶體中。

包含引用類型值的變量實際上包含的并不是對象本身,而是一個指向對象的指針。

typeof操作符判斷的是一個值是哪種基本類型,instanceof操作符判斷的是一個值是哪種引用類型。

執行環境分:

全局執行環境,函數執行環境。

每次進入一個新的執行環境時,都會建立一個用于搜尋變量和函數的作用域鍊。

上一篇: 2008.01.25