當一個函數的返回值是另一個函數,返回的那個函數如果呼叫了父函數的內部變數,且在外部被執行就產生了閉包
特性
1.函數套函數,
2.內部函數存取外部函數變數,引數
3.變數和引數不會被垃圾回收機制回收
優點
1.變數長期住在在記憶體中
2.不會造成全域性汙染
3.私有成員的存在
缺點
常駐記憶體增大記憶體的使用量,使用不當會造成記憶體的洩露
原型概念:
原型概念:jsvascript都包含了一個proto內部屬性,這個屬性對應的是自身。
除了原型proto之外,還有prototype屬性,當函數物件作為建構函式建立範例時,prototype屬性值將被作為 範例物件的原型proto
原型鏈的概念:原型鏈當一個物件呼叫自身不存在的物件或者方法就會去自己proto關聯的前輩prototype物件上去找,如果沒有找到,就會去prototype原型proto關聯的前輩prototype,依次類推直到undefined,這就是原型鏈。
例如:B繼承A的原型上的方法,C繼承B原型上的方法,這時C._proto_指向B的原型,B._proto指向A的原型這就行程了原型鏈
隱式原型:用來構成原型鏈,實現基於原型的繼承
顯示原型:用來實現原型的繼承與屬性共用
// 父
function Person(name, age) {
this.name = name
this.age = age
//方法一
// this.say=function(){
// console.log(this.name)
// }
}
//方法二
Person.prototype.say = function () { console.log(this.name) }
// 子
function stu(name, age) {
Person.call(this, name, age)
}
//繼承他的方法
stu.prototype.say = Person.prototype.say
var s = new stu(「張三」, 33)
console.log(s)
一、是html事件處理程式
html事件現在早已不用了,就是在html各種標籤上直接新增事件,類似於css的行內樣式,缺點是不好維護
例如:<button οnclick="時間處理常式」>點我
二、是DOM0級事件處理程式
目前在PC端用的還是比較多的繫結事件方式,相容性也好,主要是先獲取dom元素,然後直接給dom元 素新增事件
DOM0事件如何移除呢?很簡單:btn.onclick=null;置為空就行
優點:相容性好
缺點:只支援冒泡,不支援捕獲
三、是DOM2級事件處理程式
行動端用的比較多,也有很多優點,提供了專門的繫結和移除方法
優點:支援給個元素繫結多個相同事件,支援冒泡和捕獲事件機制
查詢:
getElementByid,
getElementsByTagName
querySelector
querySelectorAll
插入:
appendChild
insertBefore
刪除:
removeChild
克隆:
cloneNode
設定和獲取屬性:
setAttribute(「屬性名」,」值」)
getAttibute(「屬性名」)
1.新增了塊級作用域(let,const)
2.提供了定義類的語法糖(class)
3.新增了一種基本資料型別(Symbol)
4.新增了變數的解構賦值
5.函數引數允許設定預設值,引入了rest引數,新增了箭頭函數
6.陣列新增了一些API,如 isArray / from / of 方法;陣列範例新增了 entries(),keys() 和 values() 等方法
7.物件和陣列新增了擴充套件運運算元
8.ES6 新增了模組化(import/export)
9.ES6 新增了 Set 和 Map 資料結構
10.ES6 原生提供 Proxy 建構函式,用來生成 Proxy 範例
11.ES6 新增了生成器(Generator)和遍歷器(Iterator)
1.單例模式
2.工廠模式
3.建構函式模式
JS物件導向主要基於function來實現的,通過function來模擬類,通過prototype來實現類方法的共用
push
pop
unshift
shift
splice
join
concat
forEach
filter
map
sort
some
every
forEach
這個方法是為了取代for迴圈遍歷陣列的,返回值為undefined
filter
是一個過濾遍歷的方法,如果返回條件為true,則返回滿足條件為true的新陣列
map
這個map方法主要對陣列的複雜邏輯處理時用的多,特別是react中遍歷資料,也經常用到,寫法和forEach 類似
some
這個some方法用於只要陣列中至少存在一個滿足條件的結果返回值就為true,否則返回fasel
寫法和forEach類似
every
這個every方法用於陣列中每一項都得滿足條件時,才返回true,否則返回false, 寫法和forEach類似
在 JavaScript 中, 作用域為可存取變數,物件,函數的集合。
1.JavaScript 區域性作用域
變數在函數內宣告,變數為區域性作用域。
區域性變數:只能在函數內部存取
2.JavaScript全域性作用域
也就是定義在window下的變數範圍,在任何地方都可以存取,
3.JavaScript塊級作用域
塊級作用域:簡單來說用let和const在任意的程式碼塊中定義的變數都認為是塊級作用域中的變數
注:
1. 儘量不要使用全域性變數,因為容易導致全域性的汙染,命名衝突,對bug查詢不利。
2. 而所謂的作用域鏈就是由最內部的作用域往最外部,查詢變數的過程.形成的鏈條就是作用域鏈
1.DNS解析(解析URL對應的IP
2.TCP 連線(三次握手)
3.傳送 HTTP 請求
4.伺服器處理請求並返回需要的資料
5.瀏覽器解析渲染頁面
6.連線結束(四次揮手)
三次握手
三次握手是連線協定
四次揮手
關閉連線是四次協定
JS事件代理就是通過給父級元素繫結事件,不給子級元素繫結事件。然後當點選子級元素時,通過事件冒泡機制在其繫結的父元素上觸發事件處理常式主要目的是為了提升效能
特別是給動態新增的元素繫結事件,這個特別起作用
js資料型別有:
1.基本資料型別:
number
string
Boolean
null
undefined
symbol(ES6新增)
2.複合型別
Object
function
call,apply,bind主要作用都是改變this指向的,但使用上略有區別
call和apply的主要區別是在傳遞引數上不同
1.call後面傳遞的引數是以逗號的形式分開的
2.apply傳遞的引數是陣列形式
bind返回的是一個函數形式如果要執行,則後面要再加一個小括號
其本質是JavaScript在執行過程中會創造可執行上下文,可執行上下文中的詞法環境中含有外部詞法環境的參照,我們可以通過這個參照獲取外部詞法環境的變數、宣告等,這些參照串聯起來一直指向全域性的詞法環境,因此形成了作用域鏈。
ES6 Module和CommonJS模組的區別:
CommonJS是對模組的淺拷貝,ES6 Module是對模組的參照,即ES6 Module只存唯讀,不能改變其值,具體點就是指標指向不能變,類似const
import的介面是read-only(唯讀狀態),不能修改其變數值。 即不能修改其變數的指標指向,但可以改變變數內部指標指向,可以對commonJS對重新賦值(改變指標指向),
ES6 Module和CommonJS模組的共同點:
CommonJS和ES6 Module都不可以對引入的物件進行賦值,即對物件內部屬性的值進行改變。
null表示為空,代表此處不應該有值的存在,一個物件可以是null,代表是個空物件,而null本身也是物件。
undefined表示『不存在』,JavaScript是一門動態型別語言,成員除了表示存在的空值外,還有可能根本就不 存在(因為存不存在只在執行期才知道),這就是undefined的意義所在
箭頭函數並沒有屬於自己的this,它的所謂的this是捕獲其所在上下文的 this 值,作為自己的 this 值,並且由於 沒有屬於自己的this,而箭頭函數是不會被new呼叫的,這個所謂的this也不會被改變.
是一套關於非同步解決的方案
兩個作用1.求值關鍵字2.非同步操作變為同步操作
1.程式碼讀起來更加同步,改善Promise.then鏈
2.Promise傳遞中間值非常麻煩,async/await幾乎是同步的寫法,看著簡潔明瞭
3.錯誤處理友好,async/await可以用成熟的try/catch,Promise的錯誤捕獲非常冗餘
4.偵錯友好,Promise的偵錯很差。
基本型別儲存在棧中
複雜型別會儲存在記憶體堆中
棧:
1.儲存基本資料型別
2.儲存空間小
3.查詢迅速效能高
堆:
1.存多個值得複合型別
2.儲存空間大
3.查詢速度慢效能較低
深拷貝和淺拷貝是針對複雜的資料型別來說的淺拷貝只拷貝一層,深拷貝是層層拷貝
深拷貝:
複製變數值,對於非基本型別的變數,遞迴到基本型別再複製。與原物件完全隔離互不影響。
最簡單的實現是json.parse(json.stringfy(obj))
淺拷貝:
複製屬性,只拷貝第一層屬性,當前物件的屬性值是參照型別時,實質複製的是參照,參照的值也會發生變化
可以使用for in、object.assign、擴充套件運運算元、遞迴等來實現
渲染的流程如下:
1.解析HTML檔案,建立DOM樹。
自上而下,遇到任何樣式(link、style)與指令碼(script)都會阻塞(外部樣式不阻塞後續外部指令碼的載入)。
2.解析CSS。優先順序:瀏覽器預設設定<使用者設定<外部樣式<內聯樣式<HTML中的style樣式;
3.將CSS與DOM合併,構建渲染樹(Render Tree)
4.佈局和繪製,重繪(repaint)和重排(reflow)
json返回的是一串json格式資料;而jsonp返回的是指令碼程式碼
jsonp跨域的一種方式
原理:
因為瀏覽器有同源策略,所有ajax不能請求資料。但script標籤不受同源策略的影響,所以通過動態建立script標籤來載入伺服器返回的資料,資料就是一個函數的呼叫
冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發。
1.w3c的方法是e.stopPropagation()
2.IE則是使用e.cancelBubble = true
1.w3c的方法是e.preventDefault()
2.IE則是使用e.returnValue = false
「事件冒泡」:事件開始由最具體的元素接受,然後逐級向上傳播
「事件捕捉」:事件由最不具體的節點先接收,然後逐級向下,一直到最具體的
「DOM 事件流」:三個階段:事件捕捉,目標階段,事件冒泡
1.Cookie 數量和長度的限制。每個 domain 最多隻能有 20 條 cookie,每個 cookie 長度 不能超過 4KB,否則會被截掉。
2.安全性問題。如果 cookie 被人攔截了,那人就可以取得所有的 session 資訊。即使加密也與事無補,因為攔截者並不需要知道 cookie 的意義,他只要原樣轉發 cookie 就可以達到目的了。
3.有些狀態不可能儲存在使用者端。
1.程式碼重用
2.避免全域性變數(名稱空間,封閉空間,模組化 mvc…)
3.拆分函數避免函數過於臃腫
JavaScript 中有嚴格比較和型別轉換比較:
提升(hoisting)是 JavaScript 直譯器將所有變數和函數宣告移動到當前作用域頂部的操作。有兩種型別的提升:
無論 var(或函數宣告)出現在作用域的什麼地方,它都屬於整個作用域,並且可以在該作用域內的任何地方存取它。