javascript中的作用域(詞法and動(dòng)態(tài))

Taonce 發(fā)布于2019-08-19 18:41 / 1000人閱讀

摘要：中作用域的問題可以說是老生常談，個(gè)人認(rèn)為的作用域中存在著兩種作用域，一種是詞法作用域，一種是動(dòng)態(tài)作用域。但是自動(dòng)有了箭頭函數(shù)后，箭頭函數(shù)中的并不是動(dòng)態(tài)作用域，而是屬于詞法作用域，再其定義時(shí)就已經(jīng)確定好了，相當(dāng)于。

js中作用域的問題可以說是老生常談，個(gè)人認(rèn)為js的作用域中存在著兩種作用域，一種是詞法作用域，一種是動(dòng)態(tài)作用域。

詞法作用域

詞法作用域就是定義在詞法階段的作用域，也就是說由我們寫代碼時(shí)將變量寫在哪里所決定的，當(dāng)然在js中大部分是這種情況。

var a = 20;
function foo () {
    console.log(a);
}
foo();   // 20
function bar () {
    var a = 30;
    foo();   // 20
}
bar();

這個(gè)例子就是一個(gè)很好的印證，可以發(fā)現(xiàn)的是，無論foo在哪里調(diào)用，其a的值永遠(yuǎn)是全局作用域中的a的值，這就是詞法作用域，定義函數(shù)時(shí)，作用域是在全局，那么foo上層作用域就是全局，改變其調(diào)用位置是不能改變其作用域鏈的，其作用域鏈?zhǔn)窃诙x時(shí)就決定好的。
利用詞法作用域，我們可以引申出閉包的概念，將我們上面的代碼改寫：

var a = 20;
function bar () {
    var a = 30;
    return function foo () {
        console.log(a);
    }
}
bar()();   // 30

foo函數(shù)在bar函數(shù)內(nèi)定義，所以foo函數(shù)的作用域鏈上層對應(yīng)的是bar的作用域，利用閉包將foo暴露出去，由于foo函數(shù)仍然保持著對bar作用域的引用，所以bar內(nèi)部的作用域依然存在，沒有被回收，這也是閉包能夠產(chǎn)生私有變量等效果的原因。

改變作用域

對沒錯(cuò)，詞法作用域可以被改變，通過eval或者with就可以將作用域改變，但是這并不被提倡。
eval改變作用域：

var a = 20;
function bar () {
    eval("var a = 30;");
    console.log(a);
}
bar();  // 30

eval內(nèi)的代碼可以看做，本身就寫在了那一行，但是在嚴(yán)格模式下，eval有著自己的作用域，所以嚴(yán)格模式下上面的代碼會(huì)報(bào)出一個(gè)ReferenceError。
with改變作用域：

function foo (obj) {
    with (obj) {
        b = 2;
        a = 2;
    }
}
var obj = {a: 1};
foo(obj);
console.log(obj, b);   // { a: 2 } 2

with可以形成一個(gè)新的作用域，其詞法標(biāo)識符就是這個(gè)對象的屬性，所以可以看到的是a = 2，本質(zhì)上改變的是obj的屬性，而b = 2由于這個(gè)作用域下沒有找到該變量，所以會(huì)沿著作用域鏈向上查找，由于在foo的作用域內(nèi)也沒有找到，一直到全局作用域都沒有找到，所以會(huì)給全局添加一個(gè)屬性，這就將b變?yōu)榱巳肿兞?，所以我們在全局作用域中可以訪問到b。但是我們在with中用var定義變量時(shí)，會(huì)將該變量定義到其外層作用域中。

var obj = {a: 1};
with (obj) {
    var b = 2;
    var a = 2;
}
console.log(obj, b, a);  // { a: 2 } 2 undefined

所以我們可以看到的with塊內(nèi)的變量也有著提前聲明，但是其提前聲明的位置是其上層作用域中。這種行為實(shí)在是十分讓人理解，將對象放入一個(gè)新的作用域，但是同時(shí)可以給其上層作用域定義變量。當(dāng)然在嚴(yán)格模式中，完全不用擔(dān)心，因?yàn)?b>with在嚴(yán)格模式中被禁用。

動(dòng)態(tài)作用域

動(dòng)態(tài)作用域取決于其調(diào)用方式以及在哪里調(diào)用，這個(gè)聽著有點(diǎn)像this啊，沒錯(cuò)，在js中唯一的動(dòng)態(tài)作用域就是this，當(dāng)然也可以叫其延遲綁定。在談起this之前，首先要知道的是，執(zhí)行上下文是什么？
每一種代碼的執(zhí)行都依賴于自身的上下文，函數(shù)的每一次調(diào)用都會(huì)進(jìn)入函數(shù)執(zhí)行中的一個(gè)上下文，并且在函數(shù)每次調(diào)用時(shí)都會(huì)產(chǎn)生一個(gè)變量對象（虛擬出來的，真實(shí)代碼中是訪問不出來的，會(huì)被視作undefined），函數(shù)中的每一個(gè)變量都可以視為這個(gè)變量對象的一個(gè)屬性，在進(jìn)入上下文時(shí)，首先會(huì)對函數(shù)的形參進(jìn)行操作，將形參添加到變量對象中，然后會(huì)對函數(shù)聲明進(jìn)行操作，假若變量對象中存在同名屬性時(shí)，同名屬性將被覆蓋，最后對變量聲明進(jìn)行操作，假若變量對象中存在同名屬性時(shí)，該變量則會(huì)被忽略聲明，下面的代碼就可以驗(yàn)證我們的這個(gè)過程：

