「JS篇」你不知道的 JS 知識點總結（一）

JouyPub 發布于2019-08-23 17:09 / 2483人閱讀

摘要：調用棧就是為了到達當前執行位置所調用到的所用函數。方法測試是否至少有一個元素通過由提供的函數實現的測試返回值是終止。然而，如果存在于原型鏈上層，賦值語句的行為就會有些不同而且可能很出人意料。

typeof null 為 ”object” 解釋

不同的對象在底層都表示為二進制，在JavaScript中二進制前三位都為0的話會被判斷為object類型，null 的二進制表示都是0，自然前三位都是0，所以執行 typeof null 時，會返回 ”object”。

傳統編程語言編譯的三個步驟

分詞/詞法分析

解析/語法分析

代碼生成

變量的賦值操作

編譯階段 -- 首次編譯器會在當前作用域中聲明一個變量（變量提升），如果之前沒用聲明過。

運行階段 -- 運行時引擎會在作用中查找該變量，如果能夠找到就會對它賦值（LHS查詢。

作用域

作用域是一套規則，用于確定在何處以及如何查找變量。

如果查找的目的是對變量賦值，那么就會使用 LHS 查詢。

如果查找的目的是獲取變量的值，那么就會使用 RHS 查詢。

無論函數在哪里被調用，也無論它如何被調用，它的詞法作用域都只由函數被聲明時所處的位置決定。

閉包

當函數可以記住并訪問所在的詞法作用域，即使函數是在當前詞法作用域之外執行，這時就產生了閉包。

this

this 在任何情況下都不指向函數的詞法作用域。

在 JavaScript 中作用域確實和對象類似，可見的標識符都是它的屬性。

但是作用域“對象”無法通過 JavaScript 代碼訪問，它存在 JavaScript 引擎的內部。

this 是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數調用時的各種條件。

this 的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式。

當一個函數被調用時，會創建一個活動記錄（有時也稱為執行上下文）。

這個記錄會包含函數在哪里被調用（調用棧），函數的調用方法，傳入的參數等信息。this 就是記錄其中的一個屬性，會在函數執行的過程中用到。

this 實際上是在函數被調用時發生的綁定，它指向什么完全取決于函數在哪里被調用。

調用棧 — 就是為了到達當前執行位置所調用到的所用函數。

bind()

會返回一個硬編碼的新函數，它會把參數設置為 this 的上下文并調用原始函數。

new 操作符

使用 new 來調用函數時，會自動執行下面的操作：

創建一個新的空對象；

這個對象會被執行[[原型]]連接；

這個新對象會綁定到函數調用的 this；

如果函數沒用返回其他對象，那么 new 表達式中的函數調用會自動返回這個新對象。

判斷 this

可以根據下面的順序來進行判斷：

函數是否在 new 中調用（new綁定）如果是的話，this 是綁定的是新創建的對象。

var bar = new foo();

函數是否是通過 call apply （顯示綁定）或者硬綁定調用，如果是的話，this綁定的是指定的對象。

var bar = foo.call(obj2);

函數是否在某個上下文對象中調用（隱式調用），如果是的話，this綁定的是那個上下文對象。

var bar = obj.foo();

若果都不是的話，使用默認綁定，如果在嚴格模式下，就綁定到 undefined，否則綁定到全局對象上。

var bar = foo();

ES6 新增可計算屬性名

var prefix = "foo";
var myObject = {
  [prefix + "bar"]: "hello",
  [prefix + "baz"]: "world" 
}

myObject["foobar"]; // hello

myObject["foobaz"]; // world

in / hasOwnProperty() -- 判斷某個對象是否存在某個屬性

in 操作符會檢查屬性是否在對象及其 [[Prototype]] 原型鏈中。

hasOwnProperty() 只會檢查屬性是否在 myObject 對象中，不會檢查 [[Prototype]] 鏈。

forEach() / every() / sone() -- 歷數組的值

forEach() 會遍歷數組中的所有值并忽略回調函數的返回值（忽略返回值）。

every() 方法測試數組的所有元素是否都通過了指定函數的測試（返回值是false終止）。

some() 方法測試是否至少有一個元素通過由提供的函數實現的測試（返回值是true終止）。

for...in -- 遍歷數組下標/對象可枚舉屬性

不保證 key 順序。

for...of -- 遍歷可迭代對象的值

在可迭代對象上（包括 Array，Map，Set，String，TypedArray，arguments
對象等）上創建一個迭代循環，調用自定義迭代鉤子自定義的 @@iterator 對象，并為每個不同屬性的值執行語句。

var randoms = {?        
    [Symbol.iterator]: function() { 
        return {?                
            next: function() {
                return { 
                    value: Math.random() 
                }; 
            } 
        };
    } 
}; 
var randoms_pool = []; 
for (var n of randoms) { 
    randoms_pool.push( n );
    // 防止無限運行! 
    if (randoms_pool.length === 100) break; 
}

類的繼承和多態

多態并不表示子類和父類有關聯，子類得到的只是父類的一份副本，類的繼承其實就是復制。

屬性的設置和屏蔽

var myObject = {};
  
myObject.foo = "bar";

如果 myObject 對象中包含名為 foo 的普通數據訪問屬性，這條賦值語句只會修改已有的屬性值。

如果 foo 不是直接存在于 myObject 中，[[Prototype]] 鏈就會被遍歷，類似 [[Get]] 操作。

如果原型鏈上找不到 foo，foo 就會被直接添加到 myObject 上。

然而，如果 foo 存在于原型鏈上層，賦值語句 myObject.foo = "bar" 的行為就會有些不同 (而且可能很出人意料)。

如果屬性名 foo 既出現在 myObject 中也出現在 myObject 的 [[Prototype]] 鏈上層，那么就會發生屏蔽。

myObject 中包含的 foo 屬性會屏蔽原型鏈上層的所有 foo 屬性，因為 myObject.foo 總是會選擇原型鏈中最底層的
foo 屬性。

轉載請注明出處，如果想要了解更多，請搜索微信公眾號：webinfoq。

GPU云服務器云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

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

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

你不知道的h5

摘要：目前，常用的模塊規范主要有兩種和。攔截全局請求一直接引入腳本攔截需要的回調或函數。深刻知道一個良好的命名規范的重要性，同時在項目中也會遇到一些命名的瓶頸。基于 Three.js 的超快的 3D 開發框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應用 3D 開發框架。它為普通的 Three.js 任務提供封裝、使搭建環境、...

IntMain 2019-08-21 17:57 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

dailybird 2019-08-01 18:28 評論0 收藏0
2017文章總結

摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅高性能滾動 scroll 及頁面渲染優化理論 | HTML寫法...

hellowoody 2019-08-22 14:02 評論0 收藏0