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

資訊專欄INFORMATION COLUMN

ES6入門之let、cont

wwq0327 / 609人閱讀

摘要:凡是在聲明之前就使用這些變量,就會報錯。這在語法上,稱為暫時性死區,簡稱。同樣也不會聲明提升,也存在暫時死區,只能在聲明之后使用,且和一樣不得重復聲明,不能重新賦值。全局環境中,會返回頂層對象。

一、前提
解決ES5中只有全局作用域和函數作用域,沒有塊級作用域而帶來的不合理的場景。
let
基本用法

用法和var 一樣,只是let聲明的變量只有在let命令所在的代碼塊有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

可以看出var 聲明的變量在代碼塊之外也是可以調用,而let聲明的則調用報錯。所以let 聲明只在它聲明的當前代碼塊中才能調用。

變量提升

在使用 var 的時候會出現 “變量提升”的現象,即變量可以在聲明之前使用,值為undefined。let 改變了這種現狀,但是必須先聲明在使用,如果在聲明之前使用則會出現報錯。如下:

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
暫時性死區

只要塊級作用域內部存在 let 或者 const 命令,它所聲明的變量就“綁定”在這個區域,不會受外部影響。且暫時性死區的本質就是,只要一進入當前作用域,所要使用的變量就已經存在了,但是不可獲取,只有等到聲明變量的那一行代碼出現,才可以獲取和使用該變量。如下:

var tmp = 123;

if (true) {
  tmp = "abc"; // ReferenceError
  let tmp;
}

ES6 明確規定,如果區塊中存在 letconst 命令,這個區塊對這些命令聲明的變量,從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量,就會報錯。

總之,在代碼塊內,使用let命令聲明變量之前,該變量都是不可用的。這在語法上,稱為“暫時性死區”(temporal dead zone,簡稱 TDZ)。如下:

if (true) {
  // TDZ開始
  tmp = "abc"; // ReferenceError
  console.log(tmp); // ReferenceError

  let tmp; // TDZ結束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}
注意:

++使用let聲明變量時,只要變量在還沒有聲明完成前使用,就會報錯。上面這行就屬于這個情況,在變量x的聲明語句還沒有執行完成前,就去取x的值,導致報錯”x 未定義“。++

不允許重復聲明

let 不允許在同一個作用域內聲明同一個變量,如下:

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

或者如下:

function func(arg) {
  let arg;
}
func() // 報錯

function func(arg) {
  {
    let arg;
  }
}
func() // 不報錯
塊級作用域

上面也提到過在es5中沒有塊級作用域的概念,只有函數作用域和全局作用域,那么就帶來了一些問題,如下:

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";
  }
}

f(); // undefined


外層聲明被內層聲明所覆蓋,內層使用的是外層的聲明,內層變量提升導致 undefinded
第二種:計數循環全局泄露,如下:
var s = "hello";

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

常見的面試題,最后輸出不是預料中的 1 2 3 4 5   而全部是 5
ES6的塊級作用域,實際上就是let 新增的,如下:
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

內外層的 n 互不干擾
ES6中 允許作用域任意嵌套,并且互不干擾,如下:
內外層可以同名

{{{{
  let insane = "Hello World";
  {let insane = "Hello World"}
}}}};

或者

{{{{
  {let insane = "Hello World"}
  console.log(insane); // 報錯
}}}};

塊級作用域的出現可以讓以下立即執行函數的寫法不必要,如下:

// IIFE 寫法
(function () {
  var tmp = ...;
  ...
}());

// 塊級作用域寫法
{
  let tmp = ...;
  ...
}
塊級作用域和函數聲明

在ES5中,函數只能在頂層作用域和函數作用域中聲明,不能在塊級作用域中聲明,但是瀏覽器為了兼容性,還是可以在塊級作用域中聲明,理論上在ES6中 塊級作用域中聲明的函數,在外部調用會報錯,考慮環境的問題,應當避免在塊級作用域中聲明函數,如果需要也應當寫成函數表達式的方式,而不是函數聲明語句,如下:

// 函數聲明語句
{
  let a = "secret";
  function f() {
    return a;
  }
}

// 函數表達式
{
  let a = "secret";
  let f = function () {
    return a;
  };
}
const

const聲明的是一個常量 如下:

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

聲明之后如果在賦值,將會報錯,同時因為聲明的是常量,即const聲明后即要賦值不然也會報錯

