《你不知道的JavaScript上卷》知識點整理與讀書筆記-有解無憂

- 第一部分作用域和閉包
- 第1章作用域是什么
  - 1.1編譯原理
  - 1.2理解作用域
  - 1.3作用域嵌套
  - 1.5例外
- 第2章詞法作用域
  - 2.1詞法階段
  - 2.2欺騙詞法
- 第3章函式作用域和塊作用域
  - 3.1函式中的作用域
  - 3.2隱藏內部實作
  - 3.3函式作用域
  - 3.4塊作用域
- 第4章提升
- 第5章作用域和閉包
  - 5.1 總結
  - 5.2 回圈和閉包
  - 5.3 模塊
第二部分 this和物件原型
- 第1章關于this
  - 1.1為什么要使用this
  - 1.2對this的一些誤解
- 第2章 this全面決議
  - 2.1呼叫位置
  - 2.2系結規則
  - 2.3優先級
  - 2.4箭頭函式
- 第3章物件
  - 3.1物件定義的語法
  - 3.2型別
  - 3.3物件中的內容
  - 3.4物件中的遍歷
- 第4章混合物件“類”
- 第5章原型
- 第6章行為委托

之前被好友推薦過《你不知道的JavaScript》這一系列的書籍，上中下三本書都不算厚，內容也是比較獨立，本來是打算一個月內看完這本上卷和下卷，可總是因為自己的懶惰讀了一個月才斷斷續續讀完上卷，不得不說單是粗略的讀完上卷就讓我很有識訓，下面是對上卷部分的讀書筆記，不是什么檔案和教程，僅僅供自己學習記錄，歡迎各位路過的大佬能指出理解錯誤的地方以及意見，

第一部分作用域和閉包

第1章作用域是什么

1.1編譯原理

首先，我也是學習JavaScript一開始，找到資料里面就說JavaScript是一門“解釋型”語言，但是其實JavaScript是一門編譯語言，

在傳統的編譯語言中，一段源代碼執行前會先經過一段叫做編譯的操作，而編譯一共有如下3個程序，

分詞/詞法分析（Tokenizing/Lexing）
這個程序將把編程語言的字串分解為有意義的代碼塊，這些代碼塊被稱為詞法單元（token）

var a = 2;
//就會被拆解成 var、a、=、2、; 這些都是詞法單元
//而空格是否屬于此法單元取決于是否有意義，
//這里的var a = 2;中的任何一個空格都沒有意義

決議/語法分析（Parsing）
把眾多詞法單元組成的詞法單元流（陣列）轉換成一顆樹的結構，叫抽象語法樹（AbstractSyntaxTree，AST）

var a = 2;
//這句陳述句轉化為樹的結構是一個叫做VariableDeclaration

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-4rnlCF0N-1604651680070)(./上img/抽象語法樹.png)]

代碼生成
將語法樹轉化為可執行的代碼程序，

其他的語言的編譯在構建前，而JavaScript在執行前也會進行這編譯3部曲

1.2理解作用域

對var a = 2;處理時候，具體的編譯器是這樣作業的，

//1 遇到 var a 編譯器會在當前作用域中的一個集合查詢是否有a這個變數，
//如果有就繼續進行第2步編譯動作，
//如果沒有會要求當前作用域在自己的這個集合中宣告一個新的a變數

//2 遇到 a = 2 編譯器為這條陳述句生成運行時候的代碼，供運行時候使用，
//這時候編譯器要在生成的代碼中表達出 a=2這個意思，所以在生成代碼時候，
//需要一個a變數，先去找當前的作用域中的集合是否含有這個變數，
//如果沒有就去上一層找，直到找到為止，否者就是報錯，

在這里注意的是在步驟2中，編譯器會查找作用域集合中時候會有2種不同的查找方式，一種是LHS，一種是RHS，也就是左查詢與右查詢，這個和我在學習C++中左值右值時候，我覺得十分相識，也就是通過最原始的“=”進行理解，左邊是被填充的，右邊是去填充的，
在這里插入圖片描述

