前语

咱们将开启一个全新系列–ES6(ECMAScript 6)新特性! 开启咱们的征途吧!

随着ECMAScript 6(ES6)的推出,JavaScript迎来了一系列强大的言语特性,其中letconst关键字以及globalThis目标为咱们供给了愈加灵活和牢靠的编程东西。这些特性的引入旨在提高代码的可读性、可保护性,并处理一些在之前版本中存在的问题。让咱们一起学习了解这些功能。

正文

let指令

在ES6中新增了let指令,便利咱们声明目标,用法大体上与var类似,但又有不同!咱们运用let声明的变量有点类似c言语(包含其他强)中声明变量的办法,比如:要先声明再运用,只能在let地点的代码块运转等等。

咱们来看这个事例:

{
    let a = 2;
}
console.log(a);//输出:ReferenceError: a is not defined
console.log(b);//输出:ReferenceError: Cannot access 'b' before initialization
let b = 10;

在这一段代码里边,咱们把变量a单独放在一个代码块傍边,在这个代码块之外对他进行调用,咱们发现这样会直接抛出一个过错

同样的,咱们先运用再let声明变量b咱们发现这样也会直接抛出一个过错,以上比如都能让咱们发现letconst的两个特性!

  1. let声明的变量只在声明的代码块傍边发挥效果!
  2. let声明的变量必须先声明,再运用!

同时,假如咱们在for循环傍边又会发现一些新的东西!

咱们看看事例:

for(var i = 0;i<5;i++){
    setTimeout(()=>{
        console.log(i);
    },1000)
}
输出:
5
5
5
5
5

在这个事例傍边,咱们声明晰一个循环,在这个循环体傍边,咱们用了一个setTimeout定时器,规定一秒后输出for循环中的i值。

其实,在没有学习相关常识之前,咱们第一时间都会认为应该输出0,1,2,3,4这样的一个成果!其实不然,这与var存在的声明提高相关!相当于,这个i变量是一个大局的变量,在最终一次结束循环,i的值被赋成了5,最终,一切定时器输出的i就都获取这个i最终的赋值,也便是5

假如,咱们想要完成咱们所等待的值又该怎样操作呢?这个时分,let就应该发挥它的效果了!咱们来看看这个事例!

for(let i = 0;i<5;i++){
    setTimeout(()=>{
        console.log(i);
    },1000)
}
输出:
0
1
2
3
4

为什么把变量的声明办法改为let就会完成咱们等待的效果呢?

因为i是由let声明的,每次声明的i都只会在本轮循环中收效!每次循环i其实都是一个新的变量!那咱们的定时器,又是怎么保存获取它要输出的i值呢?就相当于,每次循环都会给循环体拓荒一个块级空间,每次循环都会有一个块级空间,而每个块级空间都是不同的,而每个空间都有它对应的i值。

let声明的变量不存在提高!

上面的事例,咱们提到了var的声明提高问题,即变量运用var声明的时分,能够先运用后声明,值为undefined,其实这很不契合咱们人类的正常思想!所以我的官方大大为了处理这种古怪的现象为咱们增加了let

console.log(a);//输出:undefined
var a = 1
console.log(b);//输出:ReferenceError: Cannot access 'b' before initialization
let b =2

也便是说,咱们用let声明的目标不能够通过先运用后声明,这样咱们的代码会直接抛出一个过错!

块级效果域

let关键字引入了块级效果域的概念,即变量只在声明它的块内部可见。在ES6之前,运用var声明的变量在整个函数内部都是可见的,这或许导致一些意料之外的情况产生

function fn() {
  if (true) {
    let a = 10;
    console.log(a); // 10 a在这个块级效果域内可见
  }
  console.log(a); // ReferenceError: a is not defined
}

let的块级效果域有效地处理了变量走漏和不同效果域之间的命名抵触问题,使得代码愈加清晰和可保护性增强!

不能够重复声明

let关键字声明的目标不允许重复声明!

let a = 1
let a = 2//编译器会直接报错!不允许从头声明块范围变量a
暂时性死区

只要在块级效果域存在let声明的变量,那么它所声明的变量就“绑定”在这个区域,不再受外部的影响!

在JavaScript中,let的设计者为了避免意外的行为,让变量在声明句子之前是不可拜访的。这个时间段就叫做“暂时性死区”,也便是变量似乎被卡在这个区域里,无法被拜访。

let b = 99;
if (true) {
  console.log(b); // 这儿也不可!会抛出ReferenceError: Cannot access 'b' before initialization
  let b = 100;
}

这儿b分明在if句子之前就定义了,为什么仍是不可呢?因为在console.log(b)这儿,let b的声明已经在这个效果域中存在了,可是它在console.log之前就被引用了,所以就掉入了“死区”。

