es6學習筆記-頂層對象_v1.0_byKL

Meils 發布于2019-08-21 11:31 / 1086人閱讀

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰

es6學習筆記-頂層對象_v1.0

(雖然是筆記,但是基本是抄了一次ruan大師的文章了)

頂層對象

頂層對象，在瀏覽器環境指的是window對象，在Node指的是global對象。

ES5之中，頂層對象的屬性與全局變量是等價的。

ES6為了改變這一點:

var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；

let命令、const命令、class命令聲明的全局變量，不屬于頂層對象的屬性

global對象

瀏覽器里面，頂層對象是window，

但 Node 和 Web Worker 沒有window。

瀏覽器和 Web Worker 里面，self也指向頂層對象

但是Node沒有self,Node 里面，頂層對象是global，但其他環境都不支持。

同一段代碼為了能夠在各種環境，都能取到頂層對象，現在一般是使用this變量，但是有局限性(如下):

全局環境中，this會返回頂層對象。但是，Node模塊和ES6模塊中，this返回的是當前模塊。(所以在node命令行下解析es6代碼,this指向并不是全局對象)

函數里面的this，如果函數不是作為對象的方法運行，而是單純作為函數運行，this會指向頂層對象。但是，嚴格模式下，這時this會返回undefined。不管是嚴格模式，還是普通模式，new Function("return this")()，總是會返回全局對象。

如果瀏覽器用了CSP（Content Security Policy，內容安全政策），那么eval、new Function這些方法都可能無法使用。

// 方法一
(typeof window !== "undefined" 
   ? window
   : (typeof process === "object" &&
      typeof require === "function" &&
      typeof global === "object")
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== "undefined") { return self; }
  if (typeof window !== "undefined") { return window; }
  if (typeof global !== "undefined") { return global; }
  throw new Error("unable to locate global object");
};

typeof process === "object" && typeof require === "function" && typeof global === "object"如果為true，且不存在window對象時可以認為在node環境中，node的全局對象就是global等價于瀏覽器中的window對象。這個是node的定義,參考node官方

self(window.self) 返回window的只讀引用，即為一個頂層對象，所以typeof self !== "undefined"時，可以認為在瀏覽器環境下獲取到了頂層對象的一個只讀引用

typeof global !== "undefined"這個就是獲取的node環境下的頂層對象，觀察這兩個函數，其作用都是獲取頂層對象，一般來說js較多用到的地方是瀏覽器端(前端)和node端(后臺)，

參考segmentfault

加入墊片庫來實現global對象

在語言標準的層面，引入global作為頂層對象。也就是說，在所有環境下，global都是存在的，都可以從它拿到頂層對象。

墊片庫system.global模擬了這個提案，可以在所有環境拿到global。

// CommonJS的寫法
require("system.global/shim")();

// ES6模塊的寫法
import shim from "system.global/shim"; shim();
上面代碼可以保證各種環境里面，global對象都是存在的。


// CommonJS的寫法
var global = require("system.global")();

// ES6模塊的寫法
import getGlobal from "system.global";
const global = getGlobal();
上面代碼將頂層對象放入變量global。

參考引用:

es6-頂層對象

es實戰2015

GPU云服務器云服務器 _byKL linux全能運行環境 v1.0 云服務器管理系統v1.0 學習筆記

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

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

es6學習筆記-let,const和塊級作用域_v1.0_byKL

摘要：考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。函數聲明語句函數表達式循環循環還有一個特別之處，就是循環語句部分是一個父作用域，而循環體內部是一個單獨的子作用域。聲明一個只讀的常量。 es6學習筆記-let,const和塊級作用域_v1.0 塊級作用域 javascript 原來是沒有塊級作用域的,只有全局作用域和函數作用域例子1 因為沒有塊級作用域,所以每次的i都是一...

Youngdze 2019-08-20 14:49 評論0 收藏0
es6學習筆記-箭頭函數_v1.0_byKL

摘要：因為箭頭函數本身沒有所以不可以當作構造函數，也就是說，不可以使用命令，否則會拋出一個錯誤。箭頭函數不可以使用對象，該對象在函數體內不存在。 es6學習筆記-箭頭函數_v1.0 箭頭函數使用方法 var f = v => v; //普通函數配合箭頭函數寫法,這里并且是傳參的 //相當于 var f = function(v) { return v; }; /*-----------...

lushan 2019-08-20 14:47 評論0 收藏0
es6學習筆記-數值的擴展_V1.0_byKL

摘要：學習筆記數值的擴展有一些不常用或者還不支持的就沒有記錄了總體來說本篇只是一個備忘而已用來檢查一個數值是否為有限的。兩個新方法只對數值有效，非數值一律返回。參考引用數值擴展 es6學習筆記-數值的擴展有一些不常用或者還不支持的就沒有記錄了,總體來說本篇只是一個備忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用來檢查一個數值...

宋華 2019-08-20 15:06 評論0 收藏0
es6學習筆記-函數擴展_v1.0_byKL

摘要：學習筆記函數擴展函數參數的默認值如果參數默認值是變量，那么參數就不是傳值的，而是每次都重新計算默認值表達式的值。屬性函數的屬性，返回該函數的函數名。箭頭函數詳細鏈接參考引用函數擴展 es6學習筆記-函數擴展_v1.0 函數參數的默認值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = ne...

yuanzhanghu 2019-08-20 15:16 評論0 收藏0
es6學習筆記-字符串的擴展_v1.0_byKL

摘要：學習筆記字符串的擴展字符的表示法允許使用的形式表示一個字符，但在之前，單個碼點僅支持到，超出該范圍的必須用雙字節形式表示，否則會解析錯誤。返回布爾值，表示參數字符串是否在源字符串的頭部。，是引入了字符串補全長度的功能。 es6學習筆記-字符串的擴展_v1.0 字符的Unicode表示法 JavaScript 允許使用uxxxx的形式表示一個字符，但在 ES6 之前，單個碼點僅支持u00...

JaysonWang 2019-08-21 11:36 評論0 收藏0