JavaScript是一門面向對象的動態語言，他一般用來處理以下任務：

1、修飾網頁

生成HTML和CSS

生成動態HTML內容

生成一些特效

2、提供用戶交互接口

生成用戶交互組件

驗證用戶輸入

自動填充表單

3、能夠讀取本地或者遠程數據的前端應用程序

4、通過Nodejs實現像JAVA,C#,C++一樣的服務端程序

5、實現分布式WEB程序，包括前端和服務端

當前瀏覽器所支持的JavaScript的版本被稱為“ECMAScript的5.1”，或簡單的“ES5”，但接下來的兩個版本，稱為“ES6”和“ES7”（或“ES2015”和“ES2016”，新版以本年命名），有很多的附加功能和改進的語法，是非常值得期待的（并已部分被當前的瀏覽器和后端JS的環境支持）。

JavaScript類型和常量

JS有3個值類型：string,number和boolean，我們可以用一個變量v保存不同類型的值用來和typeof(v)比較， typeof(v)===”number”。

JS有5個引用類型：Object, Array, Function, Date 和 RegExp。數組，函數，日期和正則表達式是特殊類型的對象，但在概念上，日期和正則表達式是值類型，被包裝成對象形式體現。

變量，數組，函數的參數和返回值都可以不聲明，它們通常不會被JavaScript引擎檢查，會被自動進行類型轉換。

變量值可能為：

1、數據，如string,number,boolean

2、對象的引用：如普通對象，數組，函數，日期，正則表達式

3、特殊值null，其通常用作用于初始化的對象變量的默認值

4、特殊值undefined，已經聲明但沒有初始化的初始值

string是Unicode字符序列。字符串常量會被單引號或雙引號包裹著，如“Hello world!”，“A3F0′，或者空字符串”"。兩個字符串表達式可以用+操作符連接，并可通過全等于比較：

if (firstName + lastName === "James Bond")

字符串的字符數量可以通過length屬性獲得：

console.log( "Hello world!".length);  // 12

所有的數字值都是在64位浮點數字。整數和浮點數之間沒有明確的類型區別。如果一個數字常量不是數字，可以將其值設置為NaN（“not a number”），它可以用isNaN方法來判斷。

不幸的是，直到ES6才有Number.isInteger方法，用于測試一個數是不是一個整數。因此在還不支持它的瀏覽器中，為確保一個數字值是一個整數，或者一個數字的字符串被轉換為一個整數，就必須使用parseInt函數。類似地，包含小數的字符串可用與parseFloat方法轉換。將一個數子n轉換成字符串，常用的方法是使用String(n)。

就像Java，我們也有兩個預先定義好的布爾型值，true與false，以及布爾運算符符號: ! （非），&&（與），||（或）。當非布爾型值與布爾型值比較時，非布爾型值會被隱式轉換?？兆址?，數字0，以及undefined和null，會被轉換為false，其他所有值會轉換為true。

通常我們需要使用全等符號符號（===和！==）而不是==和！=。否則，數字2是等于的字符串“2”的， (2 == “2″) is true

VAR= [] 和var a = new Array() 都可以定義一個空數組。（二胡：推薦前者）

VAR O ={} 和 var o = new Obejct() 都可以定義個空對象（二胡：還是推薦前者）。注意，一個空對象{}不是真的空的，因為它包含的Object.prototype繼承屬性。所以，一個真正的空對象必須以Null為原型， var o = Object.create(null)。

表1 類型測試和轉換

變量作用域

在JavaScript的當前版本ES5，有兩種范圍變量：全局作用域和函數作用域，沒有塊作用域。因此，應該避免聲明在塊內聲明變量。

function foo() {

  for (var i=0; i < 10; i++) {

    ...  // do something with i

  }

}

我們應該這樣寫

function foo() {

  var i=0;

  for (i=0; i < 10; i++) {

    ...  // do something with i

  }

}

所有變量應在函數的開始聲明。只有在JavaScript的下一個版本ES6中，我們可以用let關鍵詞聲明一個塊級變量。

嚴格模式

從ES5開始，我們可以使用嚴格模式，獲得更多的運行時錯誤檢查。例如，在嚴格模式下，所有變量都必須進行聲明。給未聲明的變量賦值拋出異常。

我們可以通過鍵入下面的語句作為一個JavaScript文件或script元素中的第一行開啟嚴格模式：’use strict’;

通常建議您使用嚴格模式，除非你的代碼依賴于與嚴格的模式不兼容的庫。

不同類型的對象

JS對象與傳統的OO/UML對象不同。它們可以不通過類實例化而來。它們有屬性、方法、鍵值對三種擴展。

JS對象可以直接通過JSON產生，而不用實例化一個類。

var person1 = { lastName:"Smith", firstName:"Tom"};

var o1 = Object.create( null);  // an empty object with no slots

對象屬性可以以兩種方式獲得：

1、使用點符號（如在C ++/ Java的）：person1.lastName = “Smith”

2、使用MAP方式person1["lastName"] = “Smith”

JS對象有不同的使用方式。這里有五個例子：

