JavaScript 10分鐘入門

2016/03/28 來源：趣IT

簡介

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

1. 修飾網頁

• 生成HTML和CSS

• 生成動態HTML內容

• 生成一些特效

提供用戶交互接口

• 生成用戶交互組件

• 驗證用戶輸入

• 自動填充表單

能夠讀取本地或者遠程數據的前端應用程式，例如

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

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

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

此篇博文，引自《Building Front-End Web Apps with Plain 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 類型測試和轉換

👁 Image
...

變量作用域

在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（也稱為「關聯數組」，「詞典」或其他語言的「哈希表」)var 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是一個比較成熟的庫用來實現工廠方法，它有許多優點。（基於構造的方法有一定的性能優勢）

👁 Image
...

在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!"); } }

定義靜態屬性：

定義子類並增加屬性：

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屬性，其指向的是創建當前對象的構造函數。

👁 Image
...

工廠模式創建類

在這種方法中，我們定義了一個JS對象Person,並在其內部定義了一個create方法用來調用Object.create來創建類。

var Person = { name: "Person", properties: { firstName: {range:"NonEmptyString", label:"First name", writable: true, enumerable: true}, lastName: {range:"NonEmptyString", label:"Last name", writable: true, enumerable: true} }, methods: { getFullName: function { return this.firstName +" "+ this.lastName; } }, create: function (slots) { // create object var obj = Object.create( this.methods, this.properties); // add special property for *direct type* of object Object.defineProperty( obj, "type", {value: this, writable: false, enumerable: true}); // initialize object Object.keys( slots).forEach( function (prop) { if (prop in this.properties) obj[prop] = slots[prop]; }) return obj; } };

這樣，我們就有了一個Person的工廠類，通過調用create方法來實例化對象。

var pers1 = Person.create( {firstName:"Tom", lastName:"Smith"});

點擊文章右上方的圖標，分享到「朋友圈」你的分享會讓精彩傳播給更多的人。

點擊左下角閱讀原文查看更多長知識文章！

免責聲明：本文內容來源于趣IT，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。