其实关于死区还有许多常识,我们能够学习一下阮一峰老师的《ECMAScript 6 入门》的相关常识点!

const指令

在ES6中引入了一种新的声明办法const,咱们能够用它来声明一个只读变量!也便是常量,一旦声明,就不能再更改了!

咱们来看看这个事例:

const a = 4
a = 5
console.log(a);//输出:TypeError: Assignment to constant variable.

上述事例说明:常量一旦声明不能修正,因为,常量一旦声明就不能修正,所以咱们一旦声明就要里边初始化!

也便是说:

const str//咱们不初始化的话,编译器会立马报错:'const' declaration must be initialized

所以咱们在运用const的时分一定呀对其赋值!

当然,const效果域也和let相同,只在声明的块级的效果域发挥效果!

{
  const a = 5
}
console.log(a);//输出:ReferenceError: a is not defined

const指令声明的常量也不会提高,同样会存在暂时性死区,只能先声明后运用!同样的,const也不能重复声明,咱们一旦重复声明,咱们的编译器就会直接报错!

const实践上确保的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。关于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因而等同于常量。但关于复合类型的数据(首要是目标和数组),变量指向的内存地址,保存的仅仅一个指向实践数据的指针,const只能确保这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。

咱们能够来看看这个事例:

const obj = {}
obj.name ="小明"
console.log(obj);//输出:{ name: '小明' }

在这个事例傍边,obj是指向的是一个地址,也便是说咱们用const声明的变量obj的地址是不可更改的,也便是说,咱们不能让obj指向其他地址,可是目标本身仍是能够更改的,咱们能够为它增加属于自己的特点!

顶层目标

在JavaScript中,顶层目标是大局目标,具体的称号取决于履行环境。在浏览器中,顶层目标是 window 目标;在Node.js环境中,顶层目标是 global 目标。

ES6之前,运用 var 关键字声明的变量会成为顶层目标的特点。这意味着,假如你在浏览器环境中运用 var 声明一个变量,它就会成为 window 目标的特点。

var x = 42;
console.log(window.x); // 42(在浏览器环境中)

这种行为存在一些问题,因为它使得大局命名空间变得拥挤,容易产生命名抵触。

ES6引入了 letconst 关键字,并改变了这一行为。运用 letconst 声明的变量不再成为顶层目标的特点。

let y = 42;
console.log(window.y); // undefined(在浏览器环境中)

这样的改变有助于削减大局命名空间的污染,使得代码愈加模块化和可保护。假如你期望将变量显式地增加到顶层目标的特点中,能够运用 window(在浏览器环境中)或 global(在Node.js环境中)。

window.z = 42;
console.log(window.z); // 42(在浏览器环境中)

globalThis目标

在JavaScript中,存在一个顶层目标,它供给了大局环境,也便是代码运转的大局效果域。但是,这个顶层目标在不同的完成中并不统一。

在浏览器中,顶层目标是 window,但在 Node 和 Web Worker 中却没有 window。在浏览器和 Web Worker 中,self 也指向顶层目标,但在 Node 环境中却没有 self。而在 Node 中,顶层目标是 global,但其他环境并不支撑它。

为了在不同环境中都能获取到顶层目标,一般运用 this 关键字。但是,这种办法也有一些局限性。

在JavaScript中,为了在各种环境中都能获取到顶层目标,一般会运用 this 关键字。但是,这种办法存在一些局限性。

在大局环境中,this 会回来顶层目标,这一般契合预期。可是,在Node.js模块中,this 回来的是当前模块,而在ES6模块中,this 回来的是 undefined,这就引入了一些不一致性。

当函数作为目标的办法运转时,函数内部的 this 会指向该目标。可是,假如函数作为独立的函数运转,而不是目标的办法,this 会指向顶层目标。需求留意的是,在严厉形式下,这种情况下的 this 会回来 undefined,引入了一些额外的复杂性。

无论是在严厉形式仍是一般形式下,通过 new Function('return this')() 这种办法总是能够回来大局目标。可是需求留意的是,假如浏览器启用了 CSP(Content Security Policy,内容安全策略),那么 evalnew Function 这些办法或许会受到约束,无法正常运用。

综合来看,运用 this 关键字虽然是一种通用的获取顶层目标的办法,但在不同环境和运用场景下存在一些纤细的差异和约束。

好啦,咱们今天的学习就到这儿停止啦!接下来,我都会更新一系列有关ES6的文章,我们感兴趣能够重视我哦~

假如你有任何主意和意见欢迎我们谈论留言哦~

点个小小的赞鼓舞支撑一下吧!!!

引用参阅:ES6 入门教程 – ECMAScript 6入门 (ruanyifeng.com)

个人gitee库:MycodeSpace: 首要应用的库房,记录学习coding中的点点滴滴 (gitee.com)