當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

《JavaScript 高级程序设计》笔记第1~5章

發布時間：2023/12/10 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了《JavaScript 高级程序设计》笔记第1~5章小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第1章

js是專為網頁交互而設計的腳本語言，由3部分組成：

ECMAScript，提供核心語言功能
DOM文檔對象模型，提供訪問和操作網頁內容的方法和接口
BOM瀏覽器對象模型，提供與瀏覽器交互的方法和接口

js是一種腳本語言、解釋性語言、動態類型語言、基于對象的語言

第2章在HTML中使用JavaScript

包含在< script>元素內部的JavaScript代碼將被從上至下依次解釋，解析js代碼時（包括下載js文件時），頁面的處理也會暫時停止（頁面中的其余內容不會被瀏覽器加載或顯示，head元素中的js代碼需要被下載、解析和執行后，才開始呈現頁面內容：瀏覽器在遇到body標簽時才開始呈現內容），因此通常將js代碼放入< body>元素中頁面的內容后面；

< script>的src屬性可以包含來自外部域的js文件；（安全性問題）跨域

延遲腳本，< script>標簽的defer屬性，當defer = “defer”，js腳本將會延遲到瀏覽器遇到< /html>時才執行，理應按順序，但實際情況不一定按順序，因此最好只包含一個延遲腳本；

defer 屬性規定是否對腳本執行進行延遲，直到頁面加載為止，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩余部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶為止。

異步腳本，< script>標簽的asynv屬性，只適用于外部腳本文件，并告訴瀏覽器立即下載，但并不保證按先后順序執行；

推薦使用外部文件：
1）易于維護
2）可緩存：若多個頁面使用同一js文件，只需下載一次，加快了頁面加載速度
*指定async屬性的目的不是讓頁面等待兩個腳本下載和執行，從而異步加載其他內容。為此，建議異步腳本不要在加載期間修改DOM（P14）

< noscript>當瀏覽器不支持JavaScript時讓頁面平穩地退化；
1)瀏覽器不支持腳本
2)瀏覽器支持腳本，但腳本被禁用

defer、async作用和區別分析
8. 文檔模式：混雜模式和標準模式（影響css內容的呈現）
doctype
若在文檔開始處沒有聲明文檔類型，則所有的瀏覽器都會默認開啟混雜模式，但這樣并不值得推薦，因為不同瀏覽器在這種模式下的行為差異非常大，如果不使用某些hack技術，跨瀏覽器的行為沒有一致性可言。

標準模式聲明：HTML5

<!DOCTYPE html>

嚴格模式
為js定義的解析與執行模型：在嚴格模式下，ECMAScript3中的一些不確定的行為將得到處理，對某些不安全的操作也會拋出錯誤

“use strict“

onload事件

window.onload

第3章基本概念

3.1~3.3 語法、關鍵字和保留字、變量

區別大小寫：True和False都不是Boolean類型；

typeof是關鍵字而不是函數名,使用時不需要加括號；

typeof null 返回object，null被認為是一個空的對象引用，如果定義的變量準備在將來用于保存對象，最好初始化為null而不是其他值；

隱式全局變量很難維護，不推薦這么用；

可以使用一條語句定義多個變量

var message = "hi",found = false,age =29;

3.4 數據類型

typeof的返回值：4+1+1（5種基本數據類型除了null、object、function）

undefined類型只有一個值，即其本身；

null是另一個只有一個值的數據類型；

undefined值是派生自null值的，因此undefined == null返回true；

對未聲明和未初始化的變量，typeof的返回值居然都是undefined；

數值字面量：八進制必須以0開頭，其后是0~7，若超出范圍，前導0才會被忽略；十六進制前2位必須是0x；

保存浮點數值的內存空間是保存證書的2倍，因此ECMAScript會不失時機地將浮點數值轉為整數；

var floatNum = 3.15e7; //等于31500000

浮點數值最高精度是17位小數，但其算術運算的精度遠不及整數，因此無法測試特定的浮點數值；

NaN用于表示一個本來要返回數值的操作數未返回數值的情況（這樣就不會拋出錯誤了）

isNaN()會嘗試將參數轉為數值（我理解，先Number(參數)）；

isNaN()也適用于對象：valueOf() → toString() ；

Number(“ ”) 得到0；而parseInt(“ ”)得到NaN；

Number()適用于任何數據類型；parseInt()、parseFloat()只用于字符串；

parseInt(): 更多地考慮參數是否符合數值模式，
1）找到第一個非空格字符；
2）若第一個非空格字符不是數字或負號，則返回NaN；
3）parseInt()會識別各進制，但ECMAScript3和5存在分歧，因此推薦提供第二個參數（基數）；

parseFloat()解析到遇見第一個無效的浮點數字字符為止（第二個小數點無效，并且會忽略先導0，只解析十進制）；

字符串中若包含轉義序列，在str.length時，轉移序列當1個字符計算；

null和undefined沒有toString()方法，此時可用Sting()方法；

toString()方法可傳基數；

* 例子

