js作用域實例,js 作用域作用域鏈

本文目錄一覽：

• 1、js變量的作用域問題
• 2、如何理解 JavaScript 中作為參數的函數的作用域和 this
• 3、什麼是js作用域
• 4、前端：如何理解 JS 的作用域和作用域鏈?說說閉包的兩個應用場景
• 5、什麼是 angularjs 中的作用域
• 6、Js基礎27：作用域

js變量的作用域問題

內嵌函數可以訪問外部函數的變量。

_this和p都是addDiv函數里的變量。

}).click(function(){是addDiv函數的內嵌函數。所以可以訪問_this和p。

第二個例子也是一樣。

如何理解 JavaScript 中作為參數的函數的作用域和 this

作用域於參數類型無關，也就是說不管參數是函數還是其他類型，這個參數的作用域只在接收這個參數的函數內有效，如下：

function test(callback){

    if(typeof callback == “function”){

        callback();

    }

    //此時這個參數的作用域只在test這個函數內有效，其他地方都是無效的。

}

this是一個指針類型，一般情況下是指向調用該方法或者屬性的對象本身，除非指定了this的指向，否則都是指向window對象，下面這段代碼希望對你的理解有幫助。

var obj = {

    fun:function(){

        this.log(“這個地方的this即為obj對象”);

    },

    log:function(text){

        console.log(text);

        //當然這裡的this也是指向obj對象的

    }

}

function stu(){

    this.getAge = function(){

        //此時這裡的this指向stu類的實例，即指向下面注釋代碼中的stuObj對象

        //var stuObj = new stu();

        //stu.getAge();

    }

}

function callback(){

    //此時這裡的this指向下面被注釋代碼中的obj，因為他手動指定了this對象

    //除了call可以手動指定this之外apply也可以指定this指向

    //var obj = {name:”小明”};

    //callback.call(obj);

}

除了以上幾種情況下，還有一種情況this是指向dom元素本身的，如下：

a href=”#” onclick=”alert(this.href)”這個this即為這個a標籤本身/a

除了以上幾種情況，this都是指向window對象的，當然不排除有一些我不清楚的情況。

什麼是js作用域

執行環境（execution context，為簡單起見，有時也稱為“環境”）是 JavaScript 中最為重要的一個概 念。執行環境定義了變量或函數有權訪問的其他數據，決定了它們各自的行為。每個執行環境都有一個 與之關聯的變量對象（variable object），環境中定義的所有變量和函數都保存在這個對象中。雖然我們 編寫的代碼無法訪問這個對象，但解析器在處理數據時會在後台使用它。 全局執行環境是最外圍的一個執行環境。根據 ECMAScript 實現所在的宿主環境不同，表示執行環 境的對象也不一樣。在 Web 瀏覽器中，全局執行環境被認為是 window 對象（第 7 章將詳細討論），因 此所有全局變量和函數都是作為 window 對象的屬性和方法創建的。某個執行環境中的所有代碼執行完 畢後，該環境被銷毀，保存在其中的所有變量和函數定義也隨之銷毀（全局執行環境直到應用程序退 出——例如關閉網頁或瀏覽器——時才會被銷毀）。 每個函數都有自己的執行環境。當執行流進入一個函數時，函數的環境就會被推入一個環境棧中。 而在函數執行之後，棧將其環境彈出，把控制權返回給之前的執行環境。ECMAScript 程序中的執行流 正是由這個方便的機制控制着。 當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈（scope chain）。作用域鏈的用途，是 保證對執行環境有權訪問的所有變量和函數的有序訪問。作用域鏈的前端，始終都是當前執行的代碼所 在環境的變量對象。如果這個環境是函數，則將其活動對象（activation object）作為變量對象。活動對 象在最開始時只包含一個變量，即 arguments 對象（這個對象在全局環境中是不存在的）。作用域鏈中 的下一個變量對象來自包含（外部）環境，而再下一個變量對象則來自下一個包含環境。這樣，一直延 續到全局執行環境；全局執行環境的變量對象始終都是作用域鏈中的最後一個對象。

前端：如何理解 JS 的作用域和作用域鏈?說說閉包的兩個應用場景

ES6 之前 JS 沒有塊級作用域。例如

從上面的例子可以體會到作用域的概念，作用域就是一個獨立的 地盤 ，讓變量不會外泄、暴露出去。上面的name就被暴露出去了，因此， JS 沒有塊級作用域，只有全局作用域和函數作用域 。

全局作用域就是最外層的作用域 ，如果我們寫了很多行 JS 代碼，變量定義都沒有用函數包括，那麼它們就全部都在全局作用域中。這樣的壞處就是很容易撞車、衝突。

這就是為何 jQuery、Zepto 等庫的源碼，所有的代碼都會放在 (function(){….})() 中。因為放在裡面的所有變量，都 不會被外泄和暴露 ，不會污染到外面，不會對其他的庫或者 JS 腳本造成影響。這是函數作用域的一個體現。

附：ES6 中開始加入了塊級作用域，使用let定義變量即可，如下：

首先認識一下什麼叫做 自由變量 。如下代碼中，console.log(a)要得到a變量，但是在當前的作用域中沒有定義a（可對比一下b）。當前作用域沒有定義的變量，就稱為 自由變量 。自由變量如何得到 —— 向 父級 作用域尋找。

如果父級也沒呢？ 再一層一層向上尋找，直到找到全局作用域還是沒找到，就宣布放棄 。這種一層一層的關係，就是 作用域鏈 。

通過例子來理解閉包。

自由變量將從作用域鏈中去尋找，但是 依據的是函數定義時的作用域鏈，而不是函數執行時 ，以上這個例子就是閉包。閉包主要有 兩個 應用場景：

1.函數 作為 返回值 ，上面的例子就是

2.函數 作為 參數 傳遞，看以下例子

什麼是 angularjs 中的作用域

Scope(作用域)

Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

如何使用 Scope

當你在 AngularJS 創建控制器時，你可以將 $scope 對象當作一個參數傳遞:

AngularJS 實例

控制器中的屬性對應了視圖上的屬性：

div ng-app=”myApp” ng-controller=”myCtrl”

h1{{carname}}/h1

/div

script

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

$scope.carname = “Volvo”;

});

