JS核心知識(shí)點(diǎn)梳理——上下文、作用域、閉包、this（上）

Andrman 發(fā)布于2019-08-26 13:50 / 1640人閱讀

摘要：引言滿滿的干貨，面試必系列，參考大量資料，并集合自己的理解以及相關(guān)的面試題，對核心知識(shí)點(diǎn)中的作用域閉包上下文進(jìn)行了梳理。如果在小區(qū)這個(gè)作用域找到了張老師，我就會(huì)在張老師的輔導(dǎo)下學(xué)鋼琴我張老師房間鋼琴構(gòu)成了學(xué)琴的上下文環(huán)境。

引言

滿滿的干貨，面試必bei系列，參考大量資料，并集合自己的理解以及相關(guān)的面試題，對JS核心知識(shí)點(diǎn)中的作用域、閉包、this、上下文進(jìn)行了梳理。由于篇幅有限，這里只對我認(rèn)為最重要的知識(shí)做了介紹,一些常識(shí)性的東西大家可以參考高程。

上下文（execution context）

又叫執(zhí)行環(huán)境，環(huán)境。

執(zhí)行環(huán)境定義了變量或者環(huán)境有權(quán)訪問的其他數(shù)據(jù)，據(jù)定了它們的各自行為 --高程

一個(gè)函數(shù)執(zhí)行的時(shí)候，會(huì)產(chǎn)生一個(gè)屬于自己的執(zhí)行環(huán)境。環(huán)境里面有一個(gè)變量對象variable object（VO），OA里面存放著環(huán)境中定義的所有變量和函數(shù),作用域鏈（scope chain）,this。
函數(shù)執(zhí)行，環(huán)境產(chǎn)生被推入環(huán)境棧，函數(shù)執(zhí)行完，環(huán)境出棧并被銷毀（閉包例外），把控制權(quán)返回給之前的執(zhí)行環(huán)境。

作用域

js中的作用域是靜態(tài)作用域，靜態(tài)作用域又叫做詞法作用域，采用詞法作用域的變量叫詞法變量。詞法變量有一個(gè)在編譯時(shí)靜態(tài)確定的作用域。詞法變量的作用域可以是一個(gè)函數(shù)或一段代碼，該變量在這段代碼區(qū)域內(nèi)可見（visibility）；在這段區(qū)域以外該變量不可見（或無法訪問）。詞法作用域里，取變量的值時(shí)，會(huì)檢查函數(shù)定義時(shí)的文本環(huán)境，捕捉函數(shù)定義時(shí)對該變量的綁定。--wiki
作用域是一套規(guī)則,用于確定在何處以及如何查找變量(標(biāo)識(shí)符)。--你不知道的javascript

作用域就是執(zhí)行的時(shí)候，給環(huán)境變量賦值的一種規(guī)則，這種規(guī)則在函數(shù)定義的時(shí)候就已經(jīng)確定了，和運(yùn)行無關(guān)。
js只有全局作用域和函數(shù)作用域，沒有塊作用域。

變量提升

我們把定一個(gè)變量的行為分為兩個(gè)過程，聲明和定義

var a = 1
//實(shí)際執(zhí)行的是下面兩步
var a 
a = 1

var的變量聲明會(huì)提升，沒有var就是全局變量，let沒，const有變量提升
var的函數(shù)聲明和賦值都提升

a //undefined 因?yàn)閍的聲明已經(jīng)提升到最上面了
var a = 1

f() //alert 1
function f () {
    alert (1)
}

有幾個(gè)特殊的地方雖然平時(shí)不會(huì)這么寫，但是面試題會(huì)遇到：

函數(shù)體中，return后面的代碼不進(jìn)行變量提升，但是return下面的代碼要進(jìn)行變量提升

不管條件是否成立，都要進(jìn)行變量提升；

匿名函數(shù)不進(jìn)行變量提升；

如果變量名字發(fā)生重復(fù)，那么不再重復(fù)聲明，但是要重新定義；

