JavaScript相关概念2

const let var 有什么区别

var

在 ES5 中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量

注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象

var a = 10;
console.log(window.a); // 10

使用var声明的变量存在变量提升的情况

console.log(a); // undefined
var a = 20;

在编译阶段，编译器会将其变成以下执行

var a;
console.log(a);
a = 20;

使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明

var a = 20;
var a = 30;
console.log(a); // 30

在函数中使用var声明变量时候，该变量是局部的

var a = 20;
function change() {
  var a = 30;
}
change();
console.log(a); // 20

而如果在函数内不使用var，该变量是全局的

var a = 20;
function change() {
  a = 30;
}
change();
console.log(a); // 30

let

let是ES6新增的命令，用来声明变量

用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效

{
  let a = 20;
}
​
console.log(a); // ReferenceError: a is not defined.

不存在变量提升

console.log(a); // 报错ReferenceError
let a = 2;

这表示在声明它之前，变量a是不存在的，这时如果用到它，就会抛出一个错误

只要块级作用域内存在let命令，这个区域就不再受外部影响

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let a;
}

使用let声明变量前，该变量都不可用，也就是大家常说的“暂时性死区”

最后，let不允许在相同作用域中重复声明

let a = 20;
let a = 30;
// Uncaught SyntaxError: Identifier 'a' has already been declared

注意的是相同作用域，下面这种情况是不会报错的

let a = 20;
{
  let a = 30;
}

因此，我们不能在函数内部重新声明参数

function func(arg) {
  let arg;
}
func();
// Uncaught SyntaxError: Identifier 'arg' has already been declared

const

const声明一个只读的常量，一旦声明，常量的值就不能改变

const a = 1;
a = 3;
// TypeError: Assignment to constant variable.

这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

const a;
​
// SyntaxError: Missing initializer in const declaration

如果之前用var或let声明过变量，再用const声明同样会报错

var a = 20;
let b = 20;
const a = 30;
const b = 30;
// 都会报错

const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动

对于简单类型的数据，值就保存在变量指向的那个内存地址，因此等同于常量

对于复杂类型的数据，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，并不能确保改变量的结构不变

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop; // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

其它情况，const与let一致

区别

var、let、const三者区别可以围绕下面五点展开：

• 变量提升

• 暂时性死区

• 块级作用域

• 重复声明

• 修改声明的变量

• 使用

变量提升

var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

// var
console.log(a); // undefined
var a = 10;
// let
console.log(b); // Cannot access 'b' before initialization
let b = 10;
// const
console.log(c); // Cannot access 'c' before initialization
const c = 10;

暂时性死区

var不存在暂时性死区

let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

// var
console.log(a); // undefined
var a = 10;
// let
console.log(b); // Cannot access 'b' before initialization
let b = 10;
// const
console.log(c); // Cannot access 'c' before initialization
const c = 10;

块级作用域

var不存在块级作用域

let和const存在块级作用域

// var
{
  var a = 20;
}
console.log(a); // 20
// let
{
  let b = 20;
}
console.log(b); // Uncaught ReferenceError: b is not defined
// const
{
  const c = 20;
}
console.log(c); // Uncaught ReferenceError: c is not defined

重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10;
var a = 20; // 20
// let
let b = 10;
let b = 20; // Identifier 'b' has already been declared
// const
const c = 10;
const c = 20; // Identifier 'c' has already been declared

修改声明的变量

var和let可以

const声明一个只读的常量。一旦声明，常量的值就不能改变

// var
var a = 10;
a = 20;
console.log(a); // 20
//let
let b = 10;
b = 20;
console.log(b); // 20
// const
const c = 10;
c = 20;
console.log(c); // Uncaught TypeError: Assignment to constant variable

使用

能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

闭包

什么是闭包？

MDN 的官方解释：

闭包是函数和声明该函数的词法环境的组合

更通俗一点的解释是：

内层函数, 引用外层变量, 就可以形成闭包

需求: 定义一个计数器方法, 每次执行一次函数, 就调用一次进行计数

let count = 0;
function fn() {
  count++;
  console.log('fn函数被调用了' + count + '次');
}
fn();

这样不好! count 定义成了全局变量, 太容易被别人修改了, 我们可以利用闭包解决

闭包实例:

function fn() {
  let count = 0;
​
  function add() {
    count++;
    console.log('fn函数被调用了' + count + '次');
  }
​
  return add;
}
const addFn = fn();
addFn();
addFn();
addFn();

闭包的主要作用是什么？

在实际开发中，闭包最大的作用就是用来 变量私有。

下面再来看一个简单示例：

function Person() {
  // 以 let 声明一个局部变量，而不是 this.name
  // this.name = 'zs'     =>  p.name
  let name = 'hm_programmer'; // 数据私有
​
  this.getName = function () {
    return name;
  };
​
  this.setName = function (value) {
    name = value;
  };
}
​
// new:
// 1. 创建一个新的对象
// 2. 让构造函数的this指向这个新对象
// 3. 执行构造函数
// 4. 返回实例
const p = new Person();
console.log(p.getName()); // hm_programmer
​
p.setName('Tom');
console.log(p.getName()); // Tom
​
p.name; // 访问不到 name 变量：undefined

在此示例中，变量 name 只能通过 Person 的实例方法进行访问，外部不能直接通过实例进行访问，形成了一个私有变量。

JavaScript 作用域链

作用域 scope

是一个用来限定代码中的变量（包括函数和对象）的能否被访问的区域

如

function func() {
  let msg = '你好 前端新人';
  console.log(msg); // 可以访问
}
​
func();
console.log(msg); // 不能访问

其中，es6 之前是不存在块级作用域的，只有全局作用域和函数作用域

1. 块级作用域（es6）

   {
     let msg = '你好'; // 块级作用 域
   }
   {
     let msg = '你不好'; // 块级作用 域
   }

2. 函数作用域

   function func1() {
     let msg = '你好 前端新人'; // 函数作用域
   }
   ​
   function func2() {
     let msg = '你好 前端新人'; // 函数作用域
   }

3. 全局作用域

   let msg = '你好'; // 全局作用域
   function func1() {
     let msg = '你好 前端新人';
   }

作用域链

当代码想要访问某个变量，会优先在自身的作用域中寻找，如果找不到，就会一层一层的往外部寻找，这一层层的关系，就叫做作用域链。

{
  let num = 1;
  {
    let num = 2;
    {
      let num = 3;
      {
        console.log(num); // 3
      }
    }
  }
}

作用域与执行上下文(JavaScript 高级教程)

作用域 （scope） 和 执行上下文 （context）经常会被小伙伴搞混。

JavaScript 执行过程分成两个阶段。

• 解析

• 执行

作用域是在解析阶段就确定的,也称之为静态作用域

let num = 20;
function func() {
  console.log(num);
}
​
(function () {
  let num = 100;
  func(); // 输出20
})();

而执行上下文时在执行阶段确定的。 如 this 的指向

const obj = {
  name: '悟空',
  say() {
    console.log(this.name);
  },
};
​
const newObj = {
  name: '八戒',
};
​
obj.say(); // 悟空
obj.say.call(newObj); // 八戒