var a = 2;//這里編譯器生成代碼時候，會去當前作用域集合中找a變數，然后賦值為2，
//你可以理解為是找到這片叫做a空間，然后填充上2這個資料，
//所以這里是左查詢，也就是找到被填充的a空間

console.log(a)//這里編譯器生成代碼時候，會去當前作用域集合中找a變數，然后列印出來，
//你可以理解為是找到這個叫做a的變數里面的值，然后使用這個值，
//所以這里是右查詢，也就是找到去填充（或者理解為取出來使用）的a空間里面本身的值！！！

1.3作用域嵌套

其實書中這部分的內容講的就是作用域鏈，也就是對var a = 2;處理時候，具體的編譯器作業的第二步中需要一個a變數，先去找當前的作用域中的集合是否含有這個變數，如果沒有就去上一層找，直到找到為止，直到最頂層沒有報錯為止，這就是一直往上的查找就是順著作用域鏈，

var b = 3
function foo(a){
    console.log(a+b)
}
foo(2)//4
//這里的function內部是自己的函式作用域，function外面是全域作用域，
//function內部作用域沒有b變數，為什么還能具體作業？
//就是因為function中沒有，所以找上一級，然后上一級中就有b，就可以使用
//這種機制就是作用域嵌套，或者作用域鏈，
//我反正是理解為，子作用域可以使用父作用域，但是父作用域不可以反過來使用子作用域，
//當然這里的什么父、子作用域是個人為了理解，自己說的，不是什么術語，

1.5例外

前面都是順著作用域鏈能查找成功的時候，但是我們也說過，如果找不到會報錯，這里我們查找有2中情況，自然左右查找不到，報錯是不一樣的，
在這里插入圖片描述

這里小小驗證一下書上講的左查詢吧，

a = 2//這里沒有var 宣告，但是a=2是左查找，所以左查詢熱心的會在全域作用域中的集合里面創建一個空的a變數空間，
console.log(a)//右查找結果是2

"use strict"
a = 2//不好意思，這次左查詢無法幫助生成一個空的a變數空間了，
//單單是這一句陳述句就會因為左查詢失敗，報ReferenceError


console.log(a)//右查找，肯定失敗，這句本生也是右查找失敗報ReferenceError,
//不過前一句本來就是錯，壓根也不會運行到這一句，

第2章詞法作用域

2.1詞法階段

首先詞法作用域就是你寫代碼時候，書寫的變數位置或者塊作用域的位置就是詞法作用域，而這個詞法分析時候（也就前面的拆分陳述句var a = 2;為var、a、=、2、;）,產生的作用域和寫的時候一樣，例如如下代碼，

var a = 3;//這行陳述句是屬于全域作用域的
function foo(a) {
    //這里面是foo函式形成的塊作用域
    //寫所以下面的b，bar()，以及自己的a，都是這個作用域的
    //所以決議之后任然是滿足這個關系
    var b = a * 2;//這里的a是foo函式里面的，不是外面的var a = 3;里面的a
    function bar(c) {
        //這里面是bar函式形成的塊作用域
        //所以自己的c是屬于這里   
        console.log(a,b,c);
    }
    bar(b * 3);
}
foo(2);//2,4,12

所以詞法作用域主要是體現了2點：

一是一層一層往上的循著作用域找變數，這個案例中就是bar使用的a，b，c來自上一級的foo，
二是，當子級的作用域有著與父級作用域同樣的識別符號（就是變數名、函式名）時候，子級的會覆寫（如果是知道方法重寫，那么這里就理解為子類重寫父類方法），這種叫做遮蔽效應，例如在foo作用域、以及子作用域中使用a時候，都是foo函式中的a，而不是foo作用域的父作用域中的var a = 3;中的a，當然，當bar中有a時候，bar中使用a時候，就會使用自己a，而覆寫foo(a)的a，與全域的var a = 3的a

