前端学习笔记！

做为一个前端新人，看了不少关于前端的博客，以为有必要去记录点知识点和本身的总结，因此在工做之余写了这篇文章，该博客有引用到其余文章的内容，纯属学习，在此膜拜一下各位前端大大。

一.声明定义

1. var es6以前的方法 用于定义变量

2. let es6的新语法 用于定义跨级做用域本地变量

3. const es6的新语法 用于定义常规变量(定义的变量不会被从新定义)

4. 申明了变量没有赋值打印出来是undefinded,没有申明变量打印出来为NULL
   5.未赋值的变量作计算，它的值为NAN

二.做用域

es6支持块级做用域，须要用es6的let属性来声明变量 例如if、setTimeout等等

if(true){
    var a = 1;
}
console.log(a); // 输出为1

当使用let时

if(true){
    let a = 1;
}
console.log(a); // a is not defined(…)

变量上浮：
javascript会自动将变量的声明上浮到函数或者全局的最前面，因此再代码执行前，变量的赋值就已经为undefined

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

//例如
var b = 5;
function work(){
   console.log(b);//undefinded
   var b = 4;
}
work();

三.数据类型

6种基础类型
1.Bollean(布尔值)
2.string(字符串)
3.undefined
4.null
5.Number
6.symbol(ES6新增)：
symbol是程序建立而且能够用做属性键的值，而且它能避免命名冲突的风险。symbol与其它类型并不彻底相像，symbol被建立后就不可变动，你不能为它设置属性（在严格模式下尝试设置属性会获得TypeError的错误）。他们能够用做属性名称，这些性质与字符串相似。另外一方面，每个symbol都独一无二，不与其它symbol等同，即便两者有相同的描述也不相等；你能够轻松地建立一个新的symbol。这些性质与对象相似。

一种对象类型:Object
对象和函数的区别在于前者是值的容器，后者是应用程序的过程

四.控制流和错误处理

1.块表达式
块表达式用于控制流，例如if、while、for
ES6以后有块域范围：在ES6中，咱们能够把块域声明var改为let，让变量只做用域block范围。
2.逻辑判断
判断为false的特殊值：false、undefined、null、0、NaN、”"。
简单boolean和对象Boolean类型有俩种区别 前者是Javascript的一种原始类型，它只有俩种值，true和false
使用Boolean(value)方法能够强制转换任意值为boolean类型

1. alert(Boolean('')); //outpt false   
2. alert(Boolean('hello')); //output true   
3. alert(Boolean(100)); //output true  
4. alert(Boolean(0)); //output false 
5. alert(Boolean(NaN)); //output false 
6. alert(Boolean(null)); //output false   
7. alert(Boolean(undefined)); //output false   
8. alert(Boolean(new Object())); //output true

五.内存空间

1.堆和栈
JavaScript没有严格的去区分栈内存和堆内存，通常它的全部数据都存取在堆内存里。
堆内存的存取方式能够比喻成书架放书，书柜里的书没有什么前后拿去顺序，能够哪区任何位置的书籍和放回到任何位置，比如在JSON格式的数据中，咱们存储的key-value是能够无序的，由于顺序的不一样并不影响咱们的使用，咱们只须要关心书的名字。
栈内存的存取方式就像一个兵乓球盒子，具备先进后出，后进先出的特色，存储原理如图。

2.变量对象
Javascript的执行上下文生成的时候，会建立一个叫作变量对象的特殊对象，Javascript的基础数据会保存在该变量对象里
3.引用数据类型与堆内存
JS的引用数据类型例如数组Array，它们的值是不肯定的，引用数据类型的值是保存在堆内存中的对象。Javascript不能直接访问堆内存空间，所以咱们不能直接操做堆内存空间中的变量。所以咱们在操做对象的时候实际上是在引用该堆内存的对象，变量对象里保存的只是来自堆内存空间对象的地址，该地址与实际的堆内存值相关联。

var a1 = 0;   // 变量对象
 var a2 = 'this is string'; // 变量对象
 var a3 = null; // 变量对象
 var b = { m: 20 }; // 变量b存在于变量对象中，{m: 20} 做为对象存在于堆内存中
 var c = [1, 2, 3]; // 变量c存在于变量对象中，[1, 2, 3] 做为对象存在于堆内存中

当咱们要访问堆内存的引用数据类型时，首先从变量对象中获取该对象的地址指针，再经过地址指针来获取堆内存的数据

// DEMO
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 这时m.a为15

六.执行上下文(Execution Context)

每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文能够理解为当前代码的执行环境，它会造成一个做用域。运行包括三种状况:
1.全局环境
2 函数环境
3 eval:
每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文能够理解为当前代码的执行环境，它会造成一个做用域。

var code1='"a" + 2'; //表达式 
varcode2='{a:2}'; //语句 
alert(eval(code1)); //->'a2' 
alert(eval(code2)); //->undefined 
alert(eval('(' + code2 + ')')); //->[object Object]

在一个javascript的程序执行时，会产生多个执行上下文，javascript会以堆栈的方式处理它们。
栈底为全局上下文，栈顶为当前上下文

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

上下文执行过程如图

上下文部分特色
1单线程
2同步执行，只有栈顶的上下文处于执行中，其余上下文须要等待
3全局上下文只有惟一的一个，它在浏览器关闭时出栈
4函数的执行上下文的个数没有限制
5每次某个函数被调用，就会有个新的执行上下文为其建立，即便是调用的自身函数，也是如此。
执行上下文-生命周期
1.建立阶段
在这个阶段中，执行上下文会分别建立变量对象，做用域链和this指向
2.代码执行阶段
建立完成，开始执行代码，完成变量赋值，函数引用，以及其余代码执行