前端知识总结--2 js部分

1。 JavaScript的『预解释』与『变量提升』

先看以下代码输出啥？

var a= 1;
function f() {
  console.log(a);
  var a = 2;
}
f();

首先答案是：undefined；

JavaScript在浏览器中运行的过程分为两个阶段预解释阶段、执行阶段；

1. 读取var a后,在当前作用域中查找是否有相同声明,如果没有就在当前作用域集合中创建一个名为a的变量,否则忽略此声明继续进行解析；
2. 接下来,V8引擎会处理a = 2的赋值操作,首先会询问当前作用域中是否有名为a的变量,如果有进行赋值,否则继续向上级作用域询问

所以该题目中：在函数fn的作用域中，首先提取变量声明：var a；因为该作用域中有对a的赋值，所以不会继续查找上级作用域。且在赋值前打印，所以是undefined；

类似的看下题：

var a= 1;
function f() {
  console.log(a);
}
f(); // 1

var a= 1;
function f() {
  console.log(a);
  var a;
}
f(); //undefined

函数声明与函数表达式

我们看到,在编译器处理阶段,除了被var声明的变量会有变量提升这一特性之外,函数也会产生这一特性,但是函数声明与函数表达式两种范式创建的函数却表现出不同的结果.

f();
g();
//函数声明
function f() {
    console.log('f');
}
//函数表达式
var g = function() {
    console.log('g');
};

//f

//报错：VM693:2 Uncaught TypeError: g is not a function

f() 好理解属于函数声明提升；但是对于函数表达式g，被赋予undefined，undefeated无法被执行而报错。

冲突处理

变量之间冲突

var a = 3;
var a = 4;
console.log(a); //4

函数冲突

f();
function f() {
    console.log('f');
}

function f () {
    console.log('g');
};
// g

3.函数与变量之间冲突

console.log(f);

function f() {
    console.log('f');
}
var f ='g';

ƒ f() {
console.log('f');
}

说明函数覆盖了变量；

类似的let，存在暂时性死区：

function f() {
  console.log(a);
  let a = 2;
}
f(); 

报错： //ReferenceError: a is not defined

这段代码直接报错显示未定义,let与const拥有类似的特性,阻止了变量提升,当代码执行到console.log(a)时,执行换将中a还从未被定义,因此产生了错误