JavaScript 高級程序設(shè)計筆記

記錄下遺忘的知識點

part2: 在HTML中使用JavaScript

1.所有<script>元素都會按照他們在頁面中出現(xiàn)的先后順序依次被解析（不使用defer和async屬性的情況下）。

  1. 只有 Internet Explorer 支持 defer 屬性。

2.1. <script src="script.js"></script>

沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

2.2. <script async src="script.js"></script>

有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行（異步）。

2.3. <script defer src="myscript.js"></script>

有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

[圖片上傳失敗...(image-407000-1560162831547)]

image.png

3.<noscript>:讓頁面平穩(wěn)退化。

瀏覽器不支持腳本；

瀏覽器支持腳本，但腳本被禁用

Part3 基本概念

    1. ECMAScript5引入嚴格模式(嚴格模式下，ECMAScript3中的一些不確定的行為將得到處理，而且對某些不安全的操作也會拋出異常)
      使用方法：這個腳本頂部添加 'use strict'

  • 2.五種簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）
    Undefined、Null、Bollean、Number、String
    一個復(fù)雜數(shù)據(jù)類型：Object

  • 3.undefined（聲明了變量但未加以初始化）

  • 4.null （表示一個空指針）

  • 5.boolean 任何數(shù)據(jù)類型的值調(diào)用Boolean()函數(shù)，總會返回一個Boolean值，參照下圖：

Boolean

  • 6.NaN(非數(shù)值是一個特殊的數(shù)值)表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況。
    特殊點：任何涉及NaN的操作都會返回NaN；NaN與任何數(shù)值都不想等，包括他本身。
    isNaN() ：嘗試轉(zhuǎn)換為數(shù)值，不能被轉(zhuǎn)換為數(shù)值的值返回 true。（轉(zhuǎn)換數(shù)值知識點）

  • 7.ECMAScript 中的所有參數(shù)傳遞的都是值，不可能通過引用傳遞參數(shù)。

  • 8.ECMAScript函數(shù)不能重載。

Part4 變量作用域和內(nèi)存問題

  • 1.基本數(shù)據(jù)類型是按值訪問的，因此可以操作保存在變量中的實際的值。
    引用類型的值時按引用訪問的（JavaScript不允許直接訪問內(nèi)存中的 位置）

  • 2.檢測基本數(shù)據(jù)類型時用 typeof 操作符
    檢測引用類型的值時用 instanceof 操作符

  • 3.沒有塊級作用域

Paste_Image.png
Paste_Image.png

查詢標識符，從作用域鏈的前端開始，向上逐級查詢與給定名字匹配的標識符。

  • 4.垃圾收集：
    標記清除：算法的思想是給當前不使用的值加上標記，然后在回收其內(nèi)存。
    第一階段,標記所有的可訪問對象.第一階段叫做標記階段.
    第二階段,垃圾收集算法掃描堆并回收所有的未標記對象.第二階段叫做收集階段.
    引用計數(shù)：算法是思想是跟蹤記錄所有的值被引用的次數(shù)。
    引用計數(shù)對循環(huán)引用的垃圾回收會出現(xiàn)內(nèi)存泄漏，而IE的DOM回收機制便是采用引用計數(shù)的。IE9+把BOM和DOM對象都轉(zhuǎn)換成真正意義的JavaScript對象。避免兩種垃圾收集算法的并存。

  • 5.解除變量的引用不僅有助于消除循環(huán)引用現(xiàn)象，而且對垃圾收集也有好處。為了確保有效地回收內(nèi)存，應(yīng)該及時解除不在使用的全局對象、全局對象屬性以及循環(huán)引用變量的引用。

Part5 引用類型

對象是某個特定引用類型的實例

1.Object類型

創(chuàng)建方式：
① new操作符后跟Object構(gòu)造函數(shù)
②使用對象字面量表示法。

2.Array類型

ECMAScript數(shù)組的每一項可以保存任何類型的數(shù)據(jù)。
創(chuàng)建方式：
①使用Array構(gòu)造函數(shù) eg： var arr= new Array();
②使用數(shù)組字面量表示法 eg: var arr=[1,2,'A'];
數(shù)組最多包含4294967295個項

2.1檢測數(shù)組
ECMAScript新增 Array.isArray()

2.2轉(zhuǎn)換方法
toString()
valueOf()
toLocaleString()
調(diào)用數(shù)組的 toString()方法會返回有數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。
調(diào)用數(shù)組的 valueOf()方法會返回的還是數(shù)組。
toLocaleString()不同之處在于，為取到每一項的值，調(diào)用的是toLocaleString()方法，而不是toString()方法

