學(xué)習(xí)目標(biāo):

• 理解面向?qū)ο箝_發(fā)思想
• 掌握 JavaScript 面向?qū)ο箝_發(fā)相關(guān)模式
• 掌握在 JavaScript 中使用正則表達(dá)式

typora-copy-images-to media

JavaScript 高級

<img src="./media/Unofficial_JavaScript_logo_2.svg.png" width="400" alt="">

目標(biāo)

• 理解面向?qū)ο箝_發(fā)思想
• 掌握 JavaScript 面向?qū)ο箝_發(fā)相關(guān)模式
• 掌握在 JavaScript 中使用正則表達(dá)式

案例演示

• 貪吃蛇

回顧

由于 JavaScript 高級還是針對 JavaScript 語言本身的一個進(jìn)階學(xué)習(xí)，所以在開始之前我們先對以前所學(xué)過的 JavaScript 相關(guān)知識點做一個快速復(fù)習(xí)總結(jié)。

重新介紹 JavaScript

JavaScript 是什么

• 解析執(zhí)行：輕量級解釋型的

• 語言特點：動態(tài)，頭等函數(shù) (First-class Function)

  • 又稱函數(shù)是 JavaScript 中的一等公民

• 執(zhí)行環(huán)境：在宿主環(huán)境（host environment）下運行，瀏覽器是最常見的 JavaScript 宿主環(huán)境

  • 但是在很多非瀏覽器環(huán)境中也使用 JavaScript ，例如 node.js

  MDN-JavaScript

JavaScript 的組成

• ECMAScript - 語法規(guī)范
  • 變量、數(shù)據(jù)類型、類型轉(zhuǎn)換、操作符
  • 流程控制語句：判斷、循環(huán)語句
  • 數(shù)組、函數(shù)、作用域、預(yù)解析
  • 對象、屬性、方法、簡單類型和復(fù)雜類型的區(qū)別
  • 內(nèi)置對象：Math、Date、Array，基本包裝類型String、Number、Boolean
• Web APIs
  • BOM
    • onload頁面加載事件，window頂級對象
    • 定時器
    • location、history
  • DOM
    • 獲取頁面元素，注冊事件
    • 屬性操作，樣式操作
    • 節(jié)點屬性，節(jié)點層級
    • 動態(tài)創(chuàng)建元素
    • 事件：注冊事件的方式、事件的三個階段、事件對象

JavaScript 可以做什么

阿特伍德定律：

Any application that can be written in JavaScript, will eventually be written in JavaScript.

任何可以用JavaScript來寫的應(yīng)用，最終都將用JavaScript來寫

阿特伍德 stackoverflow的創(chuàng)始人之一

• 知乎 - JavaScript 能做什么，該做什么？
• 最流行的編程語言 JavaScript 能做什么？

瀏覽器是如何工作的

參考鏈接

User Interface  用戶界面，我們所看到的瀏覽器
Browser engine  瀏覽器引擎，用來查詢和操作渲染引擎
*Rendering engine 用來顯示請求的內(nèi)容，負(fù)責(zé)解析HTML、CSS，并把解析的內(nèi)容顯示出來
Networking   網(wǎng)絡(luò)，負(fù)責(zé)發(fā)送網(wǎng)絡(luò)請求
*JavaScript Interpreter(解析者)   JavaScript解析器，負(fù)責(zé)執(zhí)行JavaScript的代碼
UI Backend   UI后端，用來繪制類似組合框和彈出窗口
Data Persistence(持久化)  數(shù)據(jù)持久化，數(shù)據(jù)存儲  cookie、HTML5中的sessionStorage

JavaScript 執(zhí)行過程

JavaScript 運行分為兩個階段：

• 預(yù)解析
  • 全局預(yù)解析（所有變量和函數(shù)聲明都會提前；同名的函數(shù)和變量函數(shù)的優(yōu)先級高）
  • 函數(shù)內(nèi)部預(yù)解析（所有的變量、函數(shù)和形參都會參與預(yù)解析）
    • 函數(shù)
    • 形參
    • 普通變量
• 執(zhí)行

先預(yù)解析全局作用域，然后執(zhí)行全局作用域中的代碼，
在執(zhí)行全局代碼的過程中遇到函數(shù)調(diào)用就會先進(jìn)行函數(shù)預(yù)解析，然后再執(zhí)行函數(shù)內(nèi)代碼。

JavaScript 面向?qū)ο缶幊?/h2>

<img src="./media/mxdxkf.png" width="400" alt="">

面向?qū)ο蠼榻B

什么是對象

Everything is object （萬物皆對象）

<img src="./media/20160823024542444.jpg" alt="">

對象到底是什么，我們可以從兩次層次來理解。

(1) 對象是單個事物的抽象。

一本書、一輛汽車、一個人都可以是對象，一個數(shù)據(jù)庫、一張網(wǎng)頁、一個與遠(yuǎn)程服務(wù)器的連接也可以是對象。當(dāng)實物被抽象成對象，實物之間的關(guān)系就變成了對象之間的關(guān)系，從而就可以模擬現(xiàn)實情況，針對對象進(jìn)行編程。

(2) 對象是一個容器，封裝了屬性（property）和方法（method）。

屬性是對象的狀態(tài)，方法是對象的行為（完成某種任務(wù)）。比如，我們可以把動物抽象為animal對象，使用“屬性”記錄具體是那一種動物，使用“方法”表示動物的某種行為（奔跑、捕獵、休息等等）。

在實際開發(fā)中，對象是一個抽象的概念，可以將其簡單理解為：數(shù)據(jù)集或功能集。

ECMAScript-262 把對象定義為：無序?qū)傩缘募?，其屬性可以包含基本值、對象或者函?shù)。
嚴(yán)格來講，這就相當(dāng)于說對象是一組沒有特定順序的值。對象的每個屬性或方法都有一個名字，而每個名字都映射到一個值。

提示：每個對象都是基于一個引用類型創(chuàng)建的，這些類型可以是系統(tǒng)內(nèi)置的原生類型，也可以是開發(fā)人員自定義的類型。

什么是面向?qū)ο?/h4>

面向?qū)ο蟛皇切碌臇|西，它只是過程式代碼的一種高度封裝，目的在于提高代碼的開發(fā)效率和可維 護性。

<img src="./media/664ba37eeee9f4623c06c066867f1d38_r.jpg" width="400" alt="">

面向?qū)ο缶幊?—— Object Oriented Programming，簡稱 OOP ，是一種編程開發(fā)思想。
它將真實世界各種復(fù)雜的關(guān)系，抽象為一個個對象，然后由對象之間的分工與合作，完成對真實世界的模擬。

