JavaScript中執(zhí)行環(huán)境及作用域鏈的示例分析

這篇文章給大家分享的是有關(guān)JavaScript中執(zhí)行環(huán)境及作用域鏈的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1、執(zhí)行環(huán)境：

每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象，環(huán)境中定義的所有變量和函數(shù)都保存在這個對象中。

執(zhí)行環(huán)境包括全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境。

全局執(zhí)行環(huán)境是最外圍的一個執(zhí)行環(huán)境，在瀏覽器中，全局執(zhí)行環(huán)境被認(rèn)為是是window對象，所有全局變量和屬性都是作為window對象的屬性和方法創(chuàng)建的。

函數(shù)執(zhí)行環(huán)境是指函數(shù)的執(zhí)行環(huán)境，當(dāng)執(zhí)行流進(jìn)入一個函數(shù)時，函數(shù)的環(huán)境會被推入一個環(huán)境棧中，在函數(shù)執(zhí)行之后，棧將其環(huán)境彈出，將控制權(quán)返回到之前的執(zhí)行環(huán)境。

2、作用域鏈：

當(dāng)代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈。

作用域鏈的用途：保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問。

作用域鏈的前端，始終是當(dāng)前執(zhí)行的代碼所在環(huán)境的變量對象，若此環(huán)境是函數(shù)，則將其活動對象作為變量對象?；顒訉ο笞铋_始時只包含一個變量，即arguments對象（該對象在全局環(huán)境中是不存在的），作用域鏈的下一個對象來自包含環(huán)境，再下一個變量則來自下一個包含環(huán)境，這樣一直延續(xù)到全局執(zhí)行環(huán)境。全局執(zhí)行環(huán)境的變量對象始終是作用域鏈的最后一個對象。

每個環(huán)境都可以向上搜索作用域鏈，以查詢變量和函數(shù)名，終點(diǎn)就是搜索到全局執(zhí)行環(huán)境，但是任何環(huán)境不能通過向下搜索作用域鏈而進(jìn)入另一個執(zhí)行環(huán)境。內(nèi)部環(huán)境可以通過作用域鏈訪問所有的外部環(huán)境，但外部環(huán)境不能訪問內(nèi)部環(huán)境的任何變量和函數(shù)。

3、延長作用域鏈：

雖然執(zhí)行環(huán)境只有兩種：全局執(zhí)行環(huán)境和函數(shù)執(zhí)行環(huán)境，但是可以有方法延長作用域鏈，因?yàn)橛行┱Z句可以在作用域鏈的前端臨時增加一個變量對象，該變量對象會在代碼執(zhí)行后被移除。

當(dāng)執(zhí)行流進(jìn)入下列語句時，作用域鏈會延長：

(1)try-catch語句的catch塊：catch語句會創(chuàng)建一個新的變量對象，其中包含的是被拋出的錯誤對象的聲明，該變量對象只在catch塊內(nèi)部有效，在catch塊外部無法訪問到。

(2)with語句：with語句會將指定的對象添加到作用域鏈中。

eg1：

function setUrl(){
  var parameter="?name=Alice";
  var url = href + parameter;
  return url;
}
var result = setUrl();
alert(result);//報錯：href is no defined

eg2：

function setUrl(){
  var parameter="?name=Alice";
 with(location) {
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://localhost/text.html?name=Alice

with語句接收的是location對象，因此其變量對象中包含了location對象的所有屬性和方法，location對象被添加到了作用域鏈的前端。

eg3：

var obj = {href : "http://www.baidu.com"};
var href = "http://www.sina.cn";
function setUrl(){
  var parameter="?name=Alice";
 with(obj) {
 href = "http://www.google.cn";
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://www.google.cn?name=Alice
alert(href);//http://www.sina.cn

with語句中并沒有更改變量href的值，而是更改了obj對象的 href 屬性。

也就是說，with中首先查找的是相關(guān)對象的屬性，如果沒有，才改變變量的值。

eg4：

var obj = {};
var href = "http://www.sina.cn";
function setUrl(){
  var parameter="?name=Alice";
 with(obj) {
 href = "http://www.google.cn";
 var url = href + parameter;
 }
  return url;
}
var result = setUrl();
alert(result);//http://www.google.cn?name=Alice
alert(href);//http://www.google.cn

去掉obj對象的 href 屬性后，才更改變量href的值。

感謝各位的閱讀！關(guān)于“JavaScript中執(zhí)行環(huán)境及作用域鏈的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！