你不知道的javascript(上卷)讀后感（一）

zhaofeihao 發(fā)布于2019-08-26 10:34 / 757人閱讀

摘要：遮蔽效應(yīng)作用域查找會(huì)在找到第一個(gè)匹配的標(biāo)識符時(shí)停止，不會(huì)繼續(xù)往上層作用域查找，這就會(huì)產(chǎn)生遮蔽效應(yīng)。會(huì)發(fā)現(xiàn)每一次輸出的都是為啥勒所有的回調(diào)函數(shù)回在循環(huán)結(jié)束后才會(huì)執(zhí)行事件循環(huán)。

三劍客

編譯，顧名思義，就是源代碼執(zhí)行前會(huì)經(jīng)歷的過程，分三個(gè)步驟，

分詞／詞法分析，將我們寫的代碼字符串分解成多個(gè)詞法單元

解析／語法分析，將詞法單元集合生成抽象語法樹（AST）

代碼生成，抽象語法樹（AST）轉(zhuǎn)換成可執(zhí)行代碼的過程

Tip1：js在語法分析和代碼生成階段有對運(yùn)行性能進(jìn)行優(yōu)化，對冗余元素進(jìn)行優(yōu)化

Tip2：js的編譯過程不是發(fā)生在構(gòu)建之前，而是代碼執(zhí)行之前

理解作用域，首先知道三劍客，分別是

引擎：負(fù)責(zé)整個(gè)代碼編譯及執(zhí)行的過程
編譯器： 負(fù)責(zé)詞法分析、語法分析、代碼生成
作用域：負(fù)責(zé)維護(hù)與收集所有聲明的標(biāo)識符，保證當(dāng)前執(zhí)行代碼對這些標(biāo)識符的訪問權(quán)限

舉例子，加深印象，對于var a = 2，三劍客如何協(xié)同工作，
編譯器進(jìn)行分詞、語法分析，然后要代碼生成時(shí)，遇到 var a，問一下當(dāng)前作用域集合“你有沒有這個(gè)名稱的變量呀？”，作用域如果說有，那么忽略聲明，繼續(xù)編譯，如果說沒有，那么就要要求作用域收集一下，并且給它個(gè)名字a,然后編譯器就生成了代碼，引擎準(zhǔn)備來執(zhí)行了，先問當(dāng)前作用域集合，“你這里有a這個(gè)變量嗎？”，有引擎就拿來用，沒有就繼續(xù)找該變量，要么找到，就給它附個(gè)值2，沒有那就給你報(bào)個(gè)錯(cuò)！

理解編譯器的相關(guān)術(shù)語

LSH查詢，通俗解釋就是找到所聲明變量，并且對其賦值的行為

RSH查詢，通俗解釋就是查找聲明的變量

作用域嵌套

當(dāng)一個(gè)塊或是函數(shù)嵌套在另外一個(gè)塊或函數(shù)時(shí)，就會(huì)產(chǎn)生作用域嵌套，于是在當(dāng)前作用域找不到某個(gè)變量時(shí)，引擎會(huì)往外層嵌套作用域繼續(xù)查找，直達(dá)到最外層作用域（全局作用域）為止，也就是所謂的作用域鏈啦！

詞法作用域 相信有很多人都是搞不懂詞法作用域是什么？

所謂的詞法作用域，就是定義在詞法階段（詞法分析）的作用域，由你寫代碼時(shí)將變量和塊作用域?qū)懺谀睦飦頉Q定的。

遮蔽效應(yīng)

作用域查找會(huì)在找到第一個(gè)匹配的標(biāo)識符時(shí)停止，不會(huì)繼續(xù)往上層作用域查找，這就會(huì)產(chǎn)生遮蔽效應(yīng)。

欺騙詞法作用域

eval函數(shù)，修改詞法作用域
with關(guān)鍵字，創(chuàng)建詞法作用域

導(dǎo)致性能下降的原因，前面我們提過，在解析/語法分析、生成代碼階段，我們會(huì)對代碼進(jìn)行優(yōu)化，剔除冗余元素，但是當(dāng)使用eval/with時(shí)，所有優(yōu)化變得沒有意義，因?yàn)榇嬖诓豢深A(yù)見性，不知道修改和創(chuàng)建的詞法作用域是什么？所以會(huì)導(dǎo)致性能下降。

函數(shù)聲明、函數(shù)表達(dá)式、匿名函數(shù)表達(dá)式

函數(shù)表達(dá)式：function為第一個(gè)詞，那么就是一個(gè)函數(shù)聲明，否則就是一個(gè)函數(shù)表達(dá)式
匿名函數(shù)表達(dá)式：沒有函數(shù)名，匿名函數(shù)在棧追蹤這種不會(huì)顯示有意義的函數(shù)名，使得調(diào)試?yán)щy
IIFE: 立即執(zhí)行函數(shù)表達(dá)式（(function() { ... }())、(function(){ ... })()）

塊級作用域

let為其聲明的變量隱式地去劫持了所在的塊級作用域，不會(huì)在塊級作用域中進(jìn)行提升【變量提升】
Demo: with關(guān)鍵字為塊級作用域、{...}為塊級作用域，用完即銷毀
const常量，不可修改！
任何聲明在某個(gè)作用域（函數(shù)作用域和塊級作用域）的變量，都是屬于這個(gè)作用域。
每個(gè)作用域都會(huì)進(jìn)行提升操作。
函數(shù)聲明會(huì)被提升，函數(shù)表達(dá)式不會(huì)提升，變量聲明提升的過程中，函數(shù)會(huì)優(yōu)先！

