Javascript 學習筆記--語法篇

weixin_34208283發表於2016-09-21
JavaScript筆記

很久沒用js了，最近因為要做個專案，要用到前端，於是重拾起來看看。本文應該適合於跟我一樣，用過js但是又記得不是很清楚的孩紙。

[TOC]

歷史

具體可以參見 javascript歷史這篇文章 ,我這裡就簡要說說.

  • Netscape 發明了 JavaScript
  • 1997 年，JavaScript 1.1 作為一個草案提交給歐洲計算機制造商協會（ECMA），ECMAScript 作為 JavaScript 實現的基礎
  • 2005年，蘋果公司在KHTML引擎基礎上，建立了WebKit引擎。
  • 2005年，Ajax方法（Asynchronous Javascript and XML）正式誕生，Jesse James Garrett發明了這個詞彙。它開始流行的標誌是，2月份釋出的Google Maps專案大量採用該方法。它幾乎成了新一代網站的標準做法，促成了Web 2.0時代的來臨。
  • 2011年6月，ECMAscript 5.1版釋出，並且成為ISO國際標準（ISO/IEC 16262:2011）。目前瀏覽器使用的都是該標準，ECMA6還沒有完全相容。
  • 2008年，V8編譯器誕生。這是Google公司為Chrome瀏覽器而開發的，它的特點是讓Javascript的執行變得非常快。它提高了JavaScript的效能，推動了語法的改進和標準化，改變外界對JavaScript的不佳印象。同時，V8是開源的，任何人想要一種快速的嵌入式指令碼語言，都可以採用V8，這擴充了JavaScript的應用領域。
  • 2009年，Node.js專案誕生，創始人為Ryan Dahl，它標誌著Javascript可以用於伺服器端程式設計，從此網站的前端和後端可以使用同一種語言開發。並且，Node.js可以承受很大的併發流量，使得開發某些網際網路大規模的實時應用變得容易。

總之js已經變成世界上最流行的語言了，github上js的好多專案，star都破萬了，java的一般只是破千，可見js的影響力之大。

語法

開發環境

學習語法前我們先準備一下開發環境，比較靠譜的就是用chrome自帶的devtool，完全夠用了，而且還支援commomjs的console的列印。
首先建一個html檔案，算是一個殼。

<html>
    <script src="./index.js"></script>
</html>

然後在同級目錄下新建index.js檔案。輸入

alert("hello world!")

再用chrome 瀏覽器開啟之前新建的html檔案，就完成了。現在點選chrome的設定－》更多工具－》開發者工具－》source，你就可以看到我們的js程式碼了，這個介面也可以編輯js檔案的。如下圖：
3093959-44168d462c738071.jpg
enter image description here

var的作用域

js變數作用域可分為："全域性變數"和"區域性變數"

  • "全域性變數"：申明在函式之外的變數
  • "區域性變數"：申明在函式體中的變數，並且只能在當前函式體內訪問，如：function(){var a = 0;}

注：在申明變數時凡是沒有var關鍵字，而直接賦值的變數均為全域性變數

例子1:
function test() {  
           a = 30; 
          var b = 20;
     }
 test();
 console.log("a="+a); //這裡很明顯，a為全域性變數
 console.log("b="+b);//b為區域性變數，故在函式test外呼叫是，提示未定義

 var a=1;
    function main(){
        var a=2;//區域性變數
        console.log(a);//2
    } 
   main();
   console.log(a);//1
   //函式作用域憂於全域性作用域

最特殊的例子

var a = 1;
function test() {  
          console.log("a="+a); //這裡a為undefined
/*函式中宣告的變數在整個函式中都有定義。如果函式內部有定義變數，即使在定義之前輸出但會先執行後面定義語句，然後判斷輸出結果，所以說宣告的變數在整個函式中都是起作用的。*/
          var a = 2;
     }
 test();

函式體會先判斷外面的a有沒有被重新定義，有的話就清除掉變數的定義，出了函式體再恢復。

let和var關鍵字異同

宣告後未賦值，表現相同

'use strict';
(function() {
  var varTest;
  let letTest;
  console.log(varTest); //輸出undefined
  console.log(letTest); //輸出undefined
}());

使用未宣告的變數，表現不同:

(function() {
  console.log(varTest); //輸出undefined(注意要註釋掉下面一行才能執行)
  console.log(letTest); //直接報錯：ReferenceError: letTest is not defined

  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
}());

重複宣告同一個變數時，表現不同：

'use strict';
(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  var varTest = 'varTest changed.';
  let letTest = 'letTest changed.'; //直接報錯：SyntaxError: Identifier 'letTest' has already been declared

  console.log(varTest); //輸出varTest changed.(注意要註釋掉上面letTest變數的重複宣告才能執行)
  console.log(letTest);
}());

變數作用範圍，表現不同

'use strict';

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }

  console.log(varTest); //輸出"varTest changed."，內部"{}"中宣告的varTest變數覆蓋外部的letTest宣告
  console.log(letTest); //輸出"test let OK."，內部"{}"中宣告的letTest和外部的letTest不是同一個變數
}());

命名規範

  1. 變數名稱 必須為 小寫字母。
  2. 類的命名使用駱駝命名規則，例如：
    Account, EventHandler
  3. 常量 必須 在物件（類）或者列舉變數的前部宣告。列舉變數的命名必須要有實際的意義，並且其成員 必須 使用駱駝命名規則或使用大寫：
    var NodeTypes ={
    Element :1,
    DOCUMENT:2
    }
  4. 變數如果設定為私有，則前面 必須 新增下劃線。
    this._somePrivateVariable = statement;

基本型別 string , number ,boolean

javascript雖然是鬆散型的語言，定義變數用var就可以了，但是實際上內部仍然有資料型別的區分，可以使用特性資料型別的方法。

String

字串文字是由單引號或雙引號所引用的字元。單引號和雙引號沒有區別。
在轉換的時候，很容易出問題，例如
console.log("30"+3) ／／33
console.log("30"－3) ／／27

講到String就不能不提到正則，js對於正則的支援是非常強大的。w3c介紹

直接量語法：

/pattern/attributes

呼叫時直接使用/"reg"/i.test()的形式

attributes  描述

i   執行對大小寫不敏感的匹配。
g   執行全域性匹配（查詢所有匹配而非在找到第一個匹配後停止）。
m   執行多行匹配。

test方法是說檢索字串中指定的值。返回 true 或 false。

Boolean

true，false
boolean主要是轉換的問題，像c語言一樣，如果是數字，只有0和NAN是false，否則為true。
空字串是false，否則為true，物件都是true，undefined和null也是false
雙重否定符（！！）或者Boolean()可以顯示將其它型別轉成布林值.
例如！！1 ＝ true
Boolean（1） ＝ true

Number

js支援的數字範圍是－2e31 到2e31之間，如果超出，是Infinity和－Infinity，這兩個是特殊的Number型別。

NaN(not a number) .如果一個字串或者布林不能轉換成數字，那麼他的值就是NaN。例如

var nValue = 1.0;
if(nValue == 'one')  //false one被轉成NaN

還有isNaN（），用來監測是否是數字
，null和undefine也是nan

至於資料型別的方法，大家自己查api文件吧～

操作符

注意的是js不能這樣賦值
var a1,a2 =3;
這樣a1就沒有定義了

函式

函式分為兩種

// 1。 宣告函式
    function Name（）｛
    ｝
    //或者
    var func ＝ function（params）｛
    ｝
// 2.  匿名函式
  var name  ＝ new function（）｛
  }

當js解析它時，和宣告式函式不一樣，它將動態建立一個匿名函式，當其被呼叫後，該函式就將被自動刪除。如果在一個迴圈體內使用一個匿名函式，則每次使用都會被建立。

PS：！！函式就是一個物件

物件導向

原型

Object物件有一個prototype屬性，通過它可以擴充套件任意物件。
js本身可以動態建立方法和屬性，但是建立出來的只適用於當前物件。例如下面方法：

    var num  = new Number()
    num.add=function(val1,val2){return val1 + val2}
    var sum = num.add(8,3)

當通過protype擴充套件物件時，擴充套件的方法或屬性將適用於物件的所有例項，但是當擴充套件物件例項的時候，新的方法和屬性只適用於物件例項。例如

    Number.prototype.add=function(val1,val2{return val1+val2};
    var num = new Number();
    var sum=num.add()

繼承

call（）和apply（）
call（）和apply的作用都是呼叫其它物件的建構函式，對本物件進行賦值。

相關文章