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

資訊專欄INFORMATION COLUMN

8個問題看你是否真的懂 JS

pubdreamcc / 3434人閱讀

摘要:解決這個問題的另一種方法是使用閉包。瀏覽器的主要組件包括調用堆棧,事件循環,任務隊列和。由于調用堆棧是空的,事件循環將選擇回調并將其推入調用堆棧進行處理。進程再次重復,堆棧不會溢出。

為了保證的可讀性,本文采用意譯而非直譯。

JavaScript 是一種有趣的語言,我們都喜歡它,因為它的性質。瀏覽器是JavaScript的主要運行的地方,兩者在我們的服務中協同工作。JS有一些概念,人們往往會對它掉以輕心,有時可能會忽略不計。原型、閉包和事件循環等概念仍然是大多數JS開發人員繞道而行的晦澀領域之一。正如我們所知,無知是一件危險的事情,它可能會導致錯誤。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!

接下來,來看看幾個問題,你也可以試試想想,然后作答。

問題1:瀏覽器控制臺上會打印什么?
var a = 10;
function foo() {
    console.log(a); // ??
    var a = 20;
}
foo();

問題2:如果我們使用 let 或 const 代替 var,輸出是否相同
var a = 10;
function foo() {
    console.log(a); // ??
    let a = 20;
}
foo();    
    
問題3:“newArray”中有哪些元素?
var array = [];
for(var i = 0; i <3; i++) {
 array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??   


問題4:如果我們在瀏覽器控制臺中運行"foo"函數,是否會導致堆棧溢出錯誤?

function foo() {
  setTimeout(foo, 0); // 是否存在堆棧溢出錯誤?
};    
    
問題5: 如果在控制臺中運行以下函數,頁面(選項卡)的 UI 是否仍然響應
function foo() {
  return Promise.resolve().then(foo);
};    
問題6: 我們能否以某種方式為下面的語句使用展開運算而不導致類型錯誤
var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError 
問題7:運行以下代碼片段時,控制臺上會打印什么?
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);
}  
問題8:xGetter() 會打印什么值?
var x = 10;
var foo = {
  x: 90,
  getX: function() {
    return this.x;
  }
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??
答案

現在,讓我們從頭到尾回答每個問題。我將給您一個簡短的解釋,同時試圖揭開這些行為的神秘面紗,并提供一些參考資料。

問題1: undefined 解析:

使用var關鍵字聲明的變量在JavaScript中會被提升,并在內存中分配值undefined。 但初始化恰發生在你給變量賦值的地方。 另外,var聲明的變量是函數作用域的,而letconst是塊作用域的。 所以,這就是這個過程的樣子:

var a = 10; // 全局使用域
function foo() {
// var a 的聲明將被提升到到函數的頂部。
// 比如:var a

console.log(a); // 打印 undefined

// 實際初始化值20只發生在這里
   var a = 20; // local scope
}

問題 2:ReferenceError:a undefined 解析:

letconst聲明可以讓變量在其作用域上受限于它所使用的塊、語句或表達式。與var不同的是,這些變量沒有被提升,并且有一個所謂的暫時死區(TDZ)。試圖訪問TDZ中的這些變量將引發ReferenceError,因為只有在執行到達聲明時才能訪問它們。

var a = 10; // 全局使用域
function foo() { // TDZ 開始

// 創建了未初始化的"a"
    console.log(a); // ReferenceError

// TDZ結束,"a"僅在此處初始化,值為20
    let a = 20;
}

下表概述了與JavaScript中使用的不同關鍵字聲明的變量對應的提升行為和使用域:

問題 3: [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]  

問題4 : 不會溢出 解析:

JavaScript并發模型基于“事件循環”。 當我們說“瀏覽器是 JS 的家”時我真正的意思是瀏覽器提供運行時環境來執行我們的JS代碼。

瀏覽器的主要組件包括調用堆棧事件循環,任務隊列Web API。 像setTimeoutsetIntervalPromise這樣的全局函數不是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回調并將其推入調用堆棧進行處理。

進程再次重復,堆棧不會溢出。

運行示意圖如下所示:

問題5 : 不會響應 解析:

大多數時候,開發人員假設在事件循環圖中只有一個任務隊列。但事實并非如此,我們可以有多個任務隊列。由瀏覽器選擇其中的一個隊列并在該隊列中處理回調

在底層來看,JavaScript中有宏任務和微任務。setTimeout回調是宏任務,而Promise回調是微任務

主要的區別在于他們的執行方式。宏任務在單個循環周期中一次一個地推入堆棧,但是微任務隊列總是在執行后返回到事件循環之前清空。因此,如果你以處理條目的速度向這個隊列添加條目,那么你就永遠在處理微任務。只有當微任務隊列為空時,事件循環才會重新渲染頁面、

現在,當你在控制臺中運行以下代碼段

function foo() {
  return Promise.resolve().then(foo);
};

每次調用"foo"都會繼續在微任務隊列上添加另一個"foo"回調,因此事件循環無法繼續處理其他事件(滾動,單擊等),直到該隊列完全清空為止。 因此,它會阻止渲染。

問題6 : 會導致TypeError錯誤 解析:

展開語法 和 for-of 語句遍歷iterable對象定義要遍歷的數據。ArrayMap 是具有默認迭代行為的內置迭代器。對象不是可迭代的,但是可以通過使用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]

