摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關的面試題,對核心知識點中的作用域閉包上下文進行了梳理。如果在小區(qū)這個作用域找到了張老師,我就會在張老師的輔導下學鋼琴我張老師房間鋼琴構成了學琴的上下文環(huán)境。
引言
滿滿的干貨,面試必bei系列,參考大量資料,并集合自己的理解以及相關的面試題,對JS核心知識點中的作用域、閉包、this、上下文進行了梳理。由于篇幅有限,這里只對我認為最重要的知識做了介紹,一些常識性的東西大家可以參考高程。
上下文(execution context)又叫執(zhí)行環(huán)境,環(huán)境。
執(zhí)行環(huán)境定義了變量或者環(huán)境有權訪問的其他數(shù)據(jù),據(jù)定了它們的各自行為 --高程
一個函數(shù)執(zhí)行的時候,會產(chǎn)生一個屬于自己的執(zhí)行環(huán)境。環(huán)境里面有一個變量對象variable object(VO),OA里面存放著環(huán)境中定義的所有變量和函數(shù),作用域鏈(scope chain),this。
函數(shù)執(zhí)行,環(huán)境產(chǎn)生被推入環(huán)境棧,函數(shù)執(zhí)行完,環(huán)境出棧并被銷毀(閉包例外),把控制權返回給之前的執(zhí)行環(huán)境。
js中的作用域是靜態(tài)作用域,靜態(tài)作用域又叫做詞法作用域,采用詞法作用域的變量叫詞法變量。詞法變量有一個在編譯時靜態(tài)確定的作用域。詞法變量的作用域可以是一個函數(shù)或一段代碼,該變量在這段代碼區(qū)域內可見(visibility);在這段區(qū)域以外該變量不可見(或無法訪問)。詞法作用域里,取變量的值時,會檢查函數(shù)定義時的文本環(huán)境,捕捉函數(shù)定義時對該變量的綁定。--wiki
作用域是一套規(guī)則,用于確定在何處以及如何查找變量(標識符)。--你不知道的javascript
作用域就是執(zhí)行的時候,給環(huán)境變量賦值的一種規(guī)則,這種規(guī)則在函數(shù)定義的時候就已經(jīng)確定了,和運行無關。
js只有全局作用域和函數(shù)作用域,沒有塊作用域。
我們把定一個變量的行為分為兩個過程,聲明和定義
var a = 1 //實際執(zhí)行的是下面兩步 var a a = 1
var的變量聲明會提升,沒有var就是全局變量,let沒,const有變量提升
var的函數(shù)聲明和賦值都提升
a //undefined 因為a的聲明已經(jīng)提升到最上面了 var a = 1 f() //alert 1 function f () { alert (1) }
有幾個特殊的地方雖然平時不會這么寫,但是面試題會遇到:
函數(shù)體中,return后面的代碼不進行變量提升,但是return下面的代碼要進行變量提升
不管條件是否成立,都要進行變量提升;
匿名函數(shù)不進行 變量提升;
如果變量名字發(fā)生重復,那么不再重復聲明,但是要重新定義;
執(zhí)行環(huán)境和作用域的關系很多人都分不清楚執(zhí)行環(huán)境和作用域的關系。其實很簡單,作用域和上下文完全是兩個不相干的東西。
作用域是一種規(guī)格,聲明函數(shù)的時候就已經(jīng)確定了。
執(zhí)行環(huán)境是函數(shù)執(zhí)行的時候產(chǎn)生的,函數(shù)在執(zhí)行環(huán)境中執(zhí)行。大家看下面例子
alert(a) //a is not defined
執(zhí)行的時候VO里面沒有a,因為根據(jù)VO作用域鏈【windows】,按照規(guī)則找不到a。
var a = 1 alert(a) // alert 1
執(zhí)行的時候,根據(jù)規(guī)則,從VO作用域鏈【windows】頭部window作用域開始找a,找到a了,a為1,則vo中a設置為1,所以alert 1
var a = 1 function foo() { var a = 100 alert(a) } foo() // alert 100
執(zhí)行的時候,根據(jù)規(guī)則,從VO作用域鏈【windows-foo】頭部foo作用域開始找a,找到a了,a為100,則vo中a設置為100,所以alert 100
var a = 1 function foo() { alert(a) } foo() // alert 1
執(zhí)行的時候,根據(jù)規(guī)則,從VO作用域鏈【windows-foo】頭部foo作用域開始找,沒找到a。根據(jù)規(guī)則,沿上層作用域(也就是window)開始找,找到a了,a為1。則vo中a設置為1,所以alert 1
再說一個通俗一點的的比喻。
我需要找個優(yōu)秀的音樂老師輔導我彈琴,我在老師的指導下彈琴好比是是函數(shù)執(zhí)行。
小區(qū)這個作用域找不到好老師,我本市找。
本市這個作用域找不到好老師,我本省找。
省這個作用域還找不到好老師,我全國找。
國家這個作用域還找不到。我就沒辦法了,鋼琴學不會了(函數(shù)報錯)。
如果在小區(qū)這個作用域找到了張老師,我就會在張老師的輔導下學鋼琴,我、張老師、房間、鋼琴構成了學琴的上下文環(huán)境。我學完了,但是我把學琴的這件事告訴了我弟弟,所以張老師的聯(lián)系方式我不能刪掉(閉包),因為我弟弟指不定哪一天就會要張老師聯(lián)系方式。
開辟一片棧空間,根據(jù)作用域生成上下文
形參賦值
變量提升
代碼從上到下運行
執(zhí)行完畢后,判斷有沒有閉包,沒有的話上下文銷毀
垃圾收集機制(為什么閉包上下文不銷毀?)怎么實現(xiàn)閉包上下文不銷毀的?這個得從JS的垃圾收集機制開始講。
js有兩種垃圾收集機制,一種是引用計數(shù)(老版IE),還有一種是標記清除
引用計數(shù)(淘汰): 只要被引用就+1 ,引用它的變量又被賦值就-1(ie9之前的dom,bom)
存在問題:循環(huán)引用 比如dom引用js對象,JS對象(一般可以是閉包內綁定dom事件)又反過來引用dom,即使此時頁面移除dom,dom也不會被回收,除非兩個手動設置為null這就造成了內存泄漏,
標記清除:垃圾收集器在運行時給內存中所有的變量加上標記,然后去掉環(huán)境中的變量以及被環(huán)境中變量引用的變量的標記(這也是為什么閉包存在的原用)。被標記的視為準備刪除的變量.
正是因為外層上下文有內層上下文中某些東西的引用,所以內層上下文的標記不清除,在隨后的垃圾收回操作中不被收回銷毀。
練習題1.函數(shù)傳參本質
解析可參考:https://segmentfault.com/a/11...
var ary = [1,2,3,4]; function sum(ary) {// 私有的; ary[0] =100; ary = [];// 在JS中,遇到{}、[]都會開辟一個新的空間地址 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
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109630.html
摘要:引言滿滿的干貨,面試必系列,參考大量資料,并集合自己的理解以及相關的面試題,對核心知識點中的作用域閉包上下文進行了梳理。本篇重點介紹閉包和。所以,有另一種說法認為閉包是由函數(shù)和與其相關的引用環(huán)境組合而成的實體。 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 滿滿的干貨,面試必bei系列,參考大量資料,并集...
摘要:引言前面兩篇文章介紹了上下文作用域閉包。這里我精心挑選了一些特別經(jīng)典的面試題不定期更新,跪求收藏。閉包組這類題目還是挺簡單的,我總結了幾個要注意的地方有沒有閉包如果有閉包,看創(chuàng)建了幾個閉包。不要在腦子里想,每步的結果用紙和筆演算下 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 前面兩篇文章介紹了上下文、作...
摘要:插件開發(fā)前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優(yōu)雅的實現(xiàn)文件分片斷點續(xù)傳。 Vue.js 插件開發(fā) - 前端 - 掘金作者:Joshua Bemenderfer原文地址: creating-custom-plugins譯者:jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....
摘要:好程序員前端培訓入門之基礎知識梳理匯總,前端工程師是當前各大企業(yè)都比較稀缺的人才,薪資待遇和就業(yè)前景都很不錯。作用域鏈的前端,始終是當前執(zhí)行代碼所在環(huán)境的變量對象。 好程序員Web前端培訓入門之JS基礎知識梳理匯總,Web前端工程師是當前各大企業(yè)都比較稀缺的人才,薪資待遇和就業(yè)前景都很不錯。不論是專業(yè)還是非專業(yè),有基礎亦或是無基礎,都想通過學習Web前端實現(xiàn)高薪就業(yè)。不過,學習要一...
摘要:好程序員前端培訓入門之基礎知識梳理匯總,前端工程師是當前各大企業(yè)都比較稀缺的人才,薪資待遇和就業(yè)前景都很不錯。作用域鏈的前端,始終是當前執(zhí)行代碼所在環(huán)境的變量對象。 好程序員Web前端培訓入門之JS基礎知識梳理匯總,Web前端工程師是當前各大企業(yè)都比較稀缺的人才,薪資待遇和就業(yè)前景都很不錯。不論是專業(yè)還是非專業(yè),有基礎亦或是無基礎,都想通過學習Web前端實現(xiàn)高薪就業(yè)。不過,學習要一...
閱讀 2521·2023-04-26 02:57
閱讀 1403·2023-04-25 21:40
閱讀 2155·2021-11-24 09:39
閱讀 3557·2021-08-30 09:49
閱讀 760·2019-08-30 15:54
閱讀 1166·2019-08-30 15:52
閱讀 2068·2019-08-30 15:44
閱讀 1274·2019-08-28 18:27