var num1 = 070; // 八進制的56 var num2 = 079; // 無效的八進制數值-解析為79 var num3 = 0xA; // 十六進制的10var floatNum1 = .1 // 有效，但不推薦 var floatNum2 = 1.; //小數點后面沒有數字 - 解析為1 var floatNum3 = 10.0; // 整數，解析為10isNaN(NaN); // true isNaN(10); // false isNaN("10"); // false (可以被轉換成數值) isNaN("blue"); // true isNaN(true); // false(可以被轉換成數值)Number(" ") // 0 Number("000011") // 11parseInt("1234blue") // 1234 parseInt(" ") // NaN parseInt("0xA") // 10 (十六進制數) parseInt(22.5) // 22 parseInt("070") // 56 （八進制數） parseInt("70") // 70 （十進制數） parseInt("0xf") // 15 (十六進制數)parseInt(“10”,2) // 2(二進制數) parseInt(“10”,8) // 8(八進制數) parseInt(“10”,10) // 10(十進制數) parseInt(“10”,16) // 16(十六進制數) parseFloat("1234blue") // 1234 parseFloat("0xA") // 0 parseFloat("22.5") // 22.5 parseFloat("22.34.5") // 22.34 parseFloat("0908.5") // 908.5 parseFloat("3.125e7") // 31250000

第4章變量、作用域和內存問題

函數提升優先級高于變量提升

1.typeof：基本數據類型 instanceof：引用類型

雖然在檢測基本數據類型時typeof是非常得力的助手，但在檢測引用類型時，這個操作符的用處不大。我們并非想知道某個值是對象，而是想知道它是什么類型的對象。instanceof操作符；

result = variable instanceof constructor
如果變量是引用類型的實例，則返回true；

instanceof檢測基本數據類型永遠返回false：基本數據類型不是對象；

instanceof操作符假定單一的全局執行環境。如果網頁中包含多個框架，那實際上就存在兩個以上不同的全局執行環境，從而存在兩個以上不同版本的Array構造函數。使用value instanceof Array 可能不適用；

全局執行環境被認為是window對象，所有全局變量和函數都是作為window對象的屬性和方法創建的；

全局執行環境直到應用程序退出（例如關閉網頁或瀏覽器）時才會銷毀；

js沒有塊級作用域（其他語言中，花括號封閉的代碼有自己的作用域）：指if、for的花括號內，依然是全局作用域；

for(var i = 0; i < 10; i++) {} 變量i即使退出了循環，也依然存在于循環外部的執行環境中；

不建議隱式全局變量這種操作方式；

當局部變量和全局變量同名：如果不使用window.color，便無法訪問全局變量；

對于上一點，訪問局部變量快于全局變量，因為不用向上搜索作用域鏈；

垃圾收集：標記清除和引用計數方式；

對于循環引用的問題：最好在不使用時，手工斷開原生js和dom之間的聯系element.someObject = null

分配給web瀏覽器的內存比其他桌面應用少，目的是防止運行js的網頁耗盡系統內存而導致系統崩潰；

解除引用：一旦數據不再有用，設置其值為null來釋放其引用；

2.執行環境及作用域

執行環境（簡稱環境），定義了變量或函數有權訪問的其他數據，決定了她們各自的行為。每個執行環境都有一個與之關聯的變量對象，環境中定義的所有變量和函數都保存在這個對象中。

當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈。如果這個環境是函數，則將其活動對象作為變量對象，即 arguments對象；作用域鏈的下一個變量對象來自外部環境，最后一個對象是全局執行環境的變量對象。

內部環境可以通過作用域鏈訪問所有的外部環境，但外部環境不能訪問內部環境中的任何變量和函數。每個環境可以向上搜索作用域鏈。

延長作用域鏈： with try catch語句，都會在作用域鏈的前端添加一個變量對象。P75

參數實際上是函數的局部變量。

執行環境及作用域

