前端基础

    前端，一个当初以为自己已经入门了的职业，天真以为会点html + CSS + Js，掌握基础的公司前端所用框架Vue的用法就可以了，但实习后才发现原来自己连前端的门是什么东西都不知道。

    前端开发—一个技术更新迭代迅速、需要学习东西最多的IT职业，而作为一个实习生，前端基础以及学习能力是最重要的。下面我们就聊一下这个月以来我对前端入门的一些总结，讲错的希望各路大神误喷（狗头）。

---

                                          预编译

    预编译—发生在函数执行的前一刻，它在函数执行时总得来说做了两件事：一函数声明整体提升；二变量 声明提升。那么预编译具体是做了什么事情呢？

    从整体页面来看，当script内代码块执行时，预编译做了三件事。

    第一件事情是创建GO（Global Object）对象,也就是我们熟悉的全局对象

    第二件事是查找变量声明作为GO属性，值赋予undefined

    第三件事是查找函数声明作为GO属性，如果属性名存在，直接把值赋予函数体。

    当我们调用一个函数时，在执行前一刻，预编译做了四件事情。

    第一件事情是生成一个AO（Actived Object）对象,也就是我们平时所说的函数作用域对象，保存函数调用时的局部变量。

    第二件事情是查找函数形参以及函数内部变量声明，形参名以及变量名作为AO对象的属性，值为undefined。

    第三件事情是实参形参相统一，把实参的值赋给形参。

    第四件事情是查找函数声明，如果AO对象中属性名与函数名一样，把值赋予函数体。

    当代码在执行时，创建出的变量对象的一条作用域链，[[scope]]（作用域）存储着一层层的AO与GO的集合，集合呈链式链接就是作用域链，用来指定所有变量和函数的访问顺序，作用域链最顶端始终是当前代码正在执行的变量对象的AO。

---

                                          this指向

    this指向只有在函数执行的时候才能确定this到底指向谁。所以this指向有二种情况

    第一种情况：如果一个函数没有被上一级的对象所调用，那么this指向GO，反之即指向上一级对象的AO。

    第二种情况：作为构造函数调用，this指向new出的对象的AO。（其中涉及到new操作符调用构造函数时隐式三步骤以及原型链继承概念）

    说到this指向，又不得不说三个改变this指向的方法—call、apply、bind。它们都是从Function.prototype继承来的（下篇再写具体用法）

---

                                            闭包

    闭包—是指有权访问另一个函数作用域变量的函数。

    创建闭包的常用方法就是函数里面再创建函数，然后把创建的函数的结果return出去保存到外部。所以当script代码块执行时，先生成GO，然后代码由上到下执行，当执行到外部函数执行前一刻时生成该函数的AO，同时当外部函数执行产生内部函数的定义，所以当内部函数被创建时保存了外部函数的执行环境（AO、GO），而且还未执行就把内部函数被return到外部时，从而导致外部函数释放不了自己的作用域，形成闭包。而当接收了return的内部函数的函数执行时（即 var test = 外部函数（）；test();），内部函数才生成自己的AO再作用域顶端，同时作用域链上还有外部函数的AO、GO。讲的好绕呀，，果然要有实例才容易懂！

---

                                          原型链

    原型链-由原型组成的链叫做原型链。而对象的__proto__就是它的是原型，原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，就这样根据对象的__proto__向上查找，这就是原型链。

---

                                          继承

原型链继承就是每一个构造函数都有一个prototype属性指向该构造函数的父类，当实例对象通过new一个构造函数生成，该实例对象隐性执行了四步。

第一步 var 实例 = {}

第二步 将构造函数中的this指向新创建的实例。

第三步 实例.__proto__ ＝ 构造函数.prototype

第三步 return 实例

所以当一个构造函数的prototype等于另一个实例对象，而这个实例对象是通过new另一个构造函数生成的，而另一个构造函数的prototype.xxx＝xxx，通过这种方式第一个构造函数的实例对象就可以访问到另一个构造函数的父类，这也就实现原型链继承。

---

                                        DOM树

    当浏览器从服务器获取到静态资源后（涉及到输入URL到页面加载这整个过程），由上到下一行行执行html代码生成一个个DOM节点，从而组成DOM树，根节点是HTMLDocument。DOM 树的结构构成的基本要素是 “节点“，文档的结构就是由层次化的节点组成，一个个节点组成HTML的DOM树,当我们查找想要的DOM节点时，浏览器是从DOM树上从右向左寻找。

---