閉包

閉包，有權(quán)訪問另外一個(gè)函數(shù)的變量標(biāo)識符的函數(shù)，比較常見的一個(gè)閉包問題，就是for循環(huán)。

    for(var i = 1; i <= 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, i*1000)
    }

會(huì)發(fā)現(xiàn)每一次輸出的都是6,為啥勒？所有的回調(diào)函數(shù)回在循環(huán)結(jié)束后才會(huì)執(zhí)行（事件循環(huán)）。所以每次都是輸出一個(gè)6來。

解決辦法：

1、IIFE，每個(gè)迭代儲存i的值

    for(var i = 1; i <= 5; i++) {
        (function(i) {
            var j = i;
            setTimeout(function() {
                console.log(j);
            }, j*1000);
        })(i)
    }

2、IIFE，將i入?yún)⑿薷某?b>j

    for(var i = 1; i <= 5; i++) {
        (function(j) {
            setTimeout(function() {
                console.log(j);
            }, j*1000);
        })(i)
    }

3、創(chuàng)建閉包的塊作用域

    for(var i = 1; i <= 5; i++) {
        let j = i;
        setTimeout(function() {
            console.log(j);
        }, j*1000);
    }

4、最優(yōu)

    for(let i = 1; i <= 5; i++) {
        setTimeout(function() {
            console.log(i);
        }, i*1000)
    }

另外一個(gè)閉包常用的場景，就是模塊暴露了，在這里提供一個(gè)現(xiàn)代模塊機(jī)制的實(shí)現(xiàn)方式，大家可以細(xì)細(xì)品嘗，

var MyMoudles = (function Manger() {
    var modules = {};
    function define(name, deps, impl) {
        for (var i = 0; i < deps.length; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    }
    function get(name) {
        return modules[name];
    }
})()

調(diào)用Demo:

MyMoudles.define("bar", [], function() {
    function hello(who) {
        return "Let me introduce: " + who;
    }
    return {
        hello: hello
    }
})
MyMoudles.define("foo", ["bar"], function(bar) {
    var hungry = "hippo";
    function awesome() {
        console.log(bar.hello(hungry).toUpperCase());
    }
    return {
        awesome: awesome
    }
})
var bar = MyMoudles.get("bar");
var foo = MyMoudles.get("foo");

console.log(bar.hello("hippo")); // Let me introduce: hippo
foo.awesome();

未來模塊機(jī)制

ES6提供了全新的模塊機(jī)制，基于函數(shù)的模塊（如上述現(xiàn)代模塊機(jī)制）并不是一個(gè)能被靜態(tài)識別的模式（編譯器無法識別），它們的API語義只有等到代碼運(yùn)行時(shí)才會(huì)考慮進(jìn)來，而ES6模塊就是一個(gè)能被靜態(tài)識別的模式，就是說API在編譯階段就會(huì)檢查API成員是否存在。

原文地址

云服務(wù)器 GPU云服務(wù)器你不知道的javascript上卷你不知道的javascript 你不知道的你不知道

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

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

發(fā)表評論

登陸后可評論

0條評論

zhaofeihao

男|高級講師

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

TA的文章

conda

閱讀 2277·2023-04-25 14:50
ZJI：中國香港4C多IP站群服務(wù)器(238IP)，8折優(yōu)惠，1600元/月，20MCN2+BGP帶

閱讀 1294·2021-10-13 09:50
前端網(wǎng)頁加載渲染鏈路優(yōu)化

閱讀 1876·2019-08-30 15:56
如何優(yōu)雅的使用vue+Dcloud（Hbuild）開發(fā)混合app

閱讀 1856·2019-08-29 15:29
CSS 水平居中

閱讀 2897·2019-08-29 15:27
用 margin 還是用 padding ？

閱讀 3588·2019-08-29 15:14
浮動(dòng)影響

閱讀 1209·2019-08-29 13:01
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法（九）二叉樹和二叉搜索樹

閱讀 3311·2019-08-26 14:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

你不知道的javascript(上卷)讀后感（一）

相關(guān)文章

**你不知道的javascript(上卷)讀后感（二）**

**十分鐘快速了解《你不知道的 JavaScript》（上卷）**

**你不知道的JavaScript上卷之作用域與閉包·讀書筆記**

重讀你不知道的JS (上) 第一節(jié)三章

重讀你不知道的JS (上) 第一節(jié)五章

發(fā)表評論

0條評論

zhaofeihao

男|高級講師

TA的文章

conda

ZJI：中國香港4C多IP站群服務(wù)器(238IP)，8折優(yōu)惠，1600元/月，20MCN2+BGP帶

前端網(wǎng)頁加載渲染鏈路優(yōu)化

如何優(yōu)雅的使用vue+Dcloud（Hbuild）開發(fā)混合app

CSS 水平居中

用 margin 還是用 padding ？

浮動(dòng)影響

JavaScript數(shù)據(jù)結(jié)構(gòu)與算法（九）二叉樹和二叉搜索樹

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

你不知道的javascript(上卷)讀后感（一）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

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