執(zhí)行環(huán)境和作用域的關(guān)系

很多人都分不清楚執(zhí)行環(huán)境和作用域的關(guān)系。其實(shí)很簡單，作用域和上下文完全是兩個(gè)不相干的東西。
作用域是一種規(guī)格，聲明函數(shù)的時(shí)候就已經(jīng)確定了。
執(zhí)行環(huán)境是函數(shù)執(zhí)行的時(shí)候產(chǎn)生的，函數(shù)在執(zhí)行環(huán)境中執(zhí)行。大家看下面例子

alert(a) //a is not defined

執(zhí)行的時(shí)候VO里面沒有a，因?yàn)楦鶕?jù)VO作用域鏈【windows】，按照規(guī)則找不到a。

var a  = 1
alert(a)  // alert 1

執(zhí)行的時(shí)候，根據(jù)規(guī)則，從VO作用域鏈【windows】頭部window作用域開始找a,找到a了，a為1，則vo中a設(shè)置為1，所以alert 1

var a  = 1
function foo() {
    var a = 100 
    alert(a) 
}
foo() //  alert 100

執(zhí)行的時(shí)候，根據(jù)規(guī)則，從VO作用域鏈【windows-foo】頭部foo作用域開始找a,找到a了，a為100，則vo中a設(shè)置為100，所以alert 100

var a  = 1
function foo() {
    alert(a) 
}
foo() //  alert 1

執(zhí)行的時(shí)候，根據(jù)規(guī)則，從VO作用域鏈【windows-foo】頭部foo作用域開始找,沒找到a。根據(jù)規(guī)則，沿上層作用域（也就是window）開始找，找到a了,a為1。則vo中a設(shè)置為1，所以alert 1

再說一個(gè)通俗一點(diǎn)的的比喻。
我需要找個(gè)優(yōu)秀的音樂老師輔導(dǎo)我彈琴，我在老師的指導(dǎo)下彈琴好比是是函數(shù)執(zhí)行。
小區(qū)這個(gè)作用域找不到好老師，我本市找。
本市這個(gè)作用域找不到好老師，我本省找。
省這個(gè)作用域還找不到好老師，我全國找。
國家這個(gè)作用域還找不到。我就沒辦法了，鋼琴學(xué)不會(huì)了（函數(shù)報(bào)錯(cuò)）。
如果在小區(qū)這個(gè)作用域找到了張老師，我就會(huì)在張老師的輔導(dǎo)下學(xué)鋼琴,我、張老師、房間、鋼琴構(gòu)成了學(xué)琴的上下文環(huán)境。
我學(xué)完了，但是我把學(xué)琴的這件事告訴了我弟弟，所以張老師的聯(lián)系方式我不能刪掉（閉包），因?yàn)槲业艿苤覆欢囊惶炀蜁?huì)要張老師聯(lián)系方式。

函數(shù)執(zhí)行的完整過程

開辟一片棧空間，根據(jù)作用域生成上下文

形參賦值

變量提升

代碼從上到下運(yùn)行

執(zhí)行完畢后，判斷有沒有閉包，沒有的話上下文銷毀

垃圾收集機(jī)制（為什么閉包上下文不銷毀？）

怎么實(shí)現(xiàn)閉包上下文不銷毀的？這個(gè)得從JS的垃圾收集機(jī)制開始講。

js有兩種垃圾收集機(jī)制，一種是引用計(jì)數(shù)（老版IE)，還有一種是標(biāo)記清除

引用計(jì)數(shù)(淘汰):  只要被引用就+1 ，引用它的變量又被賦值就-1（ie9之前的dom，bom）

存在問題：循環(huán)引用比如dom引用js對象，JS對象（一般可以是閉包內(nèi)綁定dom事件）又反過來引用dom,即使此時(shí)頁面移除dom，dom也不會(huì)被回收，除非兩個(gè)手動(dòng)設(shè)置為null這就造成了內(nèi)存泄漏，