join()方法可以使用不同的分隔符來構(gòu)建這個字符串。 如， || *

2.3棧方法（后進先出）
push() 可以接收任意數(shù)量的參數(shù)，把他們逐個添加到數(shù)組末尾。并返回修改后數(shù)組的長度。
pop() 從數(shù)組末尾移除最后一項，減少數(shù)組的length值，返回移除的項。

2.4隊列方法（先進先出）
shift() 移除數(shù)組中的第一個項并返回該項，同時將數(shù)組長度減一。
unshift()在數(shù)組前端添加任意個項并返回新數(shù)組的長度。

2.5重排序方法
reverse() 翻轉(zhuǎn)數(shù)組項的順序

sort() 方法時按升序排列數(shù)組項（調(diào)動數(shù)組項的toString()轉(zhuǎn)型方法，比較字符串。）
arrayObject.sort(sortby)
sortby 可選。規(guī)定排序順序。必須是函數(shù)。
給數(shù)值型數(shù)組排序時，可以定義排序函數(shù)

var arr = [12,5,8,40];
function sortNumber(a,b){
   return a - b  //  return b-a 為降序排列
}
arr.sort(sortNumber);

或者 復(fù)雜點

    var arr = [12,5,8,40];
    function compare(value1, value2) {
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }
    arr.sort(compare);

2.6操作方法
concat()
創(chuàng)建當前數(shù)組的一個副本，將接收到的參數(shù)添加到這個副本的末尾，最后返回新構(gòu)建的數(shù)組，

slice()
arrayObject.slice(start,end)
start 必需。規(guī)定從何處開始選取。如果是負數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數(shù)第二個元素，以此類推。
end 可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標。如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個參數(shù)是負數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素。

splice() 方法向/從數(shù)組中添加/刪除項目，然后返回被刪除的項目。
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整數(shù)，規(guī)定添加/刪除項目的位置，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany 必需。要刪除的項目數(shù)量。如果設(shè)置為 0，則不會刪除項目。
item1, ..., itemX 可選。向數(shù)組添加的新項目。

2.7位置方法
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。
lastIndexOf() 方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索。

2.8迭代方法
map()是對數(shù)組中的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。這個數(shù)組的每一項都是在原始數(shù)據(jù)中的對應(yīng)項上運行傳入函數(shù)的結(jié)果
filter()是對數(shù)組中的每一項運行給定函數(shù)，返回該函數(shù)會返回true的項所組成的數(shù)組。它利用指定的函數(shù)確定是否在返回的數(shù)組中包含某一項
every()是對數(shù)組中的每一項運行給定函數(shù)，如果該函數(shù)對每一項都返回true，則返回true。
some()是對數(shù)組中的每一項運行給定函數(shù)，如果該函數(shù)對任一項返回true，則返回true。
forEach() 是多數(shù)組中的每一項運行給定函數(shù)，這個方法沒有返回值。它只是對數(shù)組中的每一項運行傳入的函數(shù)，沒有返回值。本質(zhì)上與使用for循環(huán)迭代數(shù)組一樣。

2.9縮小方法
reduce() reduceRight()
迭代數(shù)組的所有項，然后構(gòu)建一個最終返回的值。

3.Date類型
4.RegExp類型
5.Function類型

函數(shù)是對象，函數(shù)名是指針。

5.1 沒有重載（兩個同名函數(shù)，后面的會覆蓋前面的函數(shù)）

5.2 函數(shù)聲明與函數(shù)表達式
解析器會率先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼前可用，
函數(shù)表達式，會在解析器執(zhí)行到它所在是代碼行，才會真正被解釋執(zhí)行。

5.3作為值的函數(shù)

5.4函數(shù)內(nèi)部屬性
特殊對象：arguments 和 this
用例：階乘

  function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);
        }
    }

5.5函數(shù)屬性和方法
每個函數(shù)都包含兩個屬性 length 和 prototype
length 表示函數(shù)希望接受的命名參數(shù)的個數(shù)。
prototype是保存他們所有實例方法的真實所在。

6基本包裝類型

引用類型與基本包裝類型的主要區(qū)別就是對象的生存期。

基本包裝類型，也是一種引用類型?；景b類型是對基本數(shù)據(jù)類型的封裝，封裝后即具有基本類型的功能，也有各自的特殊行為（方法）