2.2欺騙詞法

首先記住，少使用欺騙詞法，欺騙詞法作用域會導致性能下降，使用eval與with關鍵字能實作這種，我這里就寫個eval

首先eval()的用法是接受一串字串，并把字串的內容替換到呼叫的位置，有點抽象，請看代碼：

function foo(str,a) {
    //這里是foo形成的詞法作用域
    //先假裝eval(str)不存在
    //這里只有a與str是自己的，b是外面的
    //所以呼叫foo("var b = 3;",1);應該是1，2的結果
    //放開注釋eval(str)
    //輸出為1，3
    //因為eval("var b = 3;")等同于在這行eval位置替換為
    //var b = 3;
    //因此var b = 3中的b屏蔽外面的b  

    //eval(str);
    console.log(a,b);
}
var b =2;
foo("var b = 3;",1);//1,3

第3章函式作用域和塊作用域

3.1函式中的作用域

函式作用域：屬于這個函式的全部變數都可以在整個函式的范圍內使用及復用（事實上在嵌套的作用域中也可以使用）這種設計方案能充分利用JavaScript變數可以根據需要改變值型別的“動態”特性，

3.2隱藏內部實作

最小暴露原則：在軟體設計中，應該最小限度的暴露最少內容，而將其他內容隱藏起來，
在JavaScript中的函式作用域就可以實作隱藏代碼的效果

function doSomething(a) {
    b = a + doSomethingElse(a * 2);
    console.log(b * 3);
}
function doSomethingElse(a) {
    return a - 1;
}
var b;
doSomething(2);//15

很顯然這和時候我們任然能夠訪問到b以及doSomethingElse()函式，但是目前就這些代碼而言，b以及doSomethingElse()只是為了給doSomething()使用，因此我們不應該讓外部也能夠訪問到這兩個識別符號，所以應該進行隱藏

function doSomething(a) {
    function doSomethingElse(a) {
        return a - 1;
    }
    var b;
    b = a + doSomethingElse(a * 2);
    console.log(b * 3);
}
doSomething(2);//15

3.3函式作用域

盡管前面的使用函式包裹代碼塊達到了隱藏的意義，但是在某些時候任然是有一些缺點，一是用來包裹隱藏的函式名污染了全域變數，然后必須顯示的呼叫函式名，但是幸好我們可以使用立即執行函式來解決，

(function foo() {
    var a = 3;
    console.log(a);    
})();
console.log(a);
//這里就可以讓函式當作一個運算式，而不是函式宣告
//這里就沒有讓foo放出去污染全域，因為他不是宣告
//這里最后緊緊跟了一個()，表示立即呼叫，因此不用顯示使用識別符號呼叫
//當然把最后的()放進去的效果也是一樣的，僅僅是書寫風格不同，如下
(function foo() {
    var a = 3;
    console.log(a);    
}());
console.log(a);

那么時候是函式運算式呢？

Good question

區分:書上的辦法很簡單，就是查看function關鍵字出現在宣告中的位置（不僅僅是一行代碼，而是整個宣告中的位置），如果function是宣告中的第一個詞，那么就是一個函式宣告，否者就是一個函式運算式，

上面的代碼中(function foo(){…})()就不是function開頭，這個時候就是作為運算式，而foo識別符號就是被封鎖在foo(){…}中…的部分中，所以就沒有污染全域變數

匿名和具名
匿名函式就是沒有名字的函式

setTimeout(function(){
    console.log("I waited 1 second");
},1000);

這部分的片段代碼中seTimeout中function()就是沒有名字，所以就是匿名函式，

注意：之后函式運算式才能擁有這種匿名函式，函式運算式沒有函式名，請看前面的代碼，這里可是函式運算式哈，

3.4塊作用域

現在我們學會了詞法作用域、函式作用域以及一些小的知識點，現在學習新的作用域、塊作用域，

前面說過，使用函式作用域能夠隱藏一段代碼，而隱藏也就是具有隔離意思，把一段代碼隔離到一個函式中，讓其外界無法觸碰，但是并不是使用外包函式就能解決，