const 和 let 相同,聲明也只在當前的塊級作用域生效。同樣也不會聲明提升,也存在暫時死區,只能在聲明之后使用,且和 let 一樣不得重復聲明,不能重新賦值。

重要:

const 所不能改變的并不是值,而是變量指向的那個內存地址所保存的值不能變動,對于簡單類型(數值、字符串、布爾值),值就保存在變量所指向的內存地址中,因此等同于常量。而對于復合類型(數組、對象),變量指向的內存地址,保存的只是一個指向實際數據的指針,const 只能保證這個指針是固定的(即總指向一個固定的地址)。至于它指向的數據結構則是不能控制的 ,如下:

const foo = {};

// 為 foo 添加一個屬性,可以成功
foo.prop = 123;
foo.prop // 123

// 將 foo 指向另一個對象,就會報錯
foo = {}; // TypeError: "foo" is read-only

常量foo儲存的是一個地址,這個地址指向一個對象。不可變的只是這個地址,
即不能把foo指向另一個地址,但對象本身是可變的,所以依然可以為其添加新屬性。

或者

const a = [];
a.push("Hello"); // 可執行
a.length = 0;    // 可執行
a = ["Dave"];    // 報錯

常量a是一個數組,這個數組本身是可寫的,但是如果將另一個數組賦值給a,就會報錯
如果真的想將聲明對象凍結,不能在改變 則應該使用object.freeze()
const foo = Object.freeze({});

// 常規模式時,下面一行不起作用;
// 嚴格模式時,該行會報錯
foo.prop = 123;

對象也可以凍結

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === "object" ) {
      constantize( obj[key] );
    }
  });
};
ES6 聲明變量的六種方法
1. function
2. var
3. let
4. const
5. import 
6. class
頂層對象的屬性

在瀏覽器環境指的是window對象,在 Node 指的是global對象,ES5 之中,頂層對象的屬性與全局變量是等價的。

window.a = 1;
a // 1

a = 2;
window.a // 2
global 對象

ES5 的頂層對象,本身也是一個問題,因為它在各種實現里面是不統一的。

瀏覽器里面,頂層對象是window,但 Node 和 Web Worker 沒有window。

瀏覽器和 Web Worker 里面,self也指向頂層對象,但是 Node 沒有self。

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

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

全局環境中,this會返回頂層對象。但是,Node 模塊和 ES6 模塊中,this返回的是當前模塊。

函數里面的this,如果函數不是作為對象的方法運行,而是單純作為函數運行,this會指向頂層對象。但是,嚴格模式下,這時this會返回undefined。

不管是嚴格模式,還是普通模式,new Function("return this")(),總是會返回全局對象。但是,如果瀏覽器用了 CSP(Content Security Policy,內容安全策略),那么eval、new Function這些方法都可能無法使用。

歡迎關注 公眾號【前端開發小白】

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

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

相關文章

  • ES6入門對象的擴展

    摘要:循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組,包含對象自身的所有屬性的鍵名。目前,只有對象方法的簡寫法可以讓引擎確認,定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量和函數,作為對象的屬性和方法,使得代碼的書寫更為簡潔。...

    RiverLi 評論0 收藏0
  • ES6入門對象的擴展

    摘要:屬性的簡潔表示法在中允許直接寫入變量和函數,作為對象的屬性和方法,使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組,包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法 在ES6中 允許直接寫入變量...

    AWang 評論0 收藏0
  • ES6入門變量的解構賦值

    摘要:數組的解構賦值基本用法允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為結構。如下以上都會報錯但是如果左邊為數組,右邊為字符串,將會取字符串的第一個下標的值對于結構,同樣可以使用數組的解構賦值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 數組的解構賦值 基本用法 ES6 允許按照一定模式...

    gityuan 評論0 收藏0
  • ES6入門函數的擴展

    摘要:如果所有函數都是尾調用,那么完全可以做到每次執行時,調用幀只有一項,這將大大節省內存。等同于等同于注意,只有不再用到外層函數的內部變量,內層函數的調用幀才會取代外層函數的調用幀,否則就無法進行尾調用優化。 showImg(https://segmentfault.com/img/bVbrTHp?w=1080&h=1920); 1. 函數參數的默認值 1.1 用法 在ES6之前是不能為...

    dackel 評論0 收藏0

發表評論

0條評論

wwq0327

|高級講師

TA的文章

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