1、記錄，例如，

var myRecord = {firstName:”Tom”, lastName:”Smith”, age:26}

2、MAP（也稱為“關聯數組”，“詞典”或其他語言的“哈希表”)v

ar numeral2number = {“one”:”1″, “two”:”2″, “three”:”3″}

3、非類型化對象

var person1 = { lastName: "Smith", firstName: "Tom", getFullName: function () { return this.firstName +" "+ this.lastName; } };

4、命名空間

var myApp = { model:{}, view:{}, ctrl:{} };

可以由一個全局變量形式來定義，它的名稱代表一個命名空間前綴。例如，上面的對象變量提供了基于模型 – 視圖 – 控制器（MVC）架構模式，我們有相應的MVC應用程序的三個部分。

正常的類

數組

可以用一個JavaScript數組文本進行初始化變量：

var a = [1,2,3];

因為它們是數組列表，JS數組可動態增長：我們可以使用比數組的長度更大的索引。例如，上面的數組變量初始化后，數組長度為3，但我們仍然可以操作第5個元素 a[4] = 7;

我們可以通過數組的length屬性得到數組長度：

for (i=0; i < a.length; i++) { console.log(a[i]);} //1 2 3 undefined 7 `

我們可以通過 Array.isArray(a) 來檢測一個變量是不是數組。

通過push方法給數組追加元素：a.push( newElement);

通過splice方法，刪除指定位置的元素：a.splice( i, 1);

通過indexOf查找數組，返回位置或者-1：if (a.indexOf(v) > -1) …

通過for或者forEach（性能弱）遍歷數組：

var i=0;

for (i=0; i < a.length; i++) {

  console.log( a[i]);

}

a.forEach(function (elem) {

  console.log( elem);

})

通過slice復制數組：var clone = a.slice(0);

Maps

map（也稱為“散列映射”或“關聯數組’）提供了從鍵及其相關值的映射。一個JS map的鍵是可以包含空格的字符串：

var myTranslation = { 

"my house": "mein Haus", 

"my boat": "mein Boot", 

"my horse": "mein Pferd"

}

通過Object.keys(m)可以獲得map中所有的鍵：

var i=0, key="", keys=[];

keys = Object.keys( myTranslation);

for (i=0; i < keys.length; i++) {

  key = keys[i];

  alert('The translation of '+ key +' is '+ myTranslation[key]);

}

通過直接給不存在的鍵賦值來新增元素：

myTranslation["my car"] = "mein Auto";

通過delete刪除元素：

delete myTranslation["my boat"];

通過in搜索map：

`if ("my bike" in myTranslation)  ...`

通過for或者forEach（性能弱）和Object.keys()遍歷map：

var i=0, key="", keys=[];

keys = Object.keys( m);

for (i=0; i < keys.length; i++) {

  key = keys[i];

  console.log( m[key]);

}

Object.keys( m).forEach( function (key) {

  console.log( m[key]);

})

通過 JSON.stringify 將map序列化為JSON字符串，再JSON.parse將其反序列化為MAP對象 來實現復制：

var clone = JSON.parse( JSON.stringify( m))

請注意，如果map上只包含簡單數據類型或（可能嵌套）數組/map,這種方法效果很好。在其他情況下，如果map包含Date對象，我們必須寫我們自己的clone方法。

Functions

JS函數是特殊的JS的對象，它具有一個可選的名字屬性和一個長度屬性（參數的數目）。我們可以這樣知道一個變量是不是一個函數：

if (typeof( v) === "function") {...}

JS函數可以保存在變量里、被當作參數傳給其他函數，也可以被其他函數作為返回值返回。JS可以被看成一個函數式語言，函數在里面可以說是一等公民。

正常的定義函數方法是用一個函數表達式給一個變量賦值：

var myFunction = function theNameOfMyFunction () {...}

function theNameOfMyFunction () {...}

其中函數名（theNameOfMyFunction）是可選的。如果省略它，其就是一個匿名函數。函數可以通過引用其的變量調用。在上述情況下，這意味著該函數通過myFunction()被調用，而不是通過theNameOfMyFunction()調用。

JS函數，可以嵌套內部函數。閉包機制允許在函數外部訪問函數內部變量，并且創建閉包的函數會記住它們。

當執行一個函數時，我們可以通過使用內置的arguments參數，它類似一個參數數組，我們可以遍歷它們，但由于它不是常規數組，forEach無法遍歷它。arguments參數包含所有傳遞給函數的參數。我們可以這樣定義一個不帶參數的函數，并用任意數量的參數調用它，就像這樣：

var sum = function () {

  var result = 0, i=0;

  for (i=0; i < arguments.length; i++) {

    result = result + arguments[i];

  }

  return result;

};

console.log( sum(0,1,1,2,3,5,8));  // 20

prototype原型鏈可以訪問函數中的每一個元素，如Array.prototype.forEach（其中Array代表原型鏈中的數組的構造函數）。

var numbers = [1,2,3];  // create an instance of Array

numbers.forEach( function (n) {

  console.log( n);

});