標(biāo)記清除：垃圾收集器在運(yùn)行時(shí)給內(nèi)存中所有的變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量引用的變量的標(biāo)記（這也是為什么閉包存在的原用)。被標(biāo)記的視為準(zhǔn)備刪除的變量.

正是因?yàn)橥鈱由舷挛挠袃?nèi)層上下文中某些東西的引用，所以內(nèi)層上下文的標(biāo)記不清除，在隨后的垃圾收回操作中不被收回銷毀。

練習(xí)題

1.函數(shù)傳參本質(zhì)
解析可參考：https://segmentfault.com/a/11...

 var ary = [1,2,3,4];
    function sum(ary) {// 私有的；
        ary[0] =100;
        ary = [];// 在JS中，遇到{}、[]都會(huì)開辟一個(gè)新的空間地址
        ary[0] = 10;
        console.log(ary)
    }
    sum(ary); // [10]
    console.log(ary);// [100,2,3,4]

2.特殊變量提升

var foo=1; 
function bar(){
    if(!foo){
        var foo=10; 
    }
    console.log(foo); 
}
bar(); //10

3.作用域、變量提升

console.log(a); 
var a=12; 
function fn(){
    console.log(a); //注意這里的a在本執(zhí)行環(huán)境獲取不到，根據(jù)作用域鏈搜索全局執(zhí)行環(huán)境的a
    a=13;   //同理修改的也是全局執(zhí)行環(huán)境的a
}
fn();   
console.log(a);     
// undefined 12 13

console.log(a); 
var a=12; 
function fn(){
    console.log(a); 
    var a=13;   
}
fn();   
console.log(a);     
// undefined undefined 12

GPU云服務(wù)器云服務(wù)器 js作用域和上下文 this作用域 js核心知識(shí) 閉包知識(shí)

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109630.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Andrman

男|高級(jí)講師

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

TA的文章

tensorflow

閱讀 2531·2023-04-26 02:57
tensorflow3

閱讀 1414·2023-04-25 21:40
頭歌平臺(tái)（EduCoder）————軟件測試（測試過程與策略）

閱讀 2182·2021-11-24 09:39
BlueHost：美國VPS云主機(jī)，2核/2GB內(nèi)存/20GB固態(tài)硬盤/2TB流量，49元/月

閱讀 3567·2021-08-30 09:49
[CSS]《CSS揭秘》第七章——結(jié)構(gòu)與布局

閱讀 768·2019-08-30 15:54
新手程序員常犯的十個(gè)錯(cuò)誤

閱讀 1176·2019-08-30 15:52
移動(dòng)端適配之三：使用meta標(biāo)簽設(shè)置viewport

閱讀 2083·2019-08-30 15:44
我的前端開發(fā)準(zhǔn)則

閱讀 1280·2019-08-28 18:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

JS核心知識(shí)點(diǎn)梳理——上下文、作用域、閉包、this（上）

相關(guān)文章

**JS核心知識(shí)點(diǎn)梳理——上下文、作用域、閉包、this（中）**

**JS核心知識(shí)點(diǎn)梳理——上下文、作用域、閉包、this（下）**

JavaScript - 收藏集 - 掘金

**好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識(shí)梳理匯總**

**好程序員Web前端培訓(xùn)入門之JS基礎(chǔ)知識(shí)梳理匯總**

發(fā)表評(píng)論

0條評(píng)論

Andrman

男|高級(jí)講師

TA的文章

tensorflow

tensorflow3

頭歌平臺(tái)（EduCoder）————軟件測試（測試過程與策略）

BlueHost：美國VPS云主機(jī)，2核/2GB內(nèi)存/20GB固態(tài)硬盤/2TB流量，49元/月

[CSS]《CSS揭秘》第七章——結(jié)構(gòu)與布局

新手程序員常犯的十個(gè)錯(cuò)誤

移動(dòng)端適配之三：使用meta標(biāo)簽設(shè)置viewport

我的前端開發(fā)準(zhǔn)則

最新活動(dòng)