作為一個前端開發人員，JS是我們行走江湖吃飯的家伙。基本上一個前端人員能值多少大洋，就看JS了。雖然各種框架層出不窮，但是歸根結底學好原生JS才是硬道理。
學習任何新東西其實都遵循 10000 小時成才定律，只要付出時間，就會有收獲。人與人的不同只是收獲的多少不同。關於天賦問題，我們確實要承認某些人在某些領域確實比其他人厲害。但大部分人其實都是普通人，不需要天賦，只需要通過時間的簡單堆積就可以混口飯吃。
彈鋼琴能到郎朗那個級別的人是少數了，多數藝術生都普普通通，畢業出來混個鋼琴老師當當，辦個培訓學校賺點錢娶媳婦兒生孩子，最多寫本書什么的。只有投入足夠多的時間，你發現某些人確實比你厲害，這個時候才適合討論天賦問題。所以，不要自我否定，才是真正的成長的開始。
咱們言歸正傳吧。
一，JavaScript的組成
JavaScript主要由以下3部分組成：
ECMAScript：解釋器、翻譯
DOM：Document Object Model(文檔對象模型)
BOM：Browser Object Model(瀏覽器對象模型)
ECMAScript類似於翻譯的角色，將編寫好的可讀性高的代碼翻譯成計算機可以識別的二進制代碼，並將計算機反饋回來的信息翻譯給我們。ECMAScript是JS的核心，通常稱為:解釋器。
ECMAScript為JS提供了最基本的功能，但這些功能是十分有限的，如何能讓JS具有編寫網頁代碼的能力呢?此時我們就要用到DOM了。DOM中的Document(文檔)其實就是HTML文檔，並且DOM還賦予了JS操作HTML的能力。在JS里DOM是以document的形式展現的。
BOM使得JS擁有了操作瀏覽器的能力，在JavaScript當中BOM以window的形式存在，有了BOM，JS就擁有了類似彈窗，關閉窗口，復制內容到剪貼板等與瀏覽器相關的功能。
從兼容性的角度來看的話，ES(ECMAScript)基本上不存在兼容性問題，DOM有一些操作上的不兼容，而BOM完全不兼容，所以盡可能避免使用BOM，這樣可以省去很多的麻煩。
二，變量類型
首先說變量，從字面上理解就是可以變化的量，放到編程語言里面，就是可以被賦值改變的量。和變量對應的就是常量，我們經常遇到的比如，10,20這樣的不能改變的數字，就是常量，一個確定的值。不能被賦值也不能被改變。
在JS中我們把變量分為了多種類型。
var a = 1024;
alert(typeof a);
var a = 'cos';
alert(typeof a);
var a = true;
alert(typeof a);
var a = function (){ alert('cos'); }
alert(typeof a);
var a = document;
alert(typeof a);
typeof 是一個一元運算，放在一個運算數之前，運算數可以是任意類型。它返回值是一個字符串，該字符串說明運算數的類型。
我們可以通過typeof返回變量類型，那么上面的例子的輸出結果，依次為：number(數值)，string(字符串)，boolean(布爾)，function(函數)，object(對象)。在這5中基礎數據類型之外，JS還存在一種叫undefined的類型，一般存在於如下兩種情況：
alert(typeof b);
變量b沒有進行過定義，所以JS返回的數值類型為undefined(未定義的)。
var b;
alert(typeof b);
這時，雖然我們定義了變量b，但在JS里，變量的類型只取決於變量內存的值，而變量b內沒有值，因此它的數據類型依然是undefined。
JS沒有限制變量的數據類型，顯得更加靈活，但如果一個變量不停地更改類型，會顯得非常的混亂。所以同一個變量，最好只存放一種類型的數據。
三，變量類型的轉換
變量不僅有類型，而且可以進行類型之間的轉換。如果某個數據的類型不符合我們的需求，那么就需要用到數據類型的轉換。我們一起舉個‘栗子’：
在網頁中添加兩個文本框和一個按鈕，並希望點擊按鈕后文本框中的數字可以相加。這個功能看起來很簡單，如果直接寫的話，因為textbox中value的屬性是以字符串形式返回給JS的，這就導致輸入的兩個數字最后會被當做字符串相加而不是數值。這時候，我們就需要將字符串轉換為數字。
將字符串轉化為數字的方法為parseInt()。
這是關於parseInt()的一個例子：
var a = '1024'; alert(parseInt(a)+1);
這里我們將a定義為了字符串，但是通過parseInt轉化后得到了數值類型的數據，所以輸出結果為1025。需要注意的是，parseInt是從左到右依次掃描字符串，一旦發現不是數字的字符，就立即停止工作，並將前面的字符通過數值類型返回，所以下面三種情況的返回結果依次為1024，1024，NaN：
var a = '1024px'; var b = '1024px24'; var c = 'abc'; alert(parseInt(a)); alert(parseInt(b)); alert(parseInt(c));
這里的 NaN 是Not a Number的簡寫，簡言之就是JS解析不出數字時會返回這個結果。
所以，我們這個案例可以通過如下代碼完成：
<script> window.onload=function () { var oTxt1=document.getElementById('txt1'); var oTxt2=document.getElementById('txt2'); var oBtn=document.getElementById('btn1');
oBtn.onclick=function () { alert(parseInt(oTxt1.value)+parseInt(oTxt2.value)); }; }; </script> <body> <input id="txt1" type="text" /> <input id="txt2" type="text" /> <input id="btn1" type="button" value="求和" /> </body>
運行結果：
這里有一個問題，我們並沒有對文本框進行任何限制，當用戶向文本框輸入的是字母而不是數字的時候，程序是不能正常執行的。所以，這時候需要判斷一下對文本框輸入值通過 parseInt 方法轉換出來的結果是不是 NaN，如果是NaN，就說明用戶輸入某個值或者這兩個值不是數字，此時需要返回給用戶一個提示。
那么問題來了，在JS里，NaN十分的奇葩：
var a=parseInt('abc');
var b=parseInt('def');
alert(a==b);
此時，a和b的值都是NaN，但這個程序的執行結果居然是false，這告訴我們在JS里NaN和NaN是不相等的。換言之，判斷結果是不是NaN，不能通過==進行比較。好在天無絕人之路，JS提供了一個函數：isNaN()，用於檢測一個變量是否為NaN。
現在我們來看：
輸入字母的時候效果如下：
通過 if 進行判斷，如果用戶有輸入的不是數字，則彈出與之對應的錯誤提示框;如果輸入的兩個值都沒有錯誤，將會彈出正確答案。
那么使用parseInt轉換小數，會怎么樣呢?
var a='3.5';
alert(parseInt(a));
輸出結果為3。對於parseInt而言，轉換出來的數字如果是小數，就會舍去小數部分，只保留整數部分。
如果我們需要用到小數的話，請使用parseInt的兄弟——parseFloat，這兩者在使用方法上沒有任何區別，你照貓畫虎的試試看。當你不知道轉換出來的數值是整數還是小數的時候，請優先選擇使用parseFloat，此時即便轉換前的變量為整數也不會出現數值缺損。
在我們剛才所講的類型轉換中，明確地告知了計算機我們想要對數據類型進行轉換，我們將這種方法稱為顯式類型轉換(也可以理解為：強制轉換)。同樣，還有一種轉換類型的方式被我們稱為隱式類型轉換。隱式類型轉換最簡單的例子如下：
var a=5;
var b='5';
alert(a==b);
理論上來講的話，二者數據類型不相同，輸出結果應該為flase。但是瀏覽器給出的答案是true。請和下面的例子做一個對比：
var a=5;
var b='5';
alert(a===b);
此時，返回的答案變成了false。那么問題來了，==和===二者之間存在什么區別呢?
對於==運算符來說，它在比較之前會先把二者的數據類型轉換為一致;而 === 運算符(全等運算符)不轉換類型，直接比較。在不轉換類型的情況下，a和b肯定是不相等。由此可知，在比較a==b時，並沒有明確告知計算機我們想要對a或b的類型進行轉換，但是計算機自己卻偷偷進行了轉換，這就是我們所講的隱式類型轉換。除開該例子之外，還存在另一種隱式轉換的情況：
var a='12';
var b='5';
alert(a-b);
如果這里是a+b，計算機就會默認是字符串相加(拼接)而彈出125。但是如果是a-b的話，計算機會在做減法之前進行隱式轉換成數值類型，我們就得到答案7。
為什么加法不會進行隱式轉換而減法會?因為在JS中+運算符本身具備字符串拼接和數字相加這兩個功能，如果+識別為字符串拼接，一步即可完成計算，直接拼接即可;但是如果識別為數字相加，就需要兩步才可以完成計算，即：先轉換類型，再相加。對於計算機而言，一定會選擇步驟更少的路徑，所以說加法不會進行隱式轉換。而在JS中，-運算符只有數字相減的功能，此時JS不得不進行隱式轉換。
四，變量作用域
變量作用域指的是變量可以起作用的范圍。
function aaa(){
var a=12;
}
function bbb(){
alert(a);
}
aaa();
bbb();
運行這個程序，在bbb函數內會出現變量a沒有被定義的報錯。事實上，a確實沒有被定義，因為在aaa中定義的a是局部變量，而局部變量，只能在定義它的函數里面使用。和局部變量相對的一個概念是全局變量。
var a;
function aaa(){
a=12;
}
function bbb(){
alert(a);
}
aaa();
bbb();
這個例題當中的a被聲明在所有函數的外面，這樣的變量是全局變量，可以在任何地方使用，所以能夠正常彈出12。
五，閉包
關於閉包的概念，我建議你現階段先不用深究，如果很感興趣的話可以Google一下。咱們說過，局部變量只能在定義它的函數內使用。那么，有一種情況例外：
function aaa(){
var a=12;
function bbb()
{
alert(a);
}
bbb();
}
aaa();
當函數bbb被包含在函數aaa內時，程序可以成功運行。此種寫法就被稱為閉包。閉包有很多高級的應用，當然這些都是后話，我們慢慢學習。在閉包結構中，aaa稱為父函數，bbb稱為子函數。對於閉包而言，子函數可以使用父函數的局部變量。事實上，剛剛我們已經使用過閉包了，例如上面的求和函數。
六，命名規范
命名規范，即怎樣給函數以及變量取名字。
給函數和變量取名字和給你孩子取名字差不多，理論而言是可以隨便取的，但實際應用中又不能顯得太俗太low，否則可能會引起隔壁老王的不滿。
關於命名規范：
可讀性——容易看懂
規范性——合乎規則
可讀性代表取名盡可能讓人能看懂。要是代碼通篇都是aaa，bbb，ccc這樣的取名，又正好碰到程序比較龐大，此時閱讀將是一件非常痛苦的事情。
規范性表示JS有一個較為約定俗稱的命名規則，大部分情況下采用匈牙利命名法或者類似方法，其原則為：
類型前綴
首字母大寫
JS中常見類型前綴：
類型前綴一般表明了變量存儲的類型，使我們一眼就能辨識變量當中存的是什么，其他人拿到代碼的時候就不會胡亂更改數據類型，這樣保證了代碼的規范和更好的可讀性。一般而言只有變量遵循前綴的規范，而函數則沒有這個必要。
當一個變量或者函數名由多個英文單詞組成的時候，我們通常使用駝峰法命名，每個單詞的首字母使用大寫，例如oBtnUserLogin，這種命名方式可以更清晰地判斷變量的含義。