JavaScript 10分鐘入門(mén)

JavaScript是一門(mén)面向對象的動(dòng)態(tài)語(yǔ)言，他一般用來(lái)處理以下任務(wù)：

1、修飾網(wǎng)頁(yè)

生成HTML和CSS

生成動(dòng)態(tài)HTML內容

生成一些特效

2、提供用戶(hù)交互接口

生成用戶(hù)交互組件

驗證用戶(hù)輸入

自動(dòng)填充表單

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

4、通過(guò)Nodejs實(shí)現像JAVA,C#,C++一樣的服務(wù)端程序

5、實(shí)現分布式WEB程序，包括前端和服務(wù)端

當前瀏覽器所支持的JavaScript的版本被稱(chēng)為“ECMAScript的5.1”，或簡(jiǎn)單的“ES5”，但接下來(lái)的兩個(gè)版本，稱(chēng)為“ES6”和“ES7”（或“ES2015”和“ES2016”，新版以本年命名），有很多的附加功能和改進(jìn)的語(yǔ)法，是非常值得期待的（并已部分被當前的瀏覽器和后端JS的環(huán)境支持）。

JavaScript類(lèi)型和常量

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

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

變量，數組，函數的參數和返回值都可以不聲明，它們通常不會(huì )被JavaScript引擎檢查，會(huì )被自動(dòng)進(jìn)行類(lèi)型轉換。

變量值可能為：

1、數據，如string,number,boolean

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

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

4、特殊值undefined，已經(jīng)聲明但沒(méi)有初始化的初始值

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

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

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

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

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

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

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

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

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

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

表1 類(lèi)型測試和轉換

變量作用域

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

function foo() {

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

    ...  // do something with i

  }

}

我們應該這樣寫(xiě)

function foo() {

  var i=0;

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

    ...  // do something with i

  }

}

所有變量應在函數的開(kāi)始聲明。只有在JavaScript的下一個(gè)版本ES6中，我們可以用let關(guān)鍵詞聲明一個(gè)塊級變量。

嚴格模式

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

我們可以通過(guò)鍵入下面的語(yǔ)句作為一個(gè)JavaScript文件或script元素中的第一行開(kāi)啟嚴格模式：’use strict’;

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

不同類(lèi)型的對象

JS對象與傳統的OO/UML對象不同。它們可以不通過(guò)類(lèi)實(shí)例化而來(lái)。它們有屬性、方法、鍵值對三種擴展。

JS對象可以直接通過(guò)JSON產(chǎn)生，而不用實(shí)例化一個(gè)類(lèi)。

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

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

對象屬性可以以?xún)煞N方式獲得：

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

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

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

1、記錄，例如，

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

2、MAP（也稱(chēng)為“關(guān)聯(lián)數組”，“詞典”或其他語(yǔ)言的“哈希表”)v

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

3、非類(lèi)型化對象

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

4、命名空間

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

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

正常的類(lèi)

數組

可以用一個(gè)JavaScript數組文本進(jìn)行初始化變量：

var a = [1,2,3];

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

我們可以通過(guò)數組的length屬性得到數組長(cháng)度：

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

我們可以通過(guò) Array.isArray(a) 來(lái)檢測一個(gè)變量是不是數組。

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

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

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

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

var i=0;

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

  console.log( a[i]);

}

a.forEach(function (elem) {

  console.log( elem);

})

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

Maps

map（也稱(chēng)為“散列映射”或“關(guān)聯(lián)數組’）提供了從鍵及其相關(guān)值的映射。一個(gè)JS map的鍵是可以包含空格的字符串：

var myTranslation = { 

"my house": "mein Haus", 

"my boat": "mein Boot", 

"my horse": "mein Pferd"

}

通過(guò)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]);

}

通過(guò)直接給不存在的鍵賦值來(lái)新增元素：

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

通過(guò)delete刪除元素：

delete myTranslation["my boat"];

通過(guò)in搜索map：

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

通過(guò)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]);

})

通過(guò) JSON.stringify 將map序列化為JSON字符串，再JSON.parse將其反序列化為MAP對象 來(lái)實(shí)現復制：

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

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

