堆栈结构
执行上下文(运行环境)
运行环境规定函数中代码执行的顺序，JavaScript 引擎会以栈的方式来处理他们，在打开浏览器，存在JavaScript 的情况下，全局上下文首先入栈，在全局上下文环境下执行其中可执行的代码，在遇到可执行的函数时该函数会创建一个单独的执行上下文环境，（函数只有在被调用时才会执行新的上下文环境）该函数执行上下文入栈，运行该函数内的代码，在该函数内代码执行完毕后该函数上下文从栈中弹出，如果在函数中存在return能直接终止可执行代码的执行，因此直接将当前上下文弹出栈，而全局上下文会在浏览器关闭后出栈
预解析
对象部分
所有变量的声明，在函数内部第一行代码开始执行的时候就已经完成
执行上下文可以分为两个周期，创建阶段和代码执行阶段
在创建阶段执行上下文会分别创建变量对象、建立作用域链，以及确定this的指向
在代码执行阶段会完成变量赋值、函数引用，以及执行其他代码，在执行完毕后弹出栈，然后看是否会被其它函数引用，否则会等待被回收
变量对象的创建
- 创建arguments对象，检查当前上下文中的参数，建立该对象下的属性与属性值
- 检查当前上下文的函数声明（使用function关键字声明的函数），在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用，如果函数名的属性已经存在，那么该属性将会被新的引用覆盖
- 检查当前上下文中的变量声明（var），每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined，如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，会直接跳过，原属性值不会被修改
这里需要注意几个点，首先是变量对象的创建是在每一个函数的执行上下文环境中，也就是说全局的上下文执行环境中的变量和单独函数中的变量是在两个不同的执行上下文环境，不会相互影响，在局部函数中声明变量只会存在该函数的执行上下文环境中
第二是使用function声明的优先级会大于使用var声明的变量的优先级，预解析时会优先读取function声明，并且该值会覆盖之前使用var/function声明的同名变量/函数，然后再读取var声明的匿名函数/变量，但是如果存在同名的function声明，则会直接跳过，不会修改function的声明
console.log(a());//this's b
function a() {
return "this's a"
}
function a() {
return "this's b"
}
还有一点需要注意的是上面的规则只是变量对象的创建过程的规则，在执行过程中是不会受上面规则的影响的，只会依照声明的先后顺序来决定之后该变量的值
console.log(foo);//ƒ foo() {
//console.log("this's foo");
//}
function foo() {
console.log("this's foo");
}
var foo="foo";
console.log(foo);//foo
而全局变量对象，它的变量对象就是window对象，this的指向也是window对象
垃圾回收机制
JavaScript的垃圾回收机制中注意一点，局部变量会在上下文弹出栈时被垃圾回收机制回收，而全局变量则不确定什么时候会被回收，所以我们要谨慎使用全局变量，在确定全局变量不再被引用时手动将其赋值为null，让其进入垃圾回收，这样可以节省内存
作用域链
作用域链，由当前环境与上层环境的一系列变量对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问，JavaScript的作用域是由变量创建的位置决定的，而不是变量使用的位置，
作用域链保证了函数可以访问的数据有哪些，注意这个作用域链由函数定义的位置决定，而不是由函数使用时的位置决定，闭包也是一样，闭包在被创建后在即使在其它位置使用但其作用域链还是原先创建闭包时所形成的作用域链
var fn = null;
function foo() {
var a = 2;
function innnerFoo() {
console.log(c); // 在这里，试图访问函数bar中的c变量，会抛出错误
console.log(a);
}
fn = innnerFoo; // 将 innnerFoo的引用，赋值给全局变量中的fn
}
function bar() {
var c = 100;
fn(); // 此处的保留的innerFoo的引用
}
foo();//先执行foo，为fn赋值，也就是将fn由变量对象转化为活动对象
bar();
var name = "stephenchan";
function callMePlz() {
console.log(name);
}
function myFunc() {
var name = "endlesscode";
callMePlz();
}
myFunc();//stephenchan
在记住上面的前提下，我们再深入谈一下作用域链，在JavaScript中，万物皆对象，虽然在某些时候这个说话并不准确，但说函数是一个对象这是没有问题的，函数对象和其他对象一样，拥有可以通过代码访问的属性和一系列JavaScript引擎自身的内部属性，其中一个内部属性是[scope]，这个属性是JavaScript提供的，该属性包含了函数被创建的作用中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能够被函数访问
当一个函数被创建后，它的作用域链会被创建该函数的作用域中可访问的数据对象填充，我们举一个栗子
function add(num1,num2){
var sum=num1+num2;
return sum;
}
在函数add创建时，因为它是一个全局对象中的函数，按照我们上面的说法，它的作用域链会被全局对象中可访问的对象填充，这些可访问的对象包括window等JavaScript本身定义的属性/方法，也包括我们自己在代码中定义的全局对象/方法（下图只是一部分全局变量）
当我们在函数add执行时
var total=add(5,10)
然后在执行函数时，在遇到每一变量时都会给变量一个标识符，用于识别该变量，但为了便于理解，这里我们就跳过这个概念，会读取add函数的所有局部变量，命名参数，参数集合以及this，将它们共同组成一个新的对象，叫"活动对象(activation object)"，该对象将被推入到作用域链的前端，当上下文环境被销毁，活动对象也就会随之销毁
执行函数add时作用域链如下
在函数执行过程中，每次遇到一个变量，都会从作用域链头部也就是活动对象开始搜索，如果在活动对象内存在同名变量，那么就使用该变量，如果没有找到那么会继续向作用域链下一个对象中查找，如果都没有，则认为该标识符未定义
所以，这也解释了JavaScript中函数会有块的作用域，外界访问不到，而子作用域中可以访问父作用域中定义的变量，但是父作用域不能访问子作用域中的变量，因为自作用域在作用域链上存在父作用域的对象，在查找变量时如果在自作用域活动对象内查找不到会向下去找父作用域对象内是否存在同名的变量，但在父作用域内的作用域链上是不存在子函数的作用域链的，而全局对象的作用域链上时不存在我们自己定义的函数的对象的，所以我们在函数内定义的变量在外界是无法读取的
事件循环机制（任务队列）
JavaScript是单线程的，但是可以同时有多个任务队列
任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。
macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。
来自不同任务源的任务会进入到不同的任务队列。同源任务则会进入到同一个任务队列，其中setTimeout与setInterval是同源的
事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task，这样一直循环下去。
其中每一个任务的执行，无论是macro-task还是micro-task，都是借助函数调用栈来完成。
setTimeout作为任务分发器，将任务分发到对应的宏任务队列中。
Promise的then方法会将任务分发到对应的微任务队列中，但是它构造函数中的方法会直接执行
面向对象(补充)
in操作符的应用场景之一:in可以用来判断一个对象是否拥有某一个属性/方法，无论该属性/方法存在与实例对象还是原型对象，我们可以用这种特性来判断当前页面是否是在移动端打开
isMobile='ontouchsart in document'
关于new关键字到底在创建构造函数时做了什么，之前自己也有过总结，但是现在看到了大概的代码实现
var Person=function (name,age) {
this.name=name;
this.age=age;
this.getName=function () {
return this.name;
}
}
function New(fun){//接收构造函数为参数
var res={};//声明一个对象，该对象为最终的返回实例
if(fun.prototype !== null){
res.__proto__=fun.prototype;
//将声明对象的原型指向构造函数的原型
}
var ret=fun.apply(res,Array.prototype.slice.call(arguments,1));
//将构造函数内部的this指向实例对象res
if((typeof ret==="object" || typeof ret==="function")&&ret!==null){
return ret;
}
//如果我们在构造函数中指定了返回对象，那么new的执行结果就是返回值
return res;
//如果没有明确返回对象，则默认返回res，也就是实例对象
}
var p=New(Person,'tom',20);
this
在面试题中经常看到关于this的问题，今天恰好看到一篇关于this的文章，总结一下，用于日后装逼
在js中有三种函数的调用模式
- function（p1，p2）{ console.llog(this)}；
- iffn.str（p1，p2）；
- fn.call（context，p1，p2）；
之前我们常用的是第一种和第二种模式，但实际上只有我们要树立一个概念，只有第三种模式才是正常的调用模式，第一种和第二种的模式都可以转化为第三种模式
第一种可以转化为function.call（undefined，p1,p2）；
第二种模式可以转化为 fn.str.call（fn，p1，p2）；
第一种情况下this指向的是undefined，但是在js中规定，如果指向undefined，那么会将指针指向window
其实上面对this的解释比较好了，下面的点可以说时一点补充吧
this的指向时在函数被调用时所确定的
在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象。
var a = 20;
function fn() {
function foo() {
console.log(this.a);
}
foo();
}
fn();
还有一点时切记注意当前是否是严格模式，严格模式下直接调用没有被对象拥有的函数的this是会直接报错的，我们可以在严格模式和非严格模式下观察以下代码的输出结果
'use strict';
var a = 20;
function foo () {
var a = 1;
var obj = {
a: 10,
c: this.a + 20,
fn: function () {
return this.a;
}
}
return obj.c;
}
console.log(foo());
console.log(window.foo());
参考文章：[前端基础进阶系列]