var color = 'blue' function changeColor() {var anotherColor = 'red'function swapColors() {var tempColor = anotherColoranotherColor = color color = tempColor// 最內層函數可以訪問全局的color，外層函數的局部變量anoteColor 和自己的局部變量tempColor}swapColors()// 全局函數可以訪問全局的color和自己的局部變量anotherColor，但不能訪問內部函數的tempColor } changeColor()

函數被調用時，活動對象是：this、arguments、和其他命名參數；
函數這類的局部環境的變量對象，只在函數執行過程中存在。當函數執行完畢后，局部活動對象就會被銷毀；
創建函數時，先創建一個預先包含全局變量對象的作用域鏈，當調用函數時，會為函數創建執行環境，創建函數的活動對象，并將其推入執行環境作用域鏈的前端

閉包：有權訪問另一個函數作用域中的變量的函數

重要的是，在外部函數執行完畢后，其活動對象也不會被銷毀，因為內部匿名函數（閉包）仍然在引用這個活動對象。（但它的執行環境的作用域鏈會被銷毀）直到匿名函數被銷毀后，外部函數的活動對象才銷毀。
匿名函數被返回，而且在其他地方被調用，也仍然可以訪問變量key

function createFunction(key) {return function(obj1, obj2) {var v1 = obj1[key]var v2 = obj2[key]if (v1 < v2) {return -1} else if (v1 > v2) {return 1} else {return 0}} }

第5章引用類型

5.1 Object

訪問對象屬性值（方括號方法，屬性名一定要加雙引號）：
person["first name"]

5.2 Array

數組的每一項都可以存儲任何類型的數據；

使用構造函數創建對象、數組時，省略new關鍵字，效果相同：

var obj = Object() <=> var obj = new Object() var arr = Array() <=> var arr = Array()

避免這樣字面量數組：

var arr = [1,2,] // 可能會創建包含2項或3項的數組 var arr= [,,,,,] // 可能會創建包含5項或6項的數組

P87 與對象一樣，在使用數組字面量表示法時，也不會調用Array構造函數；

新增的每一項都會取得undefined；

var arr = [1,2,3] arr.length = 4 // arr會新增一項，undefined

檢測數組 Array.isArray(value) （instanceof可能不適用）
這個方法確定某個值到底是不是數組，而不管它是在哪個全局執行環境中創建的；

數組調用toString():返回逗號拼接每個值的字符串形式（最終結果是一個字符串）；
數組調用toLocaleString(): 對數組每一項調用這個方法；

alert(數組) // 由于alert()要接收字符串參數，所以會在后臺調用toString()

join()方法只接受一個參數，作為分隔符；若無參數或參數是undefined，則以逗號作為分隔符；

5.3 Date

5.4 RegExp / /+標志

3個標志：
g：全局模式，應用于所有字符串，而非在發現第一個匹配項時立即停止；
i：不區分大小寫；
m：多行模式；

實例方法：
reg.exec(str)
reg.test(str)

5.5 Function

函數是對象，函數名是指針；

函數沒有重載：若聲明了2個同名函數，后者會覆蓋前者；

解析器會率先讀取函數聲明，而函數表達式，需等到解析器執行到它所在的代碼行，才會真正被解釋執行；

函數內部arguments對象，擁有callee屬性，指向函數；

遞歸方法，應當使用arguments.callee來消除函數執行與函數名的緊耦合；

函數內部this對象，指向函數環境對象；

函數對象屬性caller，指向調用當前函數的函數，不能為caller賦值

arguments.callee.caller

apply()和call()能設置函數體內的this值；

bind()創建一個函數的實例，this會被綁定到傳給它的參數上；

5.6 基本包裝類型

每當讀取一個基本類型的時候，后臺就會創建一個對應的基本包裝類型對象，這個對象只存在一瞬間，會被立即銷毀；
typeof 基本包裝類型的值是 object；
使用轉型函數和構造函數（new）typeof有區別

var num = "25" var num1 = Number(num) console.log(typeof num1) // number var num2 = new Number(num) console.log(typeof num2) // object var obj= new Object('str') console.log(obj instanceof Object) // true console.log(obj instanceof String) // true

5.6.1 Boolean

var obj = new Boolean(false) var result = obj && (true) console.log(result) // true

5.6.2 Number

var num = 10.005 console.log(num.toFixed(2)) // 10.01 自動舍入

5.6.3 String；

數組、字符串都有concat()/slice()方法；

字符串不可變性；

字符串模式匹配；

5.7 單體內置對象

Global和Math

5.8 valueof()和toString()

數組調用valueOf()，結果還是數組；
Date調用valueOf()，結果是日期的毫秒；
RexExp調用valueOf()，返回正則表達式本身；
基本包裝類型Boolean的實例重寫valueOf()，返回基本類型false或true；
基本包裝類型Number的valueOf()返回數值；
數組調用toString():返回逗號拼接每個值的字符串形式（最終結果是一個字符串）；
數組調用toLocaleString(): 對數組每一項調用這個方法；
RegExp的實例調用toString() / toLocaleString() 返回正則表達式的字面量；
函數的toString() / toLocaleString()返回函數代碼；
基本包裝類型Boolean的toString()，返回字符串’false’ 或 ‘true’；
基本包裝類型Number的toString()，返回數值幾進制的字符串形式；

5.9 判斷類型終極方法Object.prototype.toString()

Object.prototype.toString.call({}) // '[object Object]' Object.prototype.toString.call([]) // '[object Array]' Object.prototype.toString.call(() => {}) // '[object Function]' Object.prototype.toString.call('seymoe') // '[object String]' Object.prototype.toString.call(1) // '[object Number]' Object.prototype.toString.call(true) // '[object Boolean]' Object.prototype.toString.call(Symbol()) // '[object Symbol]' Object.prototype.toString.call(null) // '[object Null]' Object.prototype.toString.call(undefined) // '[object Undefined]'// 對于內置對象 or 構造函數 Object.prototype.toString.call(new Date()) // '[object Date]' Object.prototype.toString.call(Math) // '[object Math]' Object.prototype.toString.call(new Set()) // '[object Set]' Object.prototype.toString.call(new WeakSet()) // '[object WeakSet]' Object.prototype.toString.call(new Map()) // '[object Map]' Object.prototype.toString.call(new WeakMap()) // '[object WeakMap]'

總結

以上是生活随笔為你收集整理的《JavaScript 高级程序设计》笔记第1~5章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java jna调用dll文件_关于ja
下一篇：重学《JavaScript 高级程序设计