Functions

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

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

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

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

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

function theNameOfMyFunction () {...}

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

JS函數，可以嵌套內部函數。閉包機制允許在函數外部訪(fǎng)問(wèn)函數內部變量，并且創(chuàng )建閉包的函數會(huì )記住它們。

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

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原型鏈可以訪(fǎng)問(wèn)函數中的每一個(gè)元素，如Array.prototype.forEach（其中Array代表原型鏈中的數組的構造函數）。

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

numbers.forEach( function (n) {

  console.log( n);

});

我們還可以通過(guò)原型鏈中的prototype.call方法來(lái)處理:

var sum = function () {

  var result = 0;

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

    result = result + n;

  });

  return result;

};

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

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

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

定義和使用類(lèi)

類(lèi)是在面向對象編程的基礎概念。對象由類(lèi)實(shí)例化而來(lái)。一個(gè)類(lèi)定義了與它創(chuàng )建的對象的屬性和方法。

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

構造函數法，它通過(guò)原型鏈方法來(lái)實(shí)現繼承，通過(guò)new創(chuàng )建新對象。這是Mozilla的JavaScript指南中推薦的經(jīng)典方法。

工廠(chǎng)方法：使用預定義的Object.create方法創(chuàng )建類(lèi)的新實(shí)例。在這種方法中，基于構造函數繼承必須通過(guò)另一種機制來(lái)代替。

當構建一個(gè)應用程序時(shí)，我們可以使用這兩種方法創(chuàng )建類(lèi)，這取決于應用程序的需求 。mODELcLASSjs是一個(gè)比較成熟的庫用來(lái)實(shí)現工廠(chǎng)方法，它有許多優(yōu)點(diǎn)。（基于構造的方法有一定的性能優(yōu)勢）

ES6中構造函數法創(chuàng )建類(lèi)

在ES6，用于定義基于構造函數的類(lèi)的語(yǔ)法已推出（新的關(guān)鍵字類(lèi)的構造函數，靜態(tài)類(lèi)和超類(lèi)）。這種新的語(yǔ)法可以在三個(gè)步驟定義一個(gè)簡(jiǎn)單的類(lèi)。

基類(lèi)Person 定義了兩個(gè)屬性firstName 和lastName，以及實(shí)例方法toString和靜態(tài)方法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!");

    }

  }

}

類(lèi)的靜態(tài)屬性如下定義：

Person.instances = {};

一個(gè)子類(lèi)定義的附加屬性和可能會(huì )覆蓋超類(lèi)的方法：

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中構造函數法創(chuàng )建類(lèi)

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

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

function Person( first, last) {

  this.firstName = first; 

  this.lastName = last; 

}

這里的this指向新創(chuàng )建的對象。

在原型中定義實(shí)例方法：

Person.prototype.toString = function () {

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

}

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

Person.checkLastName = function (ln) {

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

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

  }

}

定義靜態(tài)屬性：

Person.instances = {};

定義子類(lèi)并增加屬性：

function Student( first, last, studNo) {

  // invoke superclass constructor

  Person.call( this, first, last);

  // define and assign additional properties

  this.studNo = studNo;  

}

通過(guò)Person.call( this, …) 來(lái)調用基類(lèi)的構造函數。

將子類(lèi)的原型鏈改為基類(lèi)的原型鏈，以實(shí)現實(shí)例方法的繼承（構造函數得改回來(lái)）：

// Student inherits from Person

Student.prototype = Object.create( 

    Person.prototype);

// adjust the subtype's constructor property

Student.prototype.constructor = Student;

通過(guò)Object.create( Person.prototype) 我們基于 Person.prototype創(chuàng )建了一個(gè)新的對象原型。

定義覆蓋基類(lèi)方法的子類(lèi)方法：

Student.prototype.toString = function () {

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

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

};

然后通過(guò)new關(guān)鍵字來(lái)實(shí)例化一個(gè)類(lèi)

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

JavaScript的prototype

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

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

每個(gè)對象都有個(gè)constructor屬性，其指向的是創(chuàng )建當前對象的構造函數。