function foo (fn) {
    function fn () {}
    var fn;
    console.log(fn);  // [Function: fn]
}
foo();

我們的this和執(zhí)行上下文沒有關(guān)系，但是和我們的變量對象有著很大的關(guān)系。

在非嚴(yán)格模式下，this指向null或者undefined時(shí)會(huì)指向全局對象。

以這個(gè)準(zhǔn)則來看我們《JavaScript語言精粹》中提到的函數(shù)的四種調(diào)用方式與this取值的關(guān)系：

1.方法調(diào)用模式

var obj = {
    a: 2,
    foo: function () {
        console.log(this.a);
    }
};
obj.foo();

這種情況下，this指向的就是該對象。

2.函數(shù)調(diào)用模式

var a = 2;
function foo () {
    console.log(this.a);
}
foo();   // 瀏覽器環(huán)境中：2

// 嚴(yán)格模式下
var a = 2;
function foo () {
    "use strict";
    console.log(this.a);    // TypeError
}
foo();

這種情況下this應(yīng)該指向的那個(gè)我們上文所提到的那個(gè)虛擬出來的變量對象，由于其本來并不存在，所以this指向的undefined，在非嚴(yán)格模式下指向的是全局window，但是在嚴(yán)格模式下，禁止了這種隱式的轉(zhuǎn)換。函數(shù)調(diào)用模式下，this其實(shí)可以理解為指向我們虛擬出來的那個(gè)變量對象。
3.構(gòu)造器調(diào)用模式
也就是該函數(shù)被當(dāng)做構(gòu)造函數(shù)來調(diào)用，這是首先會(huì)在函數(shù)內(nèi)部創(chuàng)建一個(gè)空對象，然后在將this指向這個(gè)空對象，最后將這個(gè)對象返回出去。
4.call與apply調(diào)用
這時(shí)this指向的是其第一個(gè)參數(shù)。

但是自動(dòng)有了箭頭函數(shù)后，箭頭函數(shù)中的this并不是動(dòng)態(tài)作用域，而是屬于詞法作用域，再其定義時(shí)就已經(jīng)確定好了，相當(dāng)于function () {}.bind(this)。

云服務(wù)器 GPU云服務(wù)器 javascript作用域鏈作用域 python中的作用中作用域

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79871.html

發(fā)表評論

登陸后可評論

0條評論

Taonce

男|高級講師

我要關(guān)注我要私信

TA的文章

一篇就夠了（建議收藏）——超詳解sizeof與strlen的用法

閱讀 3999·2021-09-09 09:33
阿里云代金券、優(yōu)惠券、提貨券是什么，如何領(lǐng)取和使用？

閱讀 1906·2021-09-06 15:14
align-self: stretch 失效

閱讀 1986·2019-08-30 15:44
圣杯布局——針對前端小白篇

閱讀 3164·2019-08-29 18:36
css 3D動(dòng)畫

閱讀 3829·2019-08-29 16:22
重溫HTML和CSS3

閱讀 2150·2019-08-29 16:21
CSS 文本控制

閱讀 2623·2019-08-29 15:42
基于Bootstrap做定制，并與官方庫保持更新的方法

閱讀 1707·2019-08-29 11:00

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

javascript中的作用域(詞法and動(dòng)態(tài))

相關(guān)文章

**理解JavaScript的核心知識點(diǎn)：作用域**

夯實(shí)基礎(chǔ)-作用域與閉包

“動(dòng)靜結(jié)合” 小白初探靜態(tài)(詞法)作用域，作用域鏈與執(zhí)行環(huán)境(EC)

**深入學(xué)習(xí)js之——詞法作用域和動(dòng)態(tài)作用域**

JavaScript深入之詞法作用域和動(dòng)態(tài)作用域

發(fā)表評論

0條評論

Taonce

男|高級講師

TA的文章

一篇就夠了（建議收藏）——超詳解sizeof與strlen的用法

阿里云代金券、優(yōu)惠券、提貨券是什么，如何領(lǐng)取和使用？

align-self: stretch 失效

圣杯布局——針對前端小白篇

css 3D動(dòng)畫

重溫HTML和CSS3

CSS 文本控制

基于Bootstrap做定制，并與官方庫保持更新的方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

javascript中的作用域(詞法and動(dòng)態(tài))

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！