//這行代碼只是為了驗證()中的var i，以及{}中的a，最后在外部均可以訪問到這兩個識別符號

for(var i = 0; i < 10; i++){
    console.log("for里面呼叫i",i);
    var a = 5;
}
console.log("for外面呼叫for里面的a",a); //for外面呼叫for里面的a 5  
console.log("for外面for里面的i",i);//for外面for里面的i 10

下面是使用函式包裹

(function(){
for(var i = 0; i < 10; i++){
    console.log("for里面呼叫i",i);
    var a = 5;
}
}())
console.log("for外面呼叫for里面的a",a);//VM22:7 Uncaught ReferenceError: a is not defined  
console.log("for外面呼叫i",i);//Uncaught ReferenceError: i is not defined

是完成了封鎖，可是這樣情況并不簡便，所以開發者為JavaScript提供了塊作用域，我覺得其實就和完成了函式作用域一樣的功能，封鎖代碼塊在其{}中，

let宣告的變數，是會和當前的作用域進行系結，

for(let i = 0; i < 10; i++){
    console.log("for里面呼叫i",i);
    var a = 5;
}
console.log("for外面for里面的i",i);//Uncaught ReferenceError: i is not defined

恭喜，i已經系結在for體內了，是不是方便很多了呢，

注意let i,不僅僅是把i系結到了for回圈的{}中，準確的說是系結到了每一個迭代中，這點十分十分重要，后面閉包時候會再次提到這個事，同時let宣告的識別符號不會進行提升，這一點后面的提升相關部分會進行說明

const
const宣告的變數，是會和當前的作用域進行系結，并且這個變數的值是固定的，不能再更改
try/cath
沒想到吧，居然每一個cath分支都是一個塊作用域，不相信的話，可以動手試一試

第4章提升

首先得出結論：

只有宣告本身會被提升，而賦值或者其他運行的邏輯會留在原地，如果是提升改變的代碼執行的順序，會造成嚴重的破壞
宣告包括變數宣告以及函式宣告
每個作用域都會進行提升
函式和變數提升時候，函式會優先，因為函式是一等公民
let以及const宣告的識別符號不會提升

foo();//1
var foo;
function foo() {
    console.log(1);
}
foo = function () {
    console.log(2);
}

上面代碼會被引擎理解為如下形式：

function foo() {
    console.log(1);
}
foo();//1

foo = function () {
    console.log(2);
}
foo();//2

所以函式是優先提升的，

第5章作用域和閉包

5.1 總結

我喜歡開篇，直接就總結完，

閉包產生的2種情況

當函式作為另一個函式的引數
函式作為回傳值回傳

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz();//2 朋友，這就是閉包效果

5.2 回圈和閉包

要說明閉包，for回圈是一個常見的例子

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

這段代碼再運行時候會每秒一次的頻率輸出5次6.

延遲函式的回呼會在全部回圈迭代結束的之后時候進行呼叫（請查詢宏任務、微任務相關知識點），而不是每次迭代時候呼叫，所以最后呼叫i，但是i是公共的，并且值為最后一個回圈決定的6，所以結果是5次6

那怎么給每個迭代的版本獲取一個實時的i，滿足哪怕是最后回圈迭代完再呼叫定時函式，但是每個定時函式都是呼叫自己版本的，而不是呼叫最后的公用6呢？

那就是每次回圈迭代時候，我們給每一個迭代都系結一個i，如下所示，我們使用let讓每一個i都再內部迭代進行系結，

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

5.3 模塊

在js中的模塊也是和閉包息息相關，

模塊：

必須要有外部的封閉函式，該函式必須要被呼叫一次
封閉的函式至少要回傳一個內部函式
使用立即執行函式配合有奇效