問題7 : a, b, c 解析:

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

問題8 : 10 解析:

在全局范圍內初始化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.bindthis的值綁定到foo對象來創建新函數。

let getFooX = foo.getX.bind(foo);
getFooX(); // 90

就這樣! 如果你的所有答案都正確,那么干漂亮。 咱們都是通過犯錯來學習的。 這一切都是為了了解背后的“原因”。

代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!

關注公眾號,后臺回復福利,即可看到福利,你懂的。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/75390.html

相關文章

  • 8問題看你是否真的 JS

    摘要:解決這個問題的另一種方法是使用閉包。瀏覽器的主要組件包括調用堆棧,事件循環,任務隊列和。由于調用堆棧是空的,事件循環將選擇回調并將其推入調用堆棧進行處理。進程再次重復,堆棧不會溢出。 為了保證的可讀性,本文采用意譯而非直譯。 JavaScript 是一種有趣的語言,我們都喜歡它,因為它的性質。瀏覽器是JavaScript的主要運行的地方,兩者在我們的服務中協同工作。JS有一些概念,人們...

    rozbo 評論0 收藏0
  • 分享一下 軟件測試面試歷程和套路,真的很實在

    摘要:軟件測試自學秘訣面試失敗一天,心態穩的一批,因為面試的全是外包人事幫我聯系的公司,工資全都是一萬以上,之前只有四五千的自己根本不覺得自己能勝任。 個人是去年年底零基礎轉行,兩三千培訓費學出來,學完后也是稀里糊涂,僅是知道功能測試就是找問題,其他接口,性能,數據庫,python基礎,虛擬機搭建網站都實現了課程展示那樣。面試資...

    Lyux 評論0 收藏0
  • 必須知道的程序員思維

    摘要:以及之前說過的,當程序員就是為了提高社會效率。寫高效的代碼是每個程序員的追求,寫易懂的代碼是每個程序員的美德。讓正確的程序更快,要比讓快速的程序正確容易得多。我覺得這樣才能當一個有格局的程序員。 在博客閱讀:https://ssshooter.com/2019-04... 工作 寫程序不是為了炫耀自己的技術,是要給公司創造價值,要確實幫助使用這個程序的人。以及之前說過的,當程序員就是為...

    Joyven 評論0 收藏0
  • 感受javascript之美系列教程第一課 基礎知識

    摘要:屌絲和女神約好一起喝咖啡,聊天很愉快,分開不久手機收到女神發來的一個信息西女一個西女,你的嘴巴和手好白,你的嘴巴和手好白,你的嘴巴和手好白。屌絲看到了這句話頓時懵逼了。其實如果沒有編輯器,你就相當于女神,電腦就相當于屌絲,他看不懂你寫的。 javascript,當今最流行的開發語言之一,既有它簡單易學的一面,又有它不同于其它語言奇怪的一面。我們一起通過感受javascript之美這套課...

    callmewhy 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<