ES6 —- 基本概念的使用

这是我参与更文挑战的第16天，活动详情查看： 更文挑战

前言

在此之前我们已介绍过ES6的Class类，Promise，新增方法等。感兴趣的话可以查看专栏。接下来补一下ES6的基本概念的使用和函数。

变量

let

概念 ES6新增声明变量的指令 let,它的用法类似与var，他是为了解决var在作用域方面出现的异常情况而新增使用词法作用域或块级作用域的变量

语法

let name = '小明' 
复制代码

let 与 var的区别

块级作用域变量获取,再循环中块级作用域会针对每一次迭代创建一个新的作用域

 for (var i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i) 
        },1000)
} 
/* 
输出结果 5 5 5 5 5 
var 的声明等价于,在循环的外部创建一个变量，循环内部计时器中的调用都是这这个全局变量
因为 js 先同步执行在异步执行，当setTimeout 被执行for循环已经结束了，
这时每个setTimeout引用都是全局变量i，所有打印都是5
var i = 0 
for ( i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i) 
        },1000)
} 
*/


 for (let i = 0; i < 5; i++) {
        setTimeout(function() {
            console.log(i) 
        },1000)
} 
/* 输出结果 0 1 2 3 4 
let 只在自身的作用域内有效
上面的for循环 其实等价于每次循环都在循环内创建了一个新的let i(i只属于代码块的内部)
内部setTimeout引入其对应作用域的i值 输出的值就是 0 1 2 3 4 
for(var j = 0;j < 5; j++) {
    let i = j
    setTimeout(function() {
        console.log(i) 
    },1000)
} 
*/
复制代码

块级作用域,拥有块级作用域的变量只能在当前当前代码块中使用。不能在外部访问。块级作用域还有一个特点他们不能在被声明之前读写,直到声明let变量的代码之前的区域都被成为暂时性死区

console.log(age)  // 正确, var 允许变量提前

var age = "小明"

console.log(name) // 错误, let 不允许变量提前

let name = "小明"
复制代码

重复声明,块级作用域变量不允许在同一个作用域下被重复声明

let name = "小明"
let name = "小华"   // 错误,同一个作用域下let变量不可以重复声明
var name = "小刚"   // 错误,同一个作用域下let变量也不可以使用var重复声明
复制代码

const

概念const是声明变量的另一种方式,它与let相似。但是const声明的变量被赋值后不能再改变。（我们可以理解为他是一个常量）,并且const声明的变量必须在声明时赋值。

const name = "小明"
      name = "小华" // 错误,const只允许赋值一次
console.log(name)

const age; // 错误 const必须在初始化时赋值
复制代码

注意

1. 基本数据类型存放在栈中,引用数据类型存放在堆中
   复制代码

2. 栈中的数据大小已知 
   复制代码

3. 栈中的数据由系统自动开辟自动释放 
   复制代码

4. 栈的赋值都是深拷贝(创建了新的内存空间)
   复制代码

5. 堆中的数据大小未知 
   复制代码

6. 堆中的数据由开发人员手动开辟手动释放 
   复制代码

7. 堆的赋值都是浅拷贝(引用同一段内存地址)
   复制代码

const person = {
    name: 18,
    age: 19
}

person.name = 1 // 正确,修改引用数据类型属性不会报错

console.log(person)
复制代码

因为引用数据类型声明的const 变量只是一段地址值,内部属性发生变化不会影响地址。所以即使是const声明的对象、数组依然可以修改他们的属性方法。本质上来说const并不能保证其值是不能改变，只能保证变量指向的那个内存地址不能改动。

顶层对象属性

全局变量指一般与window对象的属性（顶层对象属性）挂钩。ES6中使用let const可以声明作用在全局的变量。但是这些变量不是顶层对象的属性

const person = {
    name: 18,
    age: 19
}

console.log(window.person) // undefinded

var a = 6

console.log(window.a) // 6
复制代码

ES2020 globalThis

概念不同js环境下的全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）。

function canMakeHTTPRequest() {
  return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPRequest());
// expected output (in a browser): true
复制代码

• 在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。

• 在松散模式下，可以在函数中返回 this 来获取全局对象，但是在严格模式和模块环境下，this 会返回 undefined。 You can also use Function('return this')(), but environments that disable eval(), like CSP in browsers, prevent use of Function in this way.

• globalThis 提供了一个标准的方式来获取不同环境下的全局 this  对象（也就是全局对象自身）。不像 window 或者 self 这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 globalThis，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 this 就是 globalThis。