我們還可以通過原型鏈中的prototype.call方法來處理:

var sum = function () {

  var result = 0;

  Array.prototype.forEach.call( arguments, function (n) {

    result = result + n;

  });

  return result;

};

Function.prototype.apply是Function.prototype.call的一個變種，其只能接受一個參數數組。

立即調用的JS函數表達式優于使用純命名對象，它可以獲得一個命名空間對象，并可以控制其變量和方法哪些可以外部訪問，哪些不是。這種機制也是JS模塊概念的基礎。在下面的例子中，我們定義了一個應用程序，它對外暴露了指定的元素和方法：

myApp.model = function () {

  var appName = "My app's name";

  var someNonExposedVariable = ...;

  function ModelClass1 () {...}

  function ModelClass2 () {...}

  function someNonExposedMethod (...) {...}

  return {

    appName: appName,

    ModelClass1: ModelClass1,

    ModelClass2: ModelClass2

  }

}();  // immediately invoked

定義和使用類

類是在面向對象編程的基礎概念。對象由類實例化而來。一個類定義了與它創建的對象的屬性和方法。

目前在JavaScript中沒有明確的類的概念。JavaScript中定義類有很多不同的模式被提出，并在不同的框架中被使用。用于定義類的兩個常用的方法是：

構造函數法，它通過原型鏈方法來實現繼承，通過new創建新對象。這是Mozilla的JavaScript指南中推薦的經典方法。

工廠方法：使用預定義的Object.create方法創建類的新實例。在這種方法中，基于構造函數繼承必須通過另一種機制來代替。

當構建一個應用程序時，我們可以使用這兩種方法創建類，這取決于應用程序的需求 。mODELcLASSjs是一個比較成熟的庫用來實現工廠方法，它有許多優點。（基于構造的方法有一定的性能優勢）

ES6中構造函數法創建類

在ES6，用于定義基于構造函數的類的語法已推出（新的關鍵字類的構造函數，靜態類和超類）。這種新的語法可以在三個步驟定義一個簡單的類。

基類Person 定義了兩個屬性firstName 和lastName，以及實例方法toString和靜態方法checkLastName：

class Person {

  constructor( first, last) {

    this.firstName = first;

    this.lastName = last;

  }

  toString() {

    return this.firstName + " " +

        this.lastName;

  }

  static checkLastName( ln) {

    if (typeof(ln)!=="string" || 

        ln.trim()==="") {

      console.log("Error: " +

          "invalid last name!");

    }

  }

}

類的靜態屬性如下定義：

Person.instances = {};

一個子類定義的附加屬性和可能會覆蓋超類的方法：

class Student extends Person {

  constructor( first, last, studNo) {

    super.constructor( first, last);

    this.studNo = studNo; 

  }

  // method overrides superclass method

  toString() {

    return super.toString() + "(" +

        this.studNo +")";

  }

}

ES5中構造函數法創建類

在ES5，我們可以以構造函數的形式定義一個基于構造函數的類結構，下面是Mozilla的JavaScript指南中推薦的編碼模式。此模式需要七個步驟來定義一個簡單的類結構。由于這種復雜的模式可能很難記住，我們可能需要使用cLASSjs之類的庫來幫助我們。

首先定義構造函數是隱式創建一個新的對象，并賦予它相應的值：

function Person( first, last) {

  this.firstName = first; 

  this.lastName = last; 

}

這里的this指向新創建的對象。

在原型中定義實例方法：

Person.prototype.toString = function () {

  return this.firstName + " " + this.lastName;

}

可以在構造函數中定義靜態方法，也可以用.直接定義：

Person.checkLastName = function (ln) {

  if (typeof(ln)!=="string" || ln.trim()==="") {

    console.log("Error: invalid last name!");

  }

}

定義靜態屬性：

Person.instances = {};

定義子類并增加屬性：

function Student( first, last, studNo) {

  // invoke superclass constructor

  Person.call( this, first, last);

  // define and assign additional properties

  this.studNo = studNo;  

}

通過Person.call( this, …) 來調用基類的構造函數。

將子類的原型鏈改為基類的原型鏈，以實現實例方法的繼承（構造函數得改回來）：

// Student inherits from Person

Student.prototype = Object.create( 

    Person.prototype);

// adjust the subtype's constructor property

Student.prototype.constructor = Student;

通過Object.create( Person.prototype) 我們基于 Person.prototype創建了一個新的對象原型。

定義覆蓋基類方法的子類方法：

Student.prototype.toString = function () {

  return Person.prototype.toString.call( this) +

      "(" + this.studNo + ")";

};

然后通過new關鍵字來實例化一個類

var pers1 = new Person("Tom","Smith");

JavaScript的prototype

prototype是函數的一個屬性（每個函數都有一個prototype屬性），這個屬性是一個指針，指向一個對象。它是顯示修改對象的原型的屬性。

__proto__是一個對象擁有的內置屬性（prototype是函數的內置屬性。__proto__是對象的內置屬性），是JS內部使用尋找原型鏈的屬性。

每個對象都有個constructor屬性，其指向的是創建當前對象的構造函數。