在面向?qū)ο蟪绦蜷_發(fā)思想中，每一個對象都是功能中心，具有明確分工，可以完成接受信息、處理數(shù)據(jù)、發(fā)出信息等任務(wù)。
因此，面向?qū)ο缶幊叹哂徐`活、代碼可復(fù)用、高度模塊化等特點，容易維護和開發(fā)，比起由一系列函數(shù)或指令組成的傳統(tǒng)的過程式編程（procedural programming），更適合多人合作的大型軟件項目。

面向?qū)ο笈c面向過程：

• 面向過程就是親力親為，事無巨細(xì)，面面俱到，步步緊跟，有條不紊
• 面向?qū)ο缶褪钦乙粋€對象，指揮得結(jié)果
• 面向?qū)ο髮?zhí)行者轉(zhuǎn)變成指揮者
• 面向?qū)ο蟛皇敲嫦蜻^程的替代，而是面向過程的封裝

面向?qū)ο蟮奶匦裕?/p>

• 封裝性
• 繼承性
• [多態(tài)性]抽象

擴展閱讀：

• 維基百科 - 面向?qū)ο蟪绦蛟O(shè)計
• 知乎：如何用一句話說明什么是面向?qū)ο笏枷耄?/a>
• 知乎：什么是面向?qū)ο缶幊趟枷耄?/a>

程序中面向?qū)ο蟮幕倔w現(xiàn)

在 JavaScript 中，所有數(shù)據(jù)類型都可以視為對象，當(dāng)然也可以自定義對象。
自定義的對象數(shù)據(jù)類型就是面向?qū)ο笾械念悾?Class ）的概念。

我們以一個例子來說明面向過程和面向?qū)ο笤诔绦蛄鞒躺系牟煌帯?/p>

假設(shè)我們要處理學(xué)生的成績表，為了表示一個學(xué)生的成績，面向過程的程序可以用一個對象表示：

var std1 = { name: 'Michael', score: 98 }
var std2 = { name: 'Bob', score: 81 }

而處理學(xué)生成績可以通過函數(shù)實現(xiàn)，比如打印學(xué)生的成績：

function printScore (student) {
  console.log('姓名：' + student.name + '  ' + '成績：' + student.score)
}

如果采用面向?qū)ο蟮某绦蛟O(shè)計思想，我們首選思考的不是程序的執(zhí)行流程，
而是 Student 這種數(shù)據(jù)類型應(yīng)該被視為一個對象，這個對象擁有 name 和 score 這兩個屬性（Property）。
如果要打印一個學(xué)生的成績，首先必須創(chuàng)建出這個學(xué)生對應(yīng)的對象，然后，給對象發(fā)一個 printScore 消息，讓對象自己把自己的數(shù)據(jù)打印出來。

抽象數(shù)據(jù)行為模板（Class）：

function Student(name, score) {
  this.name = name;
  this.score = score;
  this.printScore = function() {
    console.log('姓名：' + this.name + '  ' + '成績：' + this.score);
  }
}

根據(jù)模板創(chuàng)建具體實例對象（Instance）：

var std1 = new Student('Michael', 98)
var std2 = new Student('Bob', 81)

實例對象具有自己的具體行為（給對象發(fā)消息）：

std1.printScore() // => 姓名：Michael  成績：98
std2.printScore() // => 姓名：Bob  成績 81

面向?qū)ο蟮脑O(shè)計思想是從自然界中來的，因為在自然界中，類（Class）和實例（Instance）的概念是很自然的。
Class 是一種抽象概念，比如我們定義的 Class——Student ，是指學(xué)生這個概念，
而實例（Instance）則是一個個具體的 Student ，比如， Michael 和 Bob 是兩個具體的 Student 。

所以，面向?qū)ο蟮脑O(shè)計思想是：

• 抽象出 Class(構(gòu)造函數(shù))
• 根據(jù) Class(構(gòu)造函數(shù)) 創(chuàng)建 Instance
• 指揮 Instance 得結(jié)果

面向?qū)ο蟮某橄蟪潭扔直群瘮?shù)要高，因為一個 Class 既包含數(shù)據(jù)，又包含操作數(shù)據(jù)的方法。

創(chuàng)建對象

簡單方式

我們可以直接通過 new Object() 創(chuàng)建：

var person = new Object()
person.name = 'Jack'
person.age = 18

person.sayName = function () {
  console.log(this.name)
}

每次創(chuàng)建通過 new Object() 比較麻煩，所以可以通過它的簡寫形式對象字面量來創(chuàng)建：

var person = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

對于上面的寫法固然沒有問題，但是假如我們要生成兩個 person 實例對象呢？

var person1 = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

var person2 = {
  name: 'Mike',
  age: 16,
  sayName: function () {
    console.log(this.name)
  }
}

通過上面的代碼我們不難看出，這樣寫的代碼太過冗余，重復(fù)性太高。

簡單方式的改進(jìn)：工廠函數(shù)

我們可以寫一個函數(shù)，解決代碼重復(fù)問題：

function createPerson (name, age) {
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}

然后生成實例對象：

var p1 = createPerson('Jack', 18)
var p2 = createPerson('Mike', 18)

這樣封裝確實爽多了，通過工廠模式我們解決了創(chuàng)建多個相似對象代碼冗余的問題，
但卻沒有解決對象識別的問題（即怎樣知道一個對象的類型）。

構(gòu)造函數(shù)

內(nèi)容引導(dǎo)：

• 構(gòu)造函數(shù)語法
• 分析構(gòu)造函數(shù)
• 構(gòu)造函數(shù)和實例對象的關(guān)系
  • 實例的 constructor 屬性
  • instanceof 操作符
• 普通函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用的區(qū)別
• 構(gòu)造函數(shù)的返回值
• 構(gòu)造函數(shù)的問題

更優(yōu)雅的工廠函數(shù)：構(gòu)造函數(shù)

一種更優(yōu)雅的工廠函數(shù)就是下面這樣，構(gòu)造函數(shù)：

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}

var p1 = new Person('Jack', 18)
p1.sayName() // => Jack

var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

解析構(gòu)造函數(shù)代碼的執(zhí)行

在上面的示例中，Person() 函數(shù)取代了 createPerson() 函數(shù)，但是實現(xiàn)效果是一樣的。
這是為什么呢？

我們注意到，Person() 中的代碼與 createPerson() 有以下幾點不同之處：

• 沒有顯示的創(chuàng)建對象
• 直接將屬性和方法賦給了 this 對象
• 沒有 return 語句
• 函數(shù)名使用的是大寫的 Person

而要創(chuàng)建 Person 實例，則必須使用 new 操作符。
以這種方式調(diào)用構(gòu)造函數(shù)會經(jīng)歷以下 4 個步驟：

1. 創(chuàng)建一個新對象
2. 將構(gòu)造函數(shù)的作用域賦給新對象（因此 this 就指向了這個新對象）
3. 執(zhí)行構(gòu)造函數(shù)中的代碼
4. 返回新對象

下面是具體的偽代碼：

function Person (name, age) {
  // 當(dāng)使用 new 操作符調(diào)用 Person() 的時候，實際上這里會先創(chuàng)建一個對象
  // var instance = {}
  // 然后讓內(nèi)部的 this 指向 instance 對象
  // this = instance
  // 接下來所有針對 this 的操作實際上操作的就是 instance

  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }

  // 在函數(shù)的結(jié)尾處會將 this 返回，也就是 instance
  // return this
}

構(gòu)造函數(shù)和實例對象的關(guān)系

使用構(gòu)造函數(shù)的好處不僅僅在于代碼的簡潔性，更重要的是我們可以識別對象的具體類型了。
在每一個實例對象中同時有一個 constructor 屬性，該屬性指向創(chuàng)建該實例的構(gòu)造函數(shù)：

console.log(p1.constructor === Person) // => true
console.log(p2.constructor === Person) // => true
console.log(p1.constructor === p2.constructor) // => true

對象的 constructor 屬性最初是用來標(biāo)識對象類型的，
但是，如果要檢測對象的類型，還是使用 instanceof 操作符更可靠一些：

console.log(p1 instanceof Person) // => true
console.log(p2 instanceof Person) // => true

總結(jié)：

• 構(gòu)造函數(shù)是根據(jù)具體的事物抽象出來的抽象模板
• 實例對象是根據(jù)抽象的構(gòu)造函數(shù)模板得到的具體實例對象
• 每一個實例對象都具有一個 constructor 屬性，指向創(chuàng)建該實例的構(gòu)造函數(shù)
  • 注意： constructor 是實例的屬性的說法不嚴(yán)謹(jǐn)，具體后面的原型會講到
• 可以通過實例的 constructor 屬性判斷實例和構(gòu)造函數(shù)之間的關(guān)系
  • 注意：這種方式不嚴(yán)謹(jǐn)，推薦使用 instanceof 操作符，后面學(xué)原型會解釋為什么

構(gòu)造函數(shù)的問題

使用構(gòu)造函數(shù)帶來的最大的好處就是創(chuàng)建對象更方便了，但是其本身也存在一個浪費內(nèi)存的問題：

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = function () {
    console.log('hello ' + this.name)
  }
}

var p1 = new Person('Tom', 18)
var p2 = new Person('Jack', 16)

在該示例中，從表面上好像沒什么問題，但是實際上這樣做，有一個很大的弊端。
那就是對于每一個實例對象，type 和 sayHello 都是一模一樣的內(nèi)容，
每一次生成一個實例，都必須為重復(fù)的內(nèi)容，多占用一些內(nèi)存，如果實例對象很多，會造成極大的內(nèi)存浪費。

console.log(p1.sayHello === p2.sayHello) // => false

對于這種問題我們可以把需要共享的函數(shù)定義到構(gòu)造函數(shù)外部：

function sayHello = function () {
  console.log('hello ' + this.name)
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = sayHello
}

var p1 = new Person('Top', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true

這樣確實可以了，但是如果有多個需要共享的函數(shù)的話就會造成全局命名空間沖突的問題。

你肯定想到了可以把多個函數(shù)放到一個對象中用來避免全局命名空間沖突的問題：

var fns = {
  sayHello: function () {
    console.log('hello ' + this.name)
  },
  sayAge: function () {
    console.log(this.age)
  }
}

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.sayHello = fns.sayHello
  this.sayAge = fns.sayAge
}

var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)

console.log(p1.sayHello === p2.sayHello) // => true
console.log(p1.sayAge === p2.sayAge) // => true

至此，我們利用自己的方式基本上解決了構(gòu)造函數(shù)的內(nèi)存浪費問題。
但是代碼看起來還是那么的格格不入，那有沒有更好的方式呢？

小結(jié)

• 構(gòu)造函數(shù)語法
• 分析構(gòu)造函數(shù)
• 構(gòu)造函數(shù)和實例對象的關(guān)系
  • 實例的 constructor 屬性
  • instanceof 操作符
• 構(gòu)造函數(shù)的問題

原型

內(nèi)容引導(dǎo)：

• 使用 prototype 原型對象解決構(gòu)造函數(shù)的問題
• 分析 構(gòu)造函數(shù)、prototype 原型對象、實例對象 三者之間的關(guān)系
• 屬性成員搜索原則：原型鏈
• 實例對象讀寫原型對象中的成員
• 原型對象的簡寫形式
• 原生對象的原型
  • Object
  • Array
  • String
  • ...
• 原型對象的問題
• 構(gòu)造的函數(shù)和原型對象使用建議

更好的解決方案： prototype

JavaScript 規(guī)定，每一個構(gòu)造函數(shù)都有一個 prototype 屬性，指向另一個對象。
這個對象的所有屬性和方法，都會被構(gòu)造函數(shù)的所擁有。

這也就意味著，我們可以把所有對象實例需要共享的屬性和方法直接定義在 prototype 對象上。

function Person (name, age) {
  this.name = name
  this.age = age
}

console.log(Person.prototype)

Person.prototype.type = 'human'

Person.prototype.sayName = function () {
  console.log(this.name)
}

var p1 = new Person(...)
var p2 = new Person(...)

console.log(p1.sayName === p2.sayName) // => true

這時所有實例的 type 屬性和 sayName() 方法，
其實都是同一個內(nèi)存地址，指向 prototype 對象，因此就提高了運行效率。

構(gòu)造函數(shù)、實例、原型三者之間的關(guān)系

<img src="./media/構(gòu)造函數(shù)-實例-原型之間的關(guān)系.png" alt="">

任何函數(shù)都具有一個 prototype 屬性，該屬性是一個對象。

function F () {}
console.log(F.prototype) // => object

F.prototype.sayHi = function () {
  console.log('hi!')
}

構(gòu)造函數(shù)的 prototype 對象默認(rèn)都有一個 constructor 屬性，指向 prototype 對象所在函數(shù)。

console.log(F.prototype.constructor === F) // => true

通過構(gòu)造函數(shù)得到的實例對象內(nèi)部會包含一個指向構(gòu)造函數(shù)的 prototype 對象的指針 __proto__。

var instance = new F()
console.log(instance.__proto__ === F.prototype) // => true

<p class="tip">
__proto__ 是非標(biāo)準(zhǔn)屬性。
</p>

實例對象可以直接訪問原型對象成員。

instance.sayHi() // => hi!

總結(jié)：

• 任何函數(shù)都具有一個 prototype 屬性，該屬性是一個對象
• 構(gòu)造函數(shù)的 prototype 對象默認(rèn)都有一個 constructor 屬性，指向 prototype 對象所在函數(shù)
• 通過構(gòu)造函數(shù)得到的實例對象內(nèi)部會包含一個指向構(gòu)造函數(shù)的 prototype 對象的指針 __proto__
• 所有實例都直接或間接繼承了原型對象的成員

屬性成員的搜索原則：原型鏈

了解了 構(gòu)造函數(shù)-實例-原型對象 三者之間的關(guān)系后，接下來我們來解釋一下為什么實例對象可以訪問原型對象中的成員。

每當(dāng)代碼讀取某個對象的某個屬性時，都會執(zhí)行一次搜索，目標(biāo)是具有給定名字的屬性

• 搜索首先從對象實例本身開始
• 如果在實例中找到了具有給定名字的屬性，則返回該屬性的值
• 如果沒有找到，則繼續(xù)搜索指針指向的原型對象，在原型對象中查找具有給定名字的屬性
• 如果在原型對象中找到了這個屬性，則返回該屬性的值

也就是說，在我們調(diào)用 person1.sayName() 的時候，會先后執(zhí)行兩次搜索：

• 首先，解析器會問：“實例 person1 有 sayName 屬性嗎？”答：“沒有。
• ”然后，它繼續(xù)搜索，再問：“ person1 的原型有 sayName 屬性嗎？”答：“有。
• ”于是，它就讀取那個保存在原型對象中的函數(shù)。
• 當(dāng)我們調(diào)用 person2.sayName() 時，將會重現(xiàn)相同的搜索過程，得到相同的結(jié)果。

而這正是多個對象實例共享原型所保存的屬性和方法的基本原理。

總結(jié)：

• 先在自己身上找，找到即返回
• 自己身上找不到，則沿著原型鏈向上查找，找到即返回
• 如果一直到原型鏈的末端還沒有找到，則返回 undefined

實例對象讀寫原型對象成員

讀?。?/p>

• 先在自己身上找，找到即返回
• 自己身上找不到，則沿著原型鏈向上查找，找到即返回
• 如果一直到原型鏈的末端還沒有找到，則返回 undefined

值類型成員寫入（實例對象.值類型成員 = xx）：

• 當(dāng)實例期望重寫原型對象中的某個普通數(shù)據(jù)成員時實際上會把該成員添加到自己身上
• 也就是說該行為實際上會屏蔽掉對原型對象成員的訪問

引用類型成員寫入（實例對象.引用類型成員 = xx）：

• 同上

復(fù)雜類型修改（實例對象.成員.xx = xx）：

• 同樣會先在自己身上找該成員，如果自己身上找到則直接修改
• 如果自己身上找不到，則沿著原型鏈繼續(xù)查找，如果找到則修改
• 如果一直到原型鏈的末端還沒有找到該成員，則報錯（實例對象.undefined.xx = xx）

更簡單的原型語法

我們注意到，前面例子中每添加一個屬性和方法就要敲一遍 Person.prototype 。
為減少不必要的輸入，更常見的做法是用一個包含所有屬性和方法的對象字面量來重寫整個原型對象：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '歲了')
  }
}

在該示例中，我們將 Person.prototype 重置到了一個新的對象。
這樣做的好處就是為 Person.prototype 添加成員簡單了，但是也會帶來一個問題，那就是原型對象丟失了 constructor 成員。

所以，我們?yōu)榱吮３?constructor 的指向正確，建議的寫法是：

function Person (name, age) {
  this.name = name
  this.age = age
}

Person.prototype = {
  constructor: Person, // => 手動將 constructor 指向正確的構(gòu)造函數(shù)
  type: 'human',
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '歲了')
  }
}

原生對象的原型

<p class="tip">
所有函數(shù)都有 prototype 屬性對象。
</p>

• Object.prototype
• Function.prototype
• Array.prototype
• String.prototype
• Number.prototype
• Date.prototype
• ...

練習(xí)：為數(shù)組對象和字符串對象擴展原型方法。

原型對象使用建議

• 私有成員（一般就是非函數(shù)成員）放到構(gòu)造函數(shù)中
• 共享成員（一般就是函數(shù)）放到原型對象中
• 如果重置了 prototype 記得修正 constructor 的指向

案例：隨機方塊

---

面向?qū)ο笥螒虬咐贺澇陨?/h2>

案例介紹

游戲演示

演示：貪吃蛇

案例目標(biāo)

游戲的目的是用來體會js高級語法的使用 不需要具備抽象對象的能力，使用面向?qū)ο蟮姆绞椒治鰡栴}，需要一個漫長的過程。

功能實現(xiàn)

搭建頁面

放一個容器盛放游戲場景 div#map，設(shè)置樣式

#map {
  width: 800px;
  height: 600px;
  background-color: #ccc;
  position: relative;
}

分析對象

• 游戲?qū)ο?/li>
• 蛇對象
• 食物對象

創(chuàng)建食物對象

• Food

  • 屬性

    • x
    • y
    • width
    • height
    • color

  • 方法

    • render 隨機創(chuàng)建一個食物對象，并輸出到map上

• 創(chuàng)建Food的構(gòu)造函數(shù)，并設(shè)置屬性

var position = 'absolute';
var elements = [];
function Food(x, y, width, height, color) {
  this.x = x || 0;
  this.y = y || 0;
  // 食物的寬度和高度(像素)
  this.width = width || 20;
  this.height = height || 20;
  // 食物的顏色
  this.color = color || 'green';
}

• 通過原型設(shè)置render方法，實現(xiàn)隨機產(chǎn)生食物對象，并渲染到map上

Food.prototype.render = function (map) {
  // 隨機食物的位置，map.寬度/food.寬度，總共有多少分food的寬度，隨機一下。然后再乘以food的寬度
  this.x = parseInt(Math.random() * map.offsetWidth / this.width) * this.width;
  this.y = parseInt(Math.random() * map.offsetHeight / this.height) * this.height;

  // 動態(tài)創(chuàng)建食物對應(yīng)的div
  var div = document.createElement('div');
  map.appendChild(div);
  div.style.position = position;
  div.style.left = this.x + 'px';
  div.style.top = this.y + 'px';
  div.style.width = this.width + 'px';
  div.style.height = this.height + 'px';
  div.style.backgroundColor = this.color;
  elements.push(div);
}

• 通過自調(diào)用函數(shù)，進(jìn)行封裝，通過window暴露Food對象

window.Food = Food;

創(chuàng)建蛇對象

• Snake

• 屬性

  • width 蛇節(jié)的寬度 默認(rèn)20
  • height 蛇節(jié)的高度 默認(rèn)20
  • body 數(shù)組，蛇的頭部和身體，第一個位置是蛇頭
  • direction 蛇運動的方向 默認(rèn)right 可以是 left top bottom

• 方法

  • render 把蛇渲染到map上

• Snake構(gòu)造函數(shù)

var position = 'absolute';
var elements = [];
function Snake(width, height, direction) {
  // 設(shè)置每一個蛇節(jié)的寬度
  this.width = width || 20;
  this.height = height || 20;
  // 蛇的每一部分, 第一部分是蛇頭
  this.body = [
    {x: 3, y: 2, color: 'red'},
    {x: 2, y: 2, color: 'red'},
    {x: 1, y: 2, color: 'red'}
  ];
  this.direction = direction || 'right';
}

• render方法

Snake.prototype.render = function(map) {
  for(var i = 0; i < this.body.length; i++) {
    var obj = this.body[i];
    var div = document.createElement('div');
    map.appendChild(div);
    div.style.left = obj.x * this.width + 'px';
    div.style.top = obj.y * this.height + 'px';
    div.style.position = position;
    div.style.backgroundColor = obj.color;
    div.style.width = this.width + 'px';
    div.style.height = this.height + 'px';
  }
}

• 在自調(diào)用函數(shù)中暴露Snake對象

window.Snake = Snake;

創(chuàng)建游戲?qū)ο?/h4>

游戲?qū)ο?，用來管理游戲中的所有對象和開始游戲

• Game

  • 屬性

    • food

    • snake

    • map

  • 方法

    • start 開始游戲（繪制所有游戲?qū)ο螅?/li>

• 構(gòu)造函數(shù)

function Game(map) {
  this.food = new Food();
  this.snake = new Snake();
  this.map = map;
}

• 開始游戲，渲染食物對象和蛇對象

Game.prototype.start = function () {
  this.food.render(this.map);
  this.snake.render(this.map);
}

游戲的邏輯

寫蛇的move方法

• 在蛇對象(snake.js)中，在Snake的原型上新增move方法

1. 讓蛇移動起來，把蛇身體的每一部分往前移動一下
2. 蛇頭部分根據(jù)不同的方向決定 往哪里移動

Snake.prototype.move = function (food, map) {
  // 讓蛇身體的每一部分往前移動一下
  var i = this.body.length - 1;
  for(; i > 0; i--) {
    this.body[i].x = this.body[i - 1].x;
    this.body[i].y = this.body[i - 1].y;
  }
  // 根據(jù)移動的方向，決定蛇頭如何處理
  switch(this.direction) {
    case 'left': 
      this.body[0].x -= 1;
      break;
    case 'right':
      this.body[0].x += 1;
      break;
    case 'top':
      this.body[0].y -= 1;
      break;
    case 'bottom':
      this.body[0].y += 1;
      break;
  }
}

• 在game中測試

this.snake.move(this.food, this.map);
this.snake.render(this.map);

讓蛇自己動起來

• 私有方法

  什么是私有方法？
    不能被外部訪問的方法
  如何創(chuàng)建私有方法？
    使用自調(diào)用函數(shù)包裹
  

• 在game.js中 添加runSnake的私有方法，開啟定時器調(diào)用蛇的move和render方法，讓蛇動起來

• 判斷蛇是否撞墻

function runSnake() {
  var timerId = setInterval(function() {
    this.snake.move(this.food, this.map);
    // 在渲染前，刪除之前的蛇
    this.snake.render(this.map);

    // 判斷蛇是否撞墻
    var maxX = this.map.offsetWidth / this.snake.width;
    var maxY = this.map.offsetHeight / this.snake.height;
    var headX = this.snake.body[0].x;
    var headY = this.snake.body[0].y;
    if (headX < 0 || headX >= maxX) {
      clearInterval(timerId);
      alert('Game Over');
    }

    if (headY < 0 || headY >= maxY) {
      clearInterval(timerId);
      alert('Game Over');
    }

  }.bind(that), 150);
}

• 在snake中添加刪除蛇的私有方法，在render中調(diào)用

function remove() {
  // 刪除渲染的蛇
  var i = elements.length - 1;
  for(; i >= 0; i--) {
    // 刪除頁面上渲染的蛇
    elements[i].parentNode.removeChild(elements[i]);
    // 刪除elements數(shù)組中的元素
    elements.splice(i, 1);
  }
}

• 在game中通過鍵盤控制蛇的移動方向

function bindKey() {
  document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
      case 37:
        // left
        this.snake.direction = 'left';
        break;
      case 38:
        // top
        this.snake.direction = 'top';
        break;
      case 39:
        // right
        this.snake.direction = 'right';
        break;
      case 40:
        // bottom
        this.snake.direction = 'bottom';
        break;
    }
  }.bind(that), false);
}

• 在start方法中調(diào)用

bindKey();

判斷蛇是否吃到食物

// 在Snake的move方法中

// 在移動的過程中判斷蛇是否吃到食物
// 如果蛇頭和食物的位置重合代表吃到食物
// 食物的坐標(biāo)是像素，蛇的坐標(biāo)是幾個寬度，進(jìn)行轉(zhuǎn)換
var headX = this.body[0].x * this.width;
var headY = this.body[0].y * this.height;
if (headX === food.x && headY === food.y) {
  // 吃到食物，往蛇節(jié)的最后加一節(jié)
  var last = this.body[this.body.length - 1];
  this.body.push({
    x: last.x,
    y: last.y,
    color: last.color
  })
  // 把現(xiàn)在的食物對象刪除，并重新隨機渲染一個食物對象
  food.render(map);
}

其它處理

把html中的js代碼放到index.js中

避免html中出現(xiàn)js代碼

自調(diào)用函數(shù)的參數(shù)

(function (window, undefined) {
  var document = window.document;

}(window, undefined))

• 傳入window對象

將來代碼壓縮的時候，可以吧 function (window) 壓縮成 function (w)

• 傳入undefined

在將來會看到別人寫的代碼中會把undefined作為函數(shù)的參數(shù)(當(dāng)前案例沒有使用)
因為在有的老版本的瀏覽器中 undefined可以被重新賦值，防止undefined 被重新賦值

整理代碼

現(xiàn)在的代碼結(jié)構(gòu)清晰，誰出問題就找到對應(yīng)的js文件即可。
通過自調(diào)用函數(shù)，已經(jīng)防止了變量命名污染的問題

但是，由于js文件數(shù)較多，需要在頁面上引用，會產(chǎn)生文件依賴的問題(先引入那個js，再引入哪個js)
將來通過工具把js文件合并并壓縮?，F(xiàn)在手工合并js文件演示

• 問題1

// 如果存在多個自調(diào)用函數(shù)要用分號分割，否則語法錯誤
// 下面代碼會報錯
(function () {
}())

(function () {
}())
// 所以代碼規(guī)范中會建議在自調(diào)用函數(shù)之前加上分號
// 下面代碼沒有問題
;(function () {
}())

;(function () {
}())

• 問題2

// 當(dāng)自調(diào)用函數(shù) 前面有函數(shù)聲明時，會把自調(diào)用函數(shù)作為參數(shù)
// 所以建議自調(diào)用函數(shù)前，加上;
var a = function () {
  alert('11');
}
    
(function () {
  alert('22');
}())

繼承

什么是繼承

• 現(xiàn)實生活中的繼承
• 程序中的繼承

構(gòu)造函數(shù)的屬性繼承：借用構(gòu)造函數(shù)

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

function Student (name, age) {
  // 借用構(gòu)造函數(shù)繼承屬性成員
  Person.call(this, name, age)
}

var s1 = Student('張三', 18)
console.log(s1.type, s1.name, s1.age) // => human 張三 18

構(gòu)造函數(shù)的原型方法繼承：拷貝繼承（for-in）

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// 原型對象拷貝繼承原型對象成員
for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}

var s1 = Student('張三', 18)

s1.sayName() // => hello 張三

另一種繼承方式：原型繼承

function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}

Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}

function Student (name, age) {
  Person.call(this, name, age)
}

// 利用原型的特性實現(xiàn)繼承
Student.prototype = new Person()

var s1 = Student('張三', 18)

console.log(s1.type) // => human

s1.sayName() // => hello 張三

函數(shù)進(jìn)階

函數(shù)的定義方式

• 函數(shù)聲明
• 函數(shù)表達(dá)式
• new Function

函數(shù)聲明

function foo () {

}

函數(shù)表達(dá)式

var foo = function () {

}

函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別

• 函數(shù)聲明必須有名字
• 函數(shù)聲明會函數(shù)提升，在預(yù)解析階段就已創(chuàng)建，聲明前后都可以調(diào)用
• 函數(shù)表達(dá)式類似于變量賦值
• 函數(shù)表達(dá)式可以沒有名字，例如匿名函數(shù)
• 函數(shù)表達(dá)式?jīng)]有變量提升，在執(zhí)行階段創(chuàng)建，必須在表達(dá)式執(zhí)行之后才可以調(diào)用

下面是一個根據(jù)條件定義函數(shù)的例子：

if (true) {
  function f () {
    console.log(1)
  }
} else {
  function f () {
    console.log(2)
  }
}

以上代碼執(zhí)行結(jié)果在不同瀏覽器中結(jié)果不一致。

不過我們可以使用函數(shù)表達(dá)式解決上面的問題：

var f

if (true) {
  f = function () {
    console.log(1)
  }
} else {
  f = function () {
    console.log(2)
  }
}

函數(shù)的調(diào)用方式

• 普通函數(shù)
• 構(gòu)造函數(shù)
• 對象方法

函數(shù)內(nèi) this 指向的不同場景

函數(shù)的調(diào)用方式?jīng)Q定了 this 指向的不同：

這就是對函數(shù)內(nèi)部 this 指向的基本整理，寫代碼寫多了自然而然就熟悉了。

函數(shù)也是對象

• 所有函數(shù)都是 Function 的實例

call、apply、bind

那了解了函數(shù) this 指向的不同場景之后，我們知道有些情況下我們?yōu)榱耸褂媚撤N特定環(huán)境的 this 引用，
這時候時候我們就需要采用一些特殊手段來處理了，例如我們經(jīng)常在定時器外部備份 this 引用，然后在定時器函數(shù)內(nèi)部使用外部 this 的引用。
然而實際上對于這種做法我們的 JavaScript 為我們專門提供了一些函數(shù)方法用來幫我們更優(yōu)雅的處理函數(shù)內(nèi)部 this 指向問題。
這就是接下來我們要學(xué)習(xí)的 call、apply、bind 三個函數(shù)方法。

call

call() 方法調(diào)用一個函數(shù), 其具有一個指定的 this 值和分別地提供的參數(shù)(參數(shù)的列表)。

<p class="danger">
注意：該方法的作用和 apply() 方法類似，只有一個區(qū)別，就是 call() 方法接受的是若干個參數(shù)的列表，而 apply() 方法接受的是一個包含多個參數(shù)的數(shù)組。
</p>

語法：

fun.call(thisArg[, arg1[, arg2[, ...]]])

參數(shù)：

• thisArg

  • 在 fun 函數(shù)運行時指定的 this 值
  • 如果指定了 null 或者 undefined 則內(nèi)部 this 指向 window

• arg1, arg2, ...

  • 指定的參數(shù)列表

apply

apply() 方法調(diào)用一個函數(shù), 其具有一個指定的 this 值，以及作為一個數(shù)組（或類似數(shù)組的對象）提供的參數(shù)。

<p class="danger">
注意：該方法的作用和 call() 方法類似，只有一個區(qū)別，就是 call() 方法接受的是若干個參數(shù)的列表，而 apply() 方法接受的是一個包含多個參數(shù)的數(shù)組。
</p>

語法：

fun.apply(thisArg, [argsArray])

參數(shù)：

• thisArg
• argsArray

apply() 與 call() 非常相似，不同之處在于提供參數(shù)的方式。
apply() 使用參數(shù)數(shù)組而不是一組參數(shù)列表。例如：

fun.apply(this, ['eat', 'bananas'])

bind

bind() 函數(shù)會創(chuàng)建一個新函數(shù)（稱為綁定函數(shù)），新函數(shù)與被調(diào)函數(shù)（綁定函數(shù)的目標(biāo)函數(shù)）具有相同的函數(shù)體（在 ECMAScript 5 規(guī)范中內(nèi)置的call屬性）。
當(dāng)目標(biāo)函數(shù)被調(diào)用時 this 值綁定到 bind() 的第一個參數(shù)，該參數(shù)不能被重寫。綁定函數(shù)被調(diào)用時，bind() 也接受預(yù)設(shè)的參數(shù)提供給原函數(shù)。
一個綁定函數(shù)也能使用new操作符創(chuàng)建對象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時調(diào)用時的參數(shù)被提供給模擬函數(shù)。

語法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

參數(shù)：

• thisArg

  • 當(dāng)綁定函數(shù)被調(diào)用時，該參數(shù)會作為原函數(shù)運行時的 this 指向。當(dāng)使用new 操作符調(diào)用綁定函數(shù)時，該參數(shù)無效。

• arg1, arg2, ...

  • 當(dāng)綁定函數(shù)被調(diào)用時，這些參數(shù)將置于實參之前傳遞給被綁定的方法。

返回值：

返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。

示例1：

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在這種情況下，"this"指向全局作用域

// 創(chuàng)建一個新函數(shù)，將"this"綁定到module對象
// 新手可能會被全局的x變量和module里的屬性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

示例2：

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function() {
  console.log('I am a beautiful flower with ' +
    this.petalCount + ' petals!');
};

var flower = new LateBloomer();
flower.bloom();  // 一秒鐘后, 調(diào)用'declare'方法

小結(jié)

• call 和 apply 特性一樣

  • 都是用來調(diào)用函數(shù)，而且是立即調(diào)用
  • 但是可以在調(diào)用函數(shù)的同時，通過第一個參數(shù)指定函數(shù)內(nèi)部 this 的指向
  • call 調(diào)用的時候，參數(shù)必須以參數(shù)列表的形式進(jìn)行傳遞，也就是以逗號分隔的方式依次傳遞即可
  • apply 調(diào)用的時候，參數(shù)必須是一個數(shù)組，然后在執(zhí)行的時候，會將數(shù)組內(nèi)部的元素一個一個拿出來，與形參一一對應(yīng)進(jìn)行傳遞
  • 如果第一個參數(shù)指定了 null 或者 undefined 則內(nèi)部 this 指向 window

• bind

  • 可以用來指定內(nèi)部 this 的指向，然后生成一個改變了 this 指向的新的函數(shù)
  • 它和 call、apply 最大的區(qū)別是：bind 不會調(diào)用
  • bind 支持傳遞參數(shù)，它的傳參方式比較特殊，一共有兩個位置可以傳遞
    • 1. 在 bind 的同時，以參數(shù)列表的形式進(jìn)行傳遞
    • 2. 在調(diào)用的時候，以參數(shù)列表的形式進(jìn)行傳遞
    • 那到底以誰 bind 的時候傳遞的參數(shù)為準(zhǔn)呢還是以調(diào)用的時候傳遞的參數(shù)為準(zhǔn)
    • 兩者合并：bind 的時候傳遞的參數(shù)和調(diào)用的時候傳遞的參數(shù)會合并到一起，傳遞到函數(shù)內(nèi)部

函數(shù)的其它成員

• arguments
  • 實參集合
• caller
  • 函數(shù)的調(diào)用者
• length
  • 形參的個數(shù)
• name
  • 函數(shù)的名稱

function fn(x, y, z) {
  console.log(fn.length) // => 形參的個數(shù)
  console.log(arguments) // 偽數(shù)組實參參數(shù)集合
  console.log(arguments.callee === fn) // 函數(shù)本身
  console.log(fn.caller) // 函數(shù)的調(diào)用者
  console.log(fn.name) // => 函數(shù)的名字
}

function f() {
  fn(10, 20, 30)
}

f()

高階函數(shù)

• 函數(shù)可以作為參數(shù)
• 函數(shù)可以作為返回值

作為參數(shù)

function eat (callback) {
  setTimeout(function () {
    console.log('吃完了')
    callback()
  }, 1000)
}

eat(function () {
  console.log('去唱歌')
})

作為返回值

function genFun (type) {
  return function (obj) {
    return Object.prototype.toString.call(obj) === type
  }
}

var isArray = genFun('[object Array]')
var isObject = genFun('[object Object]')

console.log(isArray([])) // => true
console.log(isArray({})) // => true

函數(shù)閉包

function fn () {
  var count = 0
  return {
    getCount: function () {
      console.log(count)
    },
    setCount: function () {
      count++
    }
  }
}

var fns = fn()

fns.getCount() // => 0
fns.setCount()
fns.getCount() // => 1

作用域、作用域鏈、預(yù)解析

• 全局作用域
• 函數(shù)作用域
• 沒有塊級作用域

{
  var foo = 'bar'
}

console.log(foo)

if (true) {
  var a = 123
}
console.log(a)

作用域鏈?zhǔn)纠a：

var a = 10

function fn () {
  var b = 20

  function fn1 () {
    var c = 30
    console.log(a + b + c)
  }

  function fn2 () {
    var d = 40
    console.log(c + d)
  }

  fn1()
  fn2()
}

• 內(nèi)層作用域可以訪問外層作用域，反之不行

什么是閉包

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，
由于在 Javascript 語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，
因此可以把閉包簡單理解成 “定義在一個函數(shù)內(nèi)部的函數(shù)”。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。

閉包的用途：

• 可以在函數(shù)外部讀取函數(shù)內(nèi)部成員
• 讓函數(shù)內(nèi)成員始終存活在內(nèi)存中

一些關(guān)于閉包的例子

示例1：

var arr = [10, 20, 30]
for(var i = 0; i < arr.length; i++) {
  arr[i] = function () {
    console.log(i)
  }
}

示例2：

console.log(111)

for(var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i)
  }, 0)
}
console.log(222)

示例3：投票

示例4：判斷類型

示例5：沙箱模式

閉包的思考題

思考題 1：

var name = "The Window";
var object = {
  name: "My Object",
  getNameFunc: function () {
    return function () {
      return this.name;
    };
  }
};

console.log(object.getNameFunc()())

思考題 2：

var name = "The Window";　　
var object = {　　　　
  name: "My Object",
  getNameFunc: function () {
    var that = this;
    return function () {
      return that.name;
    };
  }
};
console.log(object.getNameFunc()())

小結(jié)

函數(shù)遞歸

遞歸執(zhí)行模型

function fn1 () {
  console.log(111)
  fn2()
  console.log('fn1')
}

function fn2 () {
  console.log(222)
  fn3()
  console.log('fn2')
}

function fn3 () {
  console.log(333)
  fn4()
  console.log('fn3')
}

function fn4 () {
  console.log(444)
  console.log('fn4')
}

fn1()

舉個栗子：計算階乘的遞歸函數(shù)

function factorial (num) {
  if (num <= 1) {
    return 1
  } else {
    return num * factorial(num - 1)
  }
}

遞歸應(yīng)用場景

• 深拷貝
• 菜單樹
• 遍歷 DOM 樹

正則表達(dá)式

• 了解正則表達(dá)式基本語法
• 能夠使用JavaScript的正則對象

正則表達(dá)式簡介

什么是正則表達(dá)式

正則表達(dá)式：用于匹配規(guī)律規(guī)則的表達(dá)式，正則表達(dá)式最初是科學(xué)家對人類神經(jīng)系統(tǒng)的工作原理的早期研究，現(xiàn)在在編程語言中有廣泛的應(yīng)用。正則表通常被用來檢索、替換那些符合某個模式(規(guī)則)的文本。
正則表達(dá)式是對字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規(guī)則字符串”，這個“規(guī)則字符串”用來表達(dá)對字符串的一種過濾邏輯。

正則表達(dá)式的作用

1. 給定的字符串是否符合正則表達(dá)式的過濾邏輯(匹配)
2. 可以通過正則表達(dá)式，從字符串中獲取我們想要的特定部分(提取)
3. 強大的字符串替換能力(替換)

正則表達(dá)式的特點

1. 靈活性、邏輯性和功能性非常的強
2. 可以迅速地用極簡單的方式達(dá)到字符串的復(fù)雜控制
3. 對于剛接觸的人來說，比較晦澀難懂

正則表達(dá)式的測試

• 在線測試正則
• 工具中使用正則表達(dá)式
  • sublime/vscode/word
  • 演示替換所有的數(shù)字

正則表達(dá)式的組成

• 普通字符
• 特殊字符(元字符)：正則表達(dá)式中有特殊意義的字符

示例演示：

• \d 匹配數(shù)字
• ab\d 匹配 ab1、ab2

元字符串

通過測試工具演示下面元字符的使用

常用元字符串

限定符

其它

[] 字符串用中括號括起來，表示匹配其中的任一字符，相當(dāng)于或的意思
[^]  匹配除中括號以內(nèi)的內(nèi)容
\ 轉(zhuǎn)義符
| 或者，選擇兩者中的一個。注意|將左右兩邊分為兩部分，而不管左右兩邊有多長多亂
() 從兩個直接量中選擇一個，分組
   eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5]  匹配漢字

案例

驗證手機號：

^\d{11}$

驗證郵編：

^\d{6}$

驗證日期 2012-5-01

^\d{4}-\d{1,2}-\d{1,2}$

驗證郵箱 xxx@itcast.cn：

^\w+@\w+\.\w+$

驗證IP地址 192.168.1.10

^\d{1,3}\(.\d{1,3}){3}$

JavaScript 中使用正則表達(dá)式

創(chuàng)建正則對象

方式1：

var reg = new Regex('\d', 'i');
var reg = new Regex('\d', 'gi');

方式2：

var reg = /\d/i;
var reg = /\d/gi;

參數(shù)

正則匹配

// 匹配日期
var dateStr = '2015-10-10';
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/
console.log(reg.test(dateStr));

正則提取

// 1. 提取工資
var str = "張三：1000，李四：5000，王五：8000。";
var array = str.match(/\d+/g);
console.log(array);

// 2. 提取email地址
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
console.log(array);

// 3. 分組提取  
// 3. 提取日期中的年部分  2015-5-10
var dateStr = '2016-1-5';
// 正則表達(dá)式中的()作為分組來使用，獲取分組匹配到的結(jié)果用Regex.$1 $2 $3....來獲取
var reg = /(\d{4})-\d{1,2}-\d{1,2}/;
if (reg.test(dateStr)) {
  console.log(RegExp.$1);
}

// 4. 提取郵件中的每一部分
var reg = /(\w+)@(\w+)\.(\w+)(\.\w+)?/;
var str = "123123@xx.com";
if (reg.test(str)) {
  console.log(RegExp.$1);
  console.log(RegExp.$2);
  console.log(RegExp.$3);
}

正則替換

// 1. 替換所有空白
var str = "   123AD  asadf   asadfasf  adf ";
str = str.replace(/\s/g,"xx");
console.log(str);

// 2. 替換所有,|，
var str = "abc,efg,123，abc,123，a";
str = str.replace(/,|，/g, ".");
console.log(str);

案例：表單驗證

QQ號：<input type="text" id="txtQQ"><span></span><br>
郵箱：<input type="text" id="txtEMail"><span></span><br>
手機：<input type="text" id="txtPhone"><span></span><br>
生日：<input type="text" id="txtBirthday"><span></span><br>
姓名：<input type="text" id="txtName"><span></span><br>

//獲取文本框
var txtQQ = document.getElementById("txtQQ");
var txtEMail = document.getElementById("txtEMail");
var txtPhone = document.getElementById("txtPhone");
var txtBirthday = document.getElementById("txtBirthday");
var txtName = document.getElementById("txtName");

//
txtQQ.onblur = function () {
  //獲取當(dāng)前文本框?qū)?yīng)的span
  var span = this.nextElementSibling;
  var reg = /^\d{5,12}$/;
  //判斷驗證是否成功
  if(!reg.test(this.value) ){
    //驗證不成功
    span.innerText = "請輸入正確的QQ號";
    span.style.color = "red";
  }else{
    //驗證成功
    span.innerText = "";
    span.style.color = "";
  }
};

//txtEMail
txtEMail.onblur = function () {
  //獲取當(dāng)前文本框?qū)?yīng)的span
  var span = this.nextElementSibling;
  var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
  //判斷驗證是否成功
  if(!reg.test(this.value) ){
    //驗證不成功
    span.innerText = "請輸入正確的EMail地址";
    span.style.color = "red";
  }else{
    //驗證成功
    span.innerText = "";
    span.style.color = "";
  }
};

表單驗證部分，封裝成函數(shù)：

var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
addCheck(txtBirthday, regBirthday, "請輸入正確的出生日期");
//給文本框添加驗證
function addCheck(element, reg, tip) {
  element.onblur = function () {
    //獲取當(dāng)前文本框?qū)?yīng)的span
    var span = this.nextElementSibling;
    //判斷驗證是否成功
    if(!reg.test(this.value) ){
      //驗證不成功
      span.innerText = tip;
      span.style.color = "red";
    }else{
      //驗證成功
      span.innerText = "";
      span.style.color = "";
    }
  };
}

通過給元素增加自定義驗證屬性對表單進(jìn)行驗證：

<form id="frm">
  QQ號：<input type="text" name="txtQQ" data-rule="qq"><span></span><br>
  郵箱：<input type="text" name="txtEMail" data-rule="email"><span></span><br>
  手機：<input type="text" name="txtPhone" data-rule="phone"><span></span><br>
  生日：<input type="text" name="txtBirthday" data-rule="date"><span></span><br>
  姓名：<input type="text" name="txtName" data-rule="cn"><span></span><br>
</form>

// 所有的驗證規(guī)則
var rules = [
  {
    name: 'qq',
    reg: /^\d{5,12}$/,
    tip: "請輸入正確的QQ"
  },
  {
    name: 'email',
    reg: /^\w+@\w+\.\w+(\.\w+)?$/,
    tip: "請輸入正確的郵箱地址"
  },
  {
    name: 'phone',
    reg: /^\d{11}$/,
    tip: "請輸入正確的手機號碼"
  },
  {
    name: 'date',
    reg: /^\d{4}-\d{1,2}-\d{1,2}$/,
    tip: "請輸入正確的出生日期"
  },
  {
    name: 'cn',
    reg: /^[\u4e00-\u9fa5]{2,4}$/,
    tip: "請輸入正確的姓名"
  }];

addCheck('frm');


//給文本框添加驗證
function addCheck(formId) {
  var i = 0,
      len = 0,
      frm =document.getElementById(formId);
  len = frm.children.length;
  for (; i < len; i++) {
    var element = frm.children[i];
    // 表單元素中有name屬性的元素添加驗證
    if (element.name) {
      element.onblur = function () {
        // 使用dataset獲取data-自定義屬性的值
        var ruleName = this.dataset.rule;
        var rule =getRuleByRuleName(rules, ruleName);

        var span = this.nextElementSibling;
        //判斷驗證是否成功
        if(!rule.reg.test(this.value) ){
          //驗證不成功
          span.innerText = rule.tip;
          span.style.color = "red";
        }else{
          //驗證成功
          span.innerText = "";
          span.style.color = "";
        }
      }
    }
  }
}

// 根據(jù)規(guī)則的名稱獲取規(guī)則對象
function getRuleByRuleName(rules, ruleName) {
  var i = 0,
      len = rules.length;
  var rule = null;
  for (; i < len; i++) {
    if (rules[i].name == ruleName) {
      rule = rules[i];
      break;
    }
  }
  return rule;
}

附錄

A 代碼規(guī)范

代碼風(fēng)格

• JavaScript Standard Style
• Airbnb JavaScript Style Guide() {

校驗工具

• JSLint
• JSHint
• ESLint

B Chrome 開發(fā)者工具

C 文檔相關(guān)工具

• 電子文檔制作工具: docute
• 流程圖工具：DiagramDesigner