/script

當在控制器中添加 $scope 對象時，視圖 (HTML) 可以獲取了這些屬性。

視圖中，你不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{carname}}。

Js基礎27：作用域

函數和變量的有效範圍就是作用域

1、作用域的概念

這是因為js中存在作用域的概念。

作用域：

作用域就是指定一個變量或者一個函數的作用範圍。

能在頁面的任何位置都可以訪問，稱為 全局作用域

只能在局部（函數內）訪問，稱為為 局部作用域

上述代碼中，a是全局變量，b是局部變量

ES5中只有函數才有作用域，所謂是局部作用域也可以叫函數作用域。

作用域的作用就是為了把數據進行保護，不讓外部的數據對我們的數據進行污染

以下①②③④打印什麼？

但是結果卻大出所料，這裡得到的結果是undefined。

③處的結果也和我們最初的認識是不一樣的，結果為f對應的函數對象。

造成這個結果是因為變量和函數的作用域提升的原因，什麼意思呢？

JS是解釋性語言，JS引擎對代碼的處理分為兩步：

4、作用域鏈和訪問規則

在JavaScript裡面，函數內部是可以包含另一個函數的

此時函數b就被函數a包含越來了，這樣就形成了兩層作用域。

如果有以下代碼：三個同名變量放在三個作用域內

會依次輸出：10，20，30

雖然多個變量x同名，但是不同作用域內優先使用自己內部作用域的變量x。

如果代碼做一下修改：刪除函數b的局部變量x

依次輸出：10，20，20

函數b內部沒有變量b，會向自己的外面的作用域查找x變量，函數a內的x變量離函數b最近，會優先得到函數a的變量x

代碼再做修改：再刪除a的局部變量x

會依次輸出：10，10，10

函數b內部沒有x變量，會向函數a的作用域查找，但是函數a內部也沒有x變量，會向函數a的上一層作用域再查找，直到查找到了全局作用域。

代碼再次變化：全局的變量x也刪除

函數b內部沒有變量x，會順着上層作用域一層一層地查找，直到全局作用域也沒有，就會報錯。

總結：