原文:dev.to/aman_singh/…javascript
譯者:前端小智html
阿里雲最近在作活動,低至2折,有興趣能夠看看:promotion.aliyun.com/ntms/yunpar…前端
JavaScript 是一種有趣的語言,咱們都喜歡它,由於它的性質。瀏覽器是JavaScript的主要運行的地方,二者在咱們的服務中協同工做。JS有一些概念,人們每每會對它掉以輕心,有時可能會忽略不計。原型、閉包和事件循環等概念仍然是大多數JS開發人員繞道而行的晦澀領域之一。正如咱們所知,無知是一件危險的事情,它可能會致使錯誤。java
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你!git
接下來,來看看幾個問題,你也能夠試試想一想,而後做答。github
var a = 10;
function foo() {
console.log(a); // ??
var a = 20;
}
foo();
複製代碼
var a = 10;
function foo() {
console.log(a); // ??
let a = 20;
}
foo();
複製代碼
var array = [];
for(var i = 0; i <3; i++) {
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??
複製代碼
function foo() {
setTimeout(foo, 0); // 是否存在堆棧溢出錯誤?
};
複製代碼
function foo() {
return Promise.resolve().then(foo);
};
複製代碼
var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError
複製代碼
var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, {c: 3});
Object.defineProperty(obj, 'd', { value: 4, enumerable: false });
// what properties will be printed when we run the for-in loop?
for(let prop in obj) {
console.log(prop);
}
複製代碼
var x = 10;
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??
複製代碼
如今,讓咱們從頭至尾回答每一個問題。我將給您一個簡短的解釋,同時試圖揭開這些行爲的神祕面紗,並提供一些參考資料。瀏覽器
undefined
使用var
關鍵字聲明的變量在JavaScript中會被提高,並在內存中分配值undefined
。 但初始化恰發生在你給變量賦值的地方。 另外,var
聲明的變量是函數做用域的,而let
和const
是塊做用域的。 因此,這就是這個過程的樣子:閉包
var a = 10; // 全局使用域
function foo() {
// var a 的聲明將被提高到到函數的頂部。
// 好比:var a
console.log(a); // 打印 undefined
// 實際初始化值20只發生在這裏
var a = 20; // local scope
}
複製代碼
ReferenceError:a undefined
。let
和const
聲明可讓變量在其做用域上受限於它所使用的塊、語句或表達式。與var
不一樣的是,這些變量沒有被提高,而且有一個所謂的暫時死區(TDZ)。試圖訪問TDZ中的這些變量將引起ReferenceError
,由於只有在執行到達聲明時才能訪問它們。併發
var a = 10; // 全局使用域
function foo() { // TDZ 開始
// 建立了未初始化的'a'
console.log(a); // ReferenceError
// TDZ結束,'a'僅在此處初始化,值爲20
let a = 20;
}
複製代碼
下表概述了與JavaScript中使用的不一樣關鍵字聲明的變量對應的提高行爲和使用域:ecmascript
[3, 3, 3]
在for
循環的頭部聲明帶有var
關鍵字的變量會爲該變量建立單個綁定(存儲空間)。 閱讀更多關於閉包的信息。 讓咱們再看一次for循環。
// 誤解做用域:認爲存在塊級做用域
var array = [];
for (var i = 0; i < 3; i++) {
// 三個箭頭函數體中的每一個`'i'`都指向相同的綁定,
// 這就是爲何它們在循環結束時返回相同的值'3'。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]
複製代碼
若是使用 let
聲明一個具備塊級做用域的變量,則爲每一個循環迭代建立一個新的綁定。
// 使用ES6塊級做用域
var array = [];
for (let i = 0; i < 3; i++) {
// 這一次,每一個'i'指的是一個新的的綁定,並保留當前的值。
// 所以,每一個箭頭函數返回一個不一樣的值。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
複製代碼
解決這個問題的另外一種方法是使用閉包。
let array = [];
for (var i = 0; i < 3; i++) {
array[i] = (function(x) {
return function() {
return x;
};
})(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
複製代碼
JavaScript併發模型基於「事件循環」。 當咱們說「瀏覽器是 JS 的家」時我真正的意思是瀏覽器提供運行時環境來執行咱們的JS代碼。
瀏覽器的主要組件包括調用堆棧,事件循環**,任務隊列和Web API**。 像setTimeout
,setInterval
和Promise
這樣的全局函數不是JavaScript的一部分,而是 Web API 的一部分。 JavaScript 環境的可視化形式以下所示:
JS調用棧是後進先出(LIFO)的。引擎每次從堆棧中取出一個函數,而後從上到下依次運行代碼。每當它遇到一些異步代碼,如setTimeout
,它就把它交給Web API
(箭頭1)。所以,每當事件被觸發時,callback
都會被髮送到任務隊列(箭頭2)。
事件循環(Event loop)不斷地監視任務隊列(Task Queue),並按它們排隊的順序一次處理一個回調。每當調用堆棧(call stack)爲空時,Event loop獲取回調並將其放入堆棧(stack )(箭頭3)中進行處理。請記住,若是調用堆棧不是空的,則事件循環不會將任何回調推入堆棧。
如今,有了這些知識,讓咱們來回答前面提到的問題:
調用 foo()
會將foo
函數放入調用堆棧(call stack)。
在處理內部代碼時,JS引擎遇到setTimeout
。
而後將foo
回調函數傳遞給WebAPIs(箭頭1)並從函數返回,調用堆棧再次爲空
計時器被設置爲0,所以foo
將被髮送到任務隊列(箭頭2)。
因爲調用堆棧是空的,事件循環將選擇foo
回調並將其推入調用堆棧進行處理。
進程再次重複,堆棧不會溢出。
運行示意圖以下所示:
大多數時候,開發人員假設在事件循環圖中只有一個任務隊列。但事實並不是如此,咱們能夠有多個任務隊列。由瀏覽器選擇其中的一個隊列並在該隊列中處理回調。
在底層來看,JavaScript中有宏任務和微任務。setTimeout
回調是宏任務,而Promise
回調是微任務。
主要的區別在於他們的執行方式。宏任務在單個循環週期中一次一個地推入堆棧,可是微任務隊列老是在執行後返回到事件循環以前清空。所以,若是你以處理條目的速度向這個隊列添加條目,那麼你就永遠在處理微任務。只有當微任務隊列爲空時,事件循環纔會從新渲染頁面、
如今,當你在控制檯中運行如下代碼段
function foo() {
return Promise.resolve().then(foo);
};
複製代碼
每次調用'foo
'都會繼續在微任務隊列上添加另外一個'foo
'回調,所以事件循環沒法繼續處理其餘事件(滾動,單擊等),直到該隊列徹底清空爲止。 所以,它會阻止渲染。
展開語法 和 for-of 語句遍歷iterable
對象定義要遍歷的數據。Array
或Map
是具備默認迭代行爲的內置迭代器。對象不是可迭代的,可是能夠經過使用iterable和iterator協議使它們可迭代。
在Mozilla文檔中,若是一個對象實現了@@iterator
方法,那麼它就是可迭代的,這意味着這個對象(或者它原型鏈上的一個對象)必須有一個帶有@@iterator
鍵的屬性,這個鍵能夠經過常量Symbol.iterator
得到。
上述語句可能看起來有點冗長,可是下面的示例將更有意義:
var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
// iterator 是一個具備 next 方法的對象,
// 它的返回至少有一個對象
// 兩個屬性:value&done。
// 返回一個 iterator 對象
return {
next: function() {
if (this._countDown === 3) {
const lastValue = this._countDown;
return { value: this._countDown, done: true };
}
this._countDown = this._countDown + 1;
return { value: this._countDown, done: false };
},
_countDown: 0
};
};
[...obj]; // 打印 [1, 2, 3]
複製代碼
還可使用 generator 函數來定製對象的迭代行爲:
var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
}
[...obj]; // 打印 [1, 2, 3]
複製代碼
for-in
循環遍歷對象自己的可枚舉屬性以及對象從其原型繼承的屬性。 可枚舉屬性是能夠在for-in
循環期間包含和訪問的屬性。
var obj = { a: 1, b: 2 };
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }
複製代碼
如今你已經掌握了這些知識,應該很容易理解爲何咱們的代碼要打印這些特定的屬性
var obj = { a: 1, b: 2 }; //a,b 都是 enumerables 屬性
// 將{c:3}設置爲'obj'的原型,而且咱們知道
// for-in 循環也迭代 obj 繼承的屬性
// 從它的原型,'c'也能夠被訪問。
Object.setPrototypeOf(obj, { c: 3 });
// 咱們在'obj'中定義了另一個屬性'd',可是
// 將'enumerable'設置爲false。 這意味着'd'將被忽略。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });
for (let prop in obj) {
console.log(prop);
}
// 打印
// a
// b
// c
複製代碼
在全局範圍內初始化x
時,它成爲window對象的屬性(不是嚴格的模式)。看看下面的代碼:
var x = 10; // global scope
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10
複製代碼
我們能夠斷言:
window.x === 10; // true
複製代碼
this
始終指向調用方法的對象。所以,在foo.getx()
的例子中,它指向foo
對象,返回90
的值。而在xGetter()
的狀況下,this
指向 window對象, 返回 window 中的x
的值,即10
。
要獲取 foo.x
的值,能夠經過使用Function.prototype.bind
將this
的值綁定到foo
對象來建立新函數。
let getFooX = foo.getX.bind(foo);
getFooX(); // 90
複製代碼
就這樣! 若是你的全部答案都正確,那麼幹漂亮。 我們都是經過犯錯來學習的。 這一切都是爲了瞭解背後的「緣由」。
代碼部署後可能存在的BUG無法實時知道,過後爲了解決這些BUG,花了大量的時間進行log 調試,這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。
爲了回饋讀者,《大遷世界》不按期舉行(每月一到三次),現金抽獎活動,保底200,外加用戶讚揚,但願你能成爲大遷世界的小錦鯉,快來試試吧
乾貨系列文章彙總以下,以爲不錯點個Star,歡迎 加羣 互相學習。
我是小智,公衆號「大遷世界」做者,對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨,在進階的路上,共勉!
關注公衆號,後臺回覆福利,便可看到福利,你懂的。
每次整理文章,通常都到2點才睡覺,一週4次左右,挺苦的,還望支持,給點鼓勵