var foo = (function(){
    var something = "cool";
    var another = [1,2,3];
    function doSomething() {
        console.log(something);
    }
    function doAnother() {
        console.log(another.join("!"));
    }
    return {
        doSomething,
        doAnother
    }
})();
foo.doSomething();//cool
foo.doAnother();//1！2！3

第二部分 this和物件原型

第1章關于this

1.1為什么要使用this

首先記住，this提供了一種更優雅的方式隱式的傳遞一個物件參考，從而使API設計更加的簡潔，并且更加易于復用

1.2對this的一些誤解

誤解一、指向自身
按照this這個單詞的語意，我們總是會把他認為是指向自身，事實上有些時候確實如此，但是并不是總指向自身，分析下面的模式，

function foo(num) {
    //記錄count被呼叫的次數
    this.count++;
}
foo.count = 0;
var i;
for(i=0;i<10;i++){
    if(i>5){
        foo(i);
    }
}
//foo:6
//foo:7
//foo:8
//foo:9
console.log(foo.count);//0

是不是沒想到，哈哈哈，我讀到這里時候也是沒想到，好像就是從來沒有仔細想過這件事一樣，首先這里解釋一下，這里的this.count會在全域創建一個變數，值為NaN，至于為什么后面第2章在解釋，這里只是為了說明this真的不是任何時候指向自己，下面是單獨列印的結果，

(function foo(num) {
    //記錄count被呼叫的次數
    this.count++;
    console.log(this);//window,也就是全域
    console.log(this.count);//NaN
}())

誤解二、指向他的作用域
首先這里this有時候指向作用域，有時候又不是，但是明確的一點就是任何時候this都是不會指向他的詞法作用域，因為詞法作用域是屬于引擎的，無法通過js代碼進行訪問，

首先明確一下前面的案例中foo()中的this是指向window，這里我們在前面的基礎上改一改

function foo() {
    var a = 2;
    this.bar();
}
function bar() {
    console.log(this.a);
}
foo();//undefined

明明this是window，也就是全域，然后bar也在全域，this.bar()沒問題，但是因為bar中有this，按照詞法作用域，bar在foo中，this.a右查詢，就會查詢bar的作用域中的a，但是沒有就向上面找，上面foo中有a，所以呼叫，可是事實呢，結果是找不到，說明this.a進行右查詢之后壓根沒有往上，或者往上后查找失敗，（學了后面知道，是沒有往上，因為bar中的this不是指向bar作用域，而是全域，所以最頂層沒有，也不往上，直接undefined，至于是為什么bar中的this以及foo中的this均為window，請看后面的章節）

第2章 this全面決議

2.1呼叫位置

呼叫位置就是函式在代碼中被呼叫的位置，不是宣告的位置，

function foo() {
    function bar() {
   }
   bar();//在foo中宣告，所以bar的呼叫位置在foo中
}
foo();//在全域中宣告，所以foo內的呼叫位置在window上

2.2系結規則

（1）默認系結
this系結在window上，這個時候滿足：查看函式呼叫位置時候，函式是光禿禿的直接呼叫，比如前面2.1中的bar，盡管是在foo中呼叫，可以列印看看bar中this是不是指向window
（2）隱式系結
this系結到某個物件上，這個時候滿足，這個物件的一個屬性是一個函式，并且呼叫這個函式屬性時候，是通過物件.函式名()或者物件函式名呼叫，否者會出現隱式丟失，

var a = 3;//我是全域的3
function foo(){
    console.log(this.a);
}
var obj = {
    a:2,//我是物件的2
    foo:foo
};

obj.foo();//2，this系結的是obj
obj["foo"]();//2，this系結的是obj

var bar = obj.foo;//注意，這里可不是呼叫，后面沒有()，這里只是拿出來
bar();//結果是3，明明bar就是foo函式，
//但是注意，這里并不是我們說的呼叫方法的兩種之一
//所以呀，系結丟失，而這里，
//bar的呼叫位置是光禿禿的直接呼叫，
//所以這里this系結到window上咯

（3）顯式系結
this系結到某個物件上，但是其變種不會產生隱式丟失，這種方法很粗暴，直接使用call()，或者apply()，這兩個函式，直接修改this的系結物件，

function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
};
foo.call(obj);//2，也就是把foo函式的this，系結到obj上

可是在進行如下呼叫時候，也會丟失

var a = 3;//我是全域的3
function foo(){
    console.log(this.a);
}
var obj = {
    a:2,
    foo:foo
};
foo.call(obj);

//下面是呼叫
var bar = obj.foo;
bar()//是3，哈哈哈

顯示系結的變種的核心思想都是外面包裹一個函式，每次呼叫這個包裹函式就好，哪怕是在呼叫位置光禿禿呼叫，都不會系結到全域的window，因為呼叫包裹函式，每次自動呼叫一次apply或者call，下面是變種的寫法，

//變種一，直接包裹一個函式
var a = 3;//我是全域的3
var obj = {
    a:2,//我是物件的2
    foo:foo
};
function foo(){
    console.log(this.a);
}
function bar() {
    return foo.call(obj);
}

bar();//2  所以每次這樣就好，哈哈哈

（4）new系結
首先JavaScript中new和其他語言中的new是完全不同，
JS中的new：使用new來呼叫建構式，但JS中建構式不屬于某個類，也不會實體化某個類，（關于更多的解釋，在第6章）

new的機制為：
創建一個全新的物件
這個新物件執行[原型]鏈接
這個新物件系結到函式呼叫的this中
如果函式沒有回傳其他物件，new自動回傳這個新物件

function foo(a){
    this.a =a ;
}
var bar = new foo(2);
console.log(bar.a);//2

2.3優先級

不舉例了，這里直接總結結論，

new最大
顯示
隱式
默認

2.4箭頭函式

箭頭函式是ES6中新東西，不遵循上面的4條系結規則，而是根據外層作用域決定的，

var a = 3;
var obj = {
    a:2
};
function foo(){
   ((a)=>{
        //this繼承foo
        console.log(this.a);
    })()
}
foo()//3 這里光禿禿呼叫，foo中this是window，所以回呼中是window的a

var a = 3;
var obj = {
    a:2
};
function foo(){
   ((a)=>{
        //this繼承foo
        console.log(this.a);
    })()
}
foo.call(obj)//2 這里顯示呼叫，foo中this是obj，所以回呼中是obj的a

第3章物件

3.1物件定義的語法

有兩種方式，一種是通過宣告形式，一種是通過構造形式

//宣告
var obj = {
    key:value
}

//構造
var obj = new Object();

3.2型別

物件有6種基本型別

string
number
boolean
null
undefined
object
當然這些基本型別本身不是物件，只是說物件是根據基本型別劃分有這么幾個型別，不明白的可以繼續看下去，

內置物件
JS中有許多特殊的物件子型別，被成為內置物件，下面的一些內置物件的名字和基本型別相似，但是不是同一個東西，下面的是實實在在的一個物件，不像前面的基本型別只是判別標準

String
Number
Boolean
Object
Function
Array
Date
RegExp
Error
這些內置的物件好比java語言中的包裝類，但是你先明白JavaScript中的類都是函式，是通過函式表達類的表象（這是后話，后面的第四章會有詳細的類的講解）

3.3物件中的內容

首先要強調一點，我們說的內容是，似乎暗示說這些值在物件內部，但是其實不是，如果是學過c語言或者c++的指標，或者明白說java中的參考，理解這一點是很容易的，在js中的物件的內容，物件中對的屬性并不保存某些值，而是通過參考的方式，存放的是一些真正值的地址，

書中的3.3.2中，再次闡述，一個函式與一個物件的關系，我通讀完后，覺得其實就是任然說明和前面this隱式系結一個物件的道理一樣，一個函式無論如何也不要理解為屬于一個物件，我們應該理解為這個物件擁有這個函式，或者說這個物件目前是這個函式的落腳點，畢竟，在物件中，如果某個屬性是函式，那么這個屬性保存的值其實是這個函式的參考而已，

特別注意陣列也是js中的子物件Array，然后盡管是陣列按照組織下標的方式存盤資料，但是你也可以為陣列添加key:value的形式的內容，還記得嗎，陣列不是有一個length屬性嗎，這個就是最好的例子，

var array = ["foo","22"];
array.bar = "bar";
console.log(array.bar)//bar

現在關于參考，探討對物件的內容的拷貝，因為參考的存在，所以出現了深淺拷貝，淺拷貝是拷貝參考，深拷貝而是徹底的進行復制一份資料，而在修改，資料時候，又牽扯到屬性描述符以及setter與getter，下面的這兩篇博客中部分內容對此進行了總結，

物件

getter與setter

3.4物件中的遍歷

for…in回圈可以用來遍歷物件的可列舉屬性串列（包括[prototype]鏈），但是如何遍歷屬性的值？？？對于陣列來說：

var array = [1,2,3];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

這可不是遍歷陣列的值，這是遍歷陣列的下標，而不是值！！！
通過這個說明了通過for…in遍歷值是不行，但是對于陣列而言有一些方法可以進行值的遍歷，（針對陣列的遍歷的方法，由于不是這一節的重點，不總結進來）

但是對與其他的物件呢？ES6中就專門增加了for…of結構遍歷值（當然陣列也可使用這個哈）

var array = [1,2,3];
for(var v of array){
    console.log(v);
}
//1
//2
//3

好神奇，成功了，可是這種for…of的核心是怎么作業的呢？

for…of會首先向被迭代物件請求一個迭代器物件，然后通過呼叫迭代器物件的next()方法來遍歷所有的回傳值，

某種資料結構中必須要有@@iterator，才可以給for…of一個迭代器物件

陣列中有內置的@@iterator，所以可以給for…of一個迭代器物件

var array = [1,2,3];
var it = array[Symbol.iterator]();

it.next();//{value: 1, done: false}
it.next();//{value: 2, done: false}
it.next();//{value: 3, done: false}
it.next();//{value: undefined, done: true}

我們使用Symbol.iterator獲取@@iterator內部屬性，關于點擊這里Symbol，請記住參考類似的類似iterator特殊屬性時候，要使用符號名array[Symbol.iterator]，而不是單獨一個array[iterator]
array[Symbol.iterator]也就是@@iterator本身不是迭代器，而是一個回傳迭代器的函式，所以上面的的代碼中，通過后面()呼叫，回傳一個迭代器，然后賦值給it

所以最后，讓我們按照上面的2條，我們自己為一個遍歷的物件實作一個迭代器

var obj = {
    a:2,
    b:3
}
//下面代碼的意義在于給obj定義一個Symbol.iterator屬性，這個屬性是一個函式，用來回傳迭代器
Object.defineProperty(obj,Symbol.iterator,{
    enumerable:false,
    writable:false,
    configurable:true,
    //看到了嗎，這個屬性值是一個函式
    value:function () {
        var o = this;//也就是這個物件本身，想一想為什么this是指向這個物件本身，我保證前面的this里面講的知識，絕對可以分析出來這里的this指向哪里
        var idx = 0;
        var ks = Object.keys(o);//回傳這個物件的鍵值串列
        return{
            next:function () {
                return{
                    value:o[ks[idx++]],
                    done:(idx>ks.length)
                }
            }
        }
    }
})

//使用for...of遍歷
for(var v of obj){
    console.log(v);
}

第4章混合物件“類”

第5章原型

第6章行為委托

未完待續，下個周六整理完第二部分

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/206635.html

標籤：其他

上一篇：Keepalived 應用部署 ————及 Keepalived + Lvs 實作高可用負載均衡

下一篇：臥槽這菜雞程式員不講武德，年薪居然有50萬（50萬面經分享）

《你不知道的JavaScript上卷》知識點整理與讀書筆記

第一部分 作用域和閉包

第1章 作用域是什么