-
前言
- 0. 前端工具
- 1. html
- 2. CSS
-
3. JavaScript 基础
-
3.1 JS简介
-
3.2 变量
-
3.3 变量的强制类型转换
-
3.4 运算符
-
3.5 流程控制语句:选择结构(if和switch)
-
3.6 流程控制语句:循环结构(for和while)
-
3.7 对象简介和对象的基本操作
-
3.8 基本数据类型vs引用数据类型
-
3.9 函数
-
3.10 作用域
-
3.11 this
-
3.12 对象的创建&构造函数
-
3.13 原型对象
-
3.14 数组简介
-
3.15 数组的四个基本方法&数组的遍历
-
3.16 数组的常见方法
-
3.17 数组的其他方法
-
3.18 内置对象:Date
-
3.19 内置对象(其他)
-
3.20 DOM操作
-
3.21 事件对象Event和冒泡
-
3.22 事件委托
-
3.23 BOM的常见内置方法和内置对象
-
3.24 原型链
-
3.25 常见代码解读
-
3.1 JS简介
- 4. JavaScript进阶
- 5. 前端基本功:CSS、DOM练习和 Javascript 特效
- 6. jQuery
- 7. HTML5和CSS3
- 8. 移动web开发
- 9. Ajax
- 10. Node.js和模块化
- 11. ES6
- 12. Vue基础
- 13. React基础
-
14. 前端面试
-
14.1 准备
-
14.2 页面布局
-
14.3 CSS盒模型及BFC
-
14.4 DOM事件的总结
-
14.5 HTTP协议
-
14.6 创建对象和原型链
-
14.7 面向对象:类的定义和继承的几种方式
-
14.8 跨域通信类
-
14.9 安全问题:CSRF和XSS
-
14.10 算法问题
-
14.11 浏览器渲染机制
-
14.12 js运行机制:异步和单线程
-
14.13 页面性能优化
-
14.14 前端错误监控
-
14.15 JavaScript高级面试:前言
-
14.16 模块化的使用和编译环境
-
14.17 ES6
-
14.18 虚拟DOM
-
14.19 MVVM
-
14.20 面试题整理
-
14.21 网友面经
-
14.22 面试技巧
-
14.23 推荐文章
-
14.24 计算机网络
-
14.25 web安全
-
14.26 其他
-
14.1 准备
- 15. 面试题积累
- 16. 前端进阶
- 17. 前端综合
- 18. 推荐链接
变量提升
先说三句总结性的话:
let 的「创建」过程被提升了,但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。
变量提升的规律
在进入一个执行上下文后,先把 var 和 function 声明的变量前置,再去顺序执行代码。
PS:作用域分为全局作用域和函数作用域,用var声明的变量,只在自己所在的所用域有效。
我们举例来看看下面的代码。
代码 1:
console.log(fn);
var fn = 1;
function fn() {
}
console.log(fn);
copy
相当于:
var fn = undefined;
function fn() {
}
console.log(fn);
fn = 1;
console.log(fn);
copy
打印结果:
代码 2:
console.log(i);
for (var i = 0; i < 3; i++) {
console.log(i)
}
copy
相当于:
var i = undefined;
console.log(i);
for (i = 0; i < 3; i++) {
console.log(i);
}
copy
打印结果:
代码 3:
var a = 1;
function fn() {
a = 2;
console.log(a)
var a = 3;
console.log(a)
}
fn();
console.log(a);
copy
相当于:
var a = undefined;
function fn() {
var a
a = 2
console.log(a)
a = 3
console.log(a)
};
a = 1;
fn();
console.log(a);
copy
打印结果:
参考链接:https://github.com/jirengu/javascript-tutorial
声明时的重名问题
假设a
被声明为变量,紧接着a
又被声明为函数,原则是:声明会被覆盖(先来后到,就近原则)。
PS:
如果
a
已经有值,再用 var 声明是无效的。如果
a
已经有值,紧接着又被赋值,则赋值会被覆盖。
举例1:
var fn; //fn被声明为变量
function fn() {// fn被声明为function,就近原则
}
console.log(fn); //打印结果:function fn(){}
copy
举例2:
function fn() {} //fn被声明为function,且此时fn已经被赋值,这个值就是function的对象
var fn; //fn已经在上一行被声明且已经有值, 再 var 无效,并不会重置为 undefined
console.log(fn) //打印结果:function fn(){}
copy
既然再var无效,但是再function,是有效的:
function fn() {} //fn被声明为function,且此时fn已经有值,这个值就是function的对象
function fn() { //此时fn被重复赋值,会覆盖上一行的值
console.log('smyhvae');
}
console.log(fn)
copy
打印结果:
函数作用域中的变量提升(两点提醒)
提醒1:
在函数作用域也有声明提前的特性:
使用var关键字声明的变量,是在函数作用域内有效,而且会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
因此,在函数中,没有var声明的变量都会成为全局变量,而且并不会提前声明。
举例1:
var a = 1;
function foo() {
console.log(a);
a = 2; // 此处的a相当于window.a
}
foo();
console.log(a); //打印结果是2
copy
上方代码中,foo()的打印结果是1
。如果去掉第一行代码,打印结果是Uncaught ReferenceError: a is not defined
提醒2:定义形参就相当于在函数作用域中声明了变量。
function fun6(e) {
console.log(e);
}
fun6(); //打印结果为 undefined
fun6(123);//打印结果为123
copy
其他题目
20180321面试题:
var a = 1;
if (a > 0) {
console.log(a);
var a = 2;
}
console.log(a);
copy
打印结果:
1 2
copy
上方代码中,不存在块级作用域的概念。if语句中用var定义的变量,让然是全局变量。
顺便延伸一下,用let定义的变量,是在块级作用域内有效。
copy
copy
copy
copy
copy