基本包裝類型需要一個new來創(chuàng)建。請看下面的例子：
1.字面量寫法：var box = 'Mr. Lee';//字面量
box.name = 'Lee';//無效屬性
box.age = function () {//無效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//string
alert(box.name);//undefined
alert(box.age());//錯誤

2.new 運算符寫法：var box = new String('Mr. Lee');//new 運算符
box.name = 'Lee';//有效屬性
box.age = function () {//有效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//object
alert(box.name);//Lee
alert(box.age());//100

6.1Boolean類型
6.2Number類型
6.3String類型

7.單體內(nèi)置對象

Global對象
Math對象

Part6 面向?qū)ο蟮某绦蛟O(shè)計

ECMAScript中有兩種屬性：數(shù)據(jù)屬性和訪問器屬性。

1.數(shù)據(jù)屬性：
數(shù)據(jù)屬性包含一個數(shù)據(jù)值的位置。在這個位置可以讀取和寫入值。數(shù)據(jù)屬性有4個描述其行為的特性。
[[Configureable]]：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。默認值是true。
[[Enumerable]]：表示能否通過for-in 循環(huán)返回屬性。默認值是true。
[[Writable]]：表示能否修改屬性的值。默認值是true。
[[Value]]：包含這個屬性的數(shù)據(jù)值。讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值保存在這個位置。這個特性的默認值為undefined。
2.訪問器屬性
訪問器屬性不包含數(shù)據(jù)值；它們包含一對兒getter和setter函數(shù)。
[[Configurable]]：表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為數(shù)據(jù)屬性。默認值是true。
[[Enumerable]]：表示能否通過for-in 循環(huán)返回屬性。默認值是true。
[[Get]]：在讀取屬性時調(diào)用的函數(shù)。默認值為undefined。
[[Set]]：在寫入屬性時調(diào)用的函數(shù)。默認值為undefined。

Object.defineProperty()
Object.defineProperties()
讀取屬性的特性：Object.getOwnPropertyDescriptor()

6.2創(chuàng)建對象

6.2.1工廠模式
    function createPerson(name, age, job) {
        let o = new Object()
        o.name = name
        o.age = age
        o.job = job
        o.sayName = function () {
            console.log(this.name)
        }
        return o
    }

    let person = createPerson('AA', 29, 'engineer')
    let person2 = createPerson('BB', 28, 'doctor')
6.2.2構(gòu)造函數(shù)模式
    function Person(name, age, job) {
        this.name = name
        this.age = age
        this.job = job
        this.sayName = function () {
            console.log(this.name)
        }
    }

    let person = new Person('AA', 29, 'engineer')
    let person2 = new Person('BB', 28, 'doctor')
    console.log(person)
    console.log(person2)

與工廠模式不同之處：

  • 沒有顯式地創(chuàng)建對象
  • 直接將屬性和方法賦給了this對象
  • 沒有return語句
    缺點：
    每個方法都要在每個實例上重新創(chuàng)建一遍。
6.2.3原型模式
    function Person() {
    }

    Person.prototype.name= 'AA'
    Person.prototype.age= 29
    Person.prototype.job= 'engineer'
    Person.prototype.sayName = function(){
        console.log(this.name)
    }
    console.log(Object.getOwnPropertyNames(Person.prototype)) // ["constructor", "name", "age", "job", "sayName"]
    let person = new Person()
    let person2 = new Person()
    console.log(person.hasOwnProperty('name')) // false
    console.log('name' in person) // true
    person.name= 'CC'
    console.log(person.hasOwnProperty('name')) // true
    console.log('name' in person) // true
    delete person.name
    console.log(person.hasOwnProperty('name')) // false
    console.log('name' in person) // true

使用hasOwnProperty() 可以檢查訪問的是實例屬性還是原型屬性。
使用 in 操作符只要通過對象能訪問到屬性就返回true

  • 原型模式缺點：
    原型中所有屬性是被很多實例共享的，這種共享對于函數(shù)非常合適，但是對于包含引用類型值的屬性來說，就存在問題了。
6.2.4 組合使用構(gòu)造函數(shù)模式與原型模式
    function Person(name,age,job) {
        this.name = name
        this.age = age
        this.job = job
        this.friends =['A','B']
    }


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

    let person = new Person('AA',29,'engineer')
    let person2 = new Person('BB',28,'doctor')

    person.friends.push('C')
    console.log(person.friends)
    console.log(person2.friends)
    console.log(person.sayName === person2.sayName)
6.2.5 動態(tài)原型模式
6.2.6寄生構(gòu)造函數(shù)模式
6.2.7穩(wěn)妥構(gòu)造函數(shù)模式

6.3 繼承

接口繼承：只繼承方法簽名
實現(xiàn)繼承：繼承實際的方法
由于函數(shù)沒有簽名，在ECMAScript中無法實現(xiàn)接口繼承，只支持實現(xiàn)繼承，而且其實現(xiàn)繼承主要是依靠原型鏈來實現(xiàn)的。

6.3.1 原型鏈

問題：
1.來自包含引用類型值的原型
2.沒有辦法在不影響所有對象實例的情況下，給超類型的構(gòu)造函數(shù)傳遞參數(shù)。

6.3.2 借用構(gòu)造函數(shù)
6.3.3 組合繼承
6.3.4 原型式繼承
6.3.5 寄生式繼承
6.3.6 寄生組合式繼承

Part7 函數(shù)表達式

  • 1.遞歸：是在一個函數(shù)通過名字調(diào)用自身的情況下構(gòu)成的
  • 2.閉包：是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)

Part8 BOM

  • 1.BOM的核心對象是window，他表示瀏覽器的一個實例。

  • 2.全局變量 不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以。

    1. JavaScript是單線程語言，但他允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行。
      超時調(diào)用： setTimeout();
      間歇調(diào)用： setInterval();

  • 4.系統(tǒng)對話框
    alert()
    confirm()
    prompt()

Part9 客戶端檢測

  • 1.客戶端檢測是JavaScript開發(fā)中最具爭議的一個話題。經(jīng)常使用：
    能力檢測：在編寫代碼之前先檢測特定瀏覽器的能力。
    怪癖檢測：實際上是瀏覽器實現(xiàn)中存在的bug。（無法精確檢測特定的瀏覽器和版本）
    用戶代理檢測：通過檢測用戶代理字符串來識別瀏覽器。（萬不得已才使用）

Part10 DOM

  • 最基本的節(jié)點類型時Node，用于抽象地表示文檔中一個獨立的部分，所有其他類型都繼承自Node
    *jQuery 的核心就是通過CSS選擇符查詢DOM文檔取得元素的引用。從而拋開了getElementById()和getElementByTagName()

Part13

  • 1.事件流描述的是從頁面中接收事件的順序。
  • 2.IE的事件流叫做事件冒泡。（所有現(xiàn)代瀏覽器都支持事件冒泡）
  • 3.事件捕獲。相反，document對象首先接收到click事件，然后事件沿著DOM書依次向下。直到事件的實際目標。
  • 4.DOM事件流。包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。
  • 5.事件處理程序：
    HTML事件處理程序
    DOM0級事件處理程序
    DOM2級事件處理程序
    IE級事件處理程序
    跨瀏覽器的事件處理程序
  • 6.建立在事件冒泡機制智商的事件委托技術(shù)，可以有效的減少事件處理程序的數(shù)量。
  • 7.建議在瀏覽器卸載頁面之前移除頁面中的所有事件處理程序。

Part23 客戶端存儲

  • cookie 的限制使其可以存儲少量的數(shù)據(jù)。
  • Web Storage定義了兩種存儲數(shù)據(jù)的對象，sessionStorage 和localStorage
    前者嚴格用于在一個瀏覽器會話中存儲數(shù)據(jù)，因為數(shù)據(jù)在瀏覽器關(guān)閉后會立即刪除。
    后者用于跨會話持久化數(shù)據(jù)并遵循跨域安全策略。
  • IndexedDB是一種類似SQL數(shù)據(jù)庫的結(jié)構(gòu)化數(shù)據(jù)存儲機制。但他的數(shù)據(jù)不是保存在表中，而是保存在對象存儲空間中。

Part25 新興API

  • requestAnimationFrame()： 優(yōu)化JS動畫API，能夠在動畫運行期間發(fā)出信號，是瀏覽器能都自動優(yōu)化屏幕重繪操作
  • Page VIsibility API ： 讓開發(fā)者知道用戶什么時候正在看著頁面，而什么時候頁面是隱藏的。
  • Geolocation API ： 在得到許可的情況下，可以確定用戶所在的位置。
  • File API ：可以讀取文件內(nèi)容。用于顯示、處理、上傳。
  • Web計時： 給出頁面加載和渲染過程的很多信息。對性能優(yōu)化非常有價值。
  • Web Workers ：可以運行異步JavaScript代碼，避免阻塞用戶界面。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容