? ? 前端，一個當初以為自己已經(jīng)入門了的職業(yè)，天真以為會點html + CSS + Js，掌握基礎的公司前端所用框架Vue的用法就可以了，但實習后才發(fā)現(xiàn)原來自己連前端的門是什么東西都不知道。

? ? 前端開發(fā)—一個技術(shù)更新迭代迅速、需要學習東西最多的IT職業(yè)，而作為一個實習生，前端基礎以及學習能力是最重要的。下面我們就聊一下這個月以來我對前端入門的一些總結(jié)，講錯的希望各路大神誤噴（狗頭）。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 預編譯

? ? 預編譯—發(fā)生在函數(shù)執(zhí)行的前一刻，它在函數(shù)執(zhí)行時總得來說做了兩件事：一函數(shù)聲明整體提升；二變量 聲明提升。那么預編譯具體是做了什么事情呢？

? ? 從整體頁面來看，當script內(nèi)代碼塊執(zhí)行時，預編譯做了三件事。

? ? 第一件事情是創(chuàng)建GO（Global Object）對象,也就是我們熟悉的全局對象

? ? 第二件事是查找變量聲明作為GO屬性，值賦予undefined

? ? 第三件事是查找函數(shù)聲明作為GO屬性，如果屬性名存在，直接把值賦予函數(shù)體。

? ? 當我們調(diào)用一個函數(shù)時，在執(zhí)行前一刻，預編譯做了四件事情。

? ? 第一件事情是生成一個AO（Actived Object）對象,也就是我們平時所說的函數(shù)作用域?qū)ο?，保存函?shù)調(diào)用時的局部變量。

? ? 第二件事情是查找函數(shù)形參以及函數(shù)內(nèi)部變量聲明，形參名以及變量名作為AO對象的屬性，值為undefined。

? ? 第三件事情是實參形參相統(tǒng)一，把實參的值賦給形參。

? ? 第四件事情是查找函數(shù)聲明，如果AO對象中屬性名與函數(shù)名一樣，把值賦予函數(shù)體。

? ? 當代碼在執(zhí)行時，創(chuàng)建出的變量對象的一條作用域鏈，[[scope]]（作用域）存儲著一層層的AO與GO的集合，集合呈鏈式鏈接就是作用域鏈，用來指定所有變量和函數(shù)的訪問順序，作用域鏈最頂端始終是當前代碼正在執(zhí)行的變量對象的AO。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this指向

? ? this指向只有在函數(shù)執(zhí)行的時候才能確定this到底指向誰。所以this指向有二種情況

? ? 第一種情況：如果一個函數(shù)沒有被上一級的對象所調(diào)用，那么this指向GO，反之即指向上一級對象的AO。

? ? 第二種情況：作為構(gòu)造函數(shù)調(diào)用，this指向new出的對象的AO。（其中涉及到new操作符調(diào)用構(gòu)造函數(shù)時隱式三步驟以及原型鏈繼承概念）

? ? 說到this指向，又不得不說三個改變this指向的方法—call、apply、bind。它們都是從Function.prototype繼承來的（下篇再寫具體用法）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 閉包

? ? 閉包—是指有權(quán)訪問另一個函數(shù)作用域變量的函數(shù)。

? ? 創(chuàng)建閉包的常用方法就是函數(shù)里面再創(chuàng)建函數(shù)，然后把創(chuàng)建的函數(shù)的結(jié)果return出去保存到外部。所以當script代碼塊執(zhí)行時，先生成GO，然后代碼由上到下執(zhí)行，當執(zhí)行到外部函數(shù)執(zhí)行前一刻時生成該函數(shù)的AO，同時當外部函數(shù)執(zhí)行產(chǎn)生內(nèi)部函數(shù)的定義，所以當內(nèi)部函數(shù)被創(chuàng)建時保存了外部函數(shù)的執(zhí)行環(huán)境（AO、GO），而且還未執(zhí)行就把內(nèi)部函數(shù)被return到外部時，從而導致外部函數(shù)釋放不了自己的作用域，形成閉包。而當接收了return的內(nèi)部函數(shù)的函數(shù)執(zhí)行時（即 var test = 外部函數(shù)（）；test();），內(nèi)部函數(shù)才生成自己的AO再作用域頂端，同時作用域鏈上還有外部函數(shù)的AO、GO。講的好繞呀，，果然要有實例才容易懂！

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 原型鏈

? ? 原型鏈-由原型組成的鏈叫做原型鏈。而對象的__proto__就是它的是原型，原型也是一個對象，也有__proto__屬性，原型的__proto__又是原型的原型，就這樣根據(jù)對象的__proto__向上查找，這就是原型鏈。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 繼承

原型鏈繼承就是每一個構(gòu)造函數(shù)都有一個prototype屬性指向該構(gòu)造函數(shù)的父類，當實例對象通過new一個構(gòu)造函數(shù)生成，該實例對象隱性執(zhí)行了四步。

第一步 var 實例 = {}

第二步 將構(gòu)造函數(shù)中的this指向新創(chuàng)建的實例。

第三步 實例.__proto__ ＝ 構(gòu)造函數(shù).prototype

第三步 return 實例

所以當一個構(gòu)造函數(shù)的prototype等于另一個實例對象，而這個實例對象是通過new另一個構(gòu)造函數(shù)生成的，而另一個構(gòu)造函數(shù)的prototype.xxx＝xxx，通過這種方式第一個構(gòu)造函數(shù)的實例對象就可以訪問到另一個構(gòu)造函數(shù)的父類，這也就實現(xiàn)原型鏈繼承。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? DOM樹

? ? 當瀏覽器從服務器獲取到靜態(tài)資源后（涉及到輸入URL到頁面加載這整個過程），由上到下一行行執(zhí)行html代碼生成一個個DOM節(jié)點，從而組成DOM樹，根節(jié)點是HTMLDocument。DOM 樹的結(jié)構(gòu)構(gòu)成的基本要素是 “節(jié)點“，文檔的結(jié)構(gòu)就是由層次化的節(jié)點組成，一個個節(jié)點組成HTML的DOM樹,當我們查找想要的DOM節(jié)點時，瀏覽器是從DOM樹上從右向左尋找。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? css3

http://www.runoob.com/css3/css3-tutorial.html（CSS3菜鳥教程）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 事件

事件主要分兩大部分－鼠標事件和鍵盤事件

事件處理模型一事件捕獲和事件冒泡

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 三大框架之一? Vue

這是我現(xiàn)在公司前端用的主要框架，剛進公司的時候只是了解過這個框架，做過幾個小Demo練習,真正學習、使用的時候才發(fā)現(xiàn)這真的是一個靈活易用的框架，上手也不難。建議要學習這個框架的同學們擼Vue官方文檔就行，擼完文檔擼Api。