js高級
函式
函式
- 函式也是物件
- 函式具備行為，可以被呼叫
- 用來減少代碼量，復用，隔離變數，減少命名污染
函式分類
- 普通的函式
- 建構式
- IIFE(匿名函式自呼叫)
- 回呼函式(事件的回呼，定時器的回呼)
函式的this
- 理解this：
- 關鍵字
- 變數
- this的指向問題
- 函式this不是函式定義的時候決定的
- 函式this指向誰看如何呼叫當前的函式
- this指向分類
- 函式自呼叫： window
- 建構式(new function): 當前建構式的實體物件
- 物件.方法(): 物件本身
- fun.call/apply(指定的物件): 指定的物件
<!--
1. this是什么?
* 一個關鍵字, 一個內置的參考變數
* 在函式中都可以直接使用this
* this代表呼叫函式的當前物件
* 在定義函式時, this還沒有確定, 只有在執行時才動態確定(系結)的
2. 如何確定this的值?
* test()
* obj.test()
* new test()
* test.call(obj)
前置知識:
* 本質上任何函式在執行時都是通過某個物件呼叫的
-->
<script type="text/javascript">
console.log(this); // window
console.log(window);
// 函式this的指向問題
function fun() {
console.log(this);
}
fun(); // window
new fun(); // 當前建構式的實體物件
var obj = {
fun: fun
}
obj.fun(); // obj
</script>
原型
什么是原型物件
1. 每個函式都有一個prototype屬性，該屬性指向的是原型物件(顯示原型物件)
2. 每個實體物件身上都有一個__proto__屬性，該屬性指向的也是原型物件(隱式原型物件)
3. 建構式的顯示原型 === 當前建構式實體物件的隱式原型物件
4. 原型物件的本質： 普通的Object實體
什么是原型鏈
1. 查找物件的屬性的時候現在自身找，如果自身沒有沿著__proto__找原型物件
2. 如果原型物件上還沒有，繼續沿著__proto__,直到找到Object的原型物件物件
3. 如果還沒有找到回傳undefined
4. 原型鏈： 沿著__proto__查找的這條鏈就是原型鏈
變數提升 & 函式提升
1. js引擎在js代碼正式執行之前會做一些預決議的作業
2. 找關鍵字： var， function
3. 找到var以后將var后邊的變數提前宣告，但是不賦值 var a;
4. 找到function以后定義對應的函式，也就是說函式在預決議的時候已經定義完畢
5. 預決議： 全域預決議，區域預決議
6. 注意：
- 全域預決議在定義函式的時候不關心函式是否被使用
- 函式區域預決議的時候如果內部函式沒有被使用就不會提前定義
執行背景關系
1. 理解：
- 執行背景關系抽象的概念，代表了代碼執行的環境，包含： 執行環境，變數物件，this，作用域鏈
2. 流程：
- js引擎在js代碼正式執行之前會先創建一個執行環境(開發商批的地，工程隊施工的環境)
- 進入該環境以后創建一個變數物件(打地基)，該物件用于收集當前環境下的： 變數，函式，函式的引數，this
- 找關鍵字var ，function
- 確認this的指向
- 創建作用域鏈
3. 重點：
- 執行背景關系是動態創建的
- 尤其是針對函式，每呼叫一次函式都會創建一次執行背景關系
作用域
作用域理解
- 抽象的概念
- 用來決定代碼執行的范圍， 變數所屬的范圍
- 作用域是代碼定義的時候決定的
- 作用域作用：
- 隔離變數
- 規定其之后的作用域鏈是什么樣的，體現： [[scopes]]: 上一級作用域鏈
作用域鏈
- 作用域鏈式一個陣列結構
- 該結構內保存的是一個個的變數物件
- 作用域鏈什么時候創建的：在js代碼正式執行之前創建的
閉包
閉包形成的條件
- 函式嵌套
- 內部函式參考外部函式的區域變數
- 內部函式被使用，注意： 函式變數提升的時候如果內部函式沒有被使用，在預決議的程序中不會定義內部函式
什么是閉包
- 閉包是一個存在內部函式的參考關系
- 該參考指向的是外部函式的區域變數物件(前提是內部函式使用了外部函式的區域變數)
// 1. 將函式作為另一個函式的回傳值
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2
}
var f = fn1()
f() // 3
f() // 4
// 2. 將函式作為實參傳遞給另一個函式呼叫
function showMsgDelay(msg, time) {
setTimeout(function () {
console.log(msg)
}, time)
}
showMsgDelay('hello', 1000)
閉包的作用
- 延長外部函式變數物件的生命周期
- 使用閉包能夠間接的從函式外部訪問函式內部的私有變數
閉包的優缺點
- 優點： 延長外部函式變數物件的生命周期
- 缺點： 延長外部函式變數物件的生命周期(占記憶體，如果不及時清除容易造成記憶體溢位，泄漏)
使用閉包的時候注意：
- 及時清除閉包
- 讓內部的函式成為垃圾物件 —> 內部函式身上沒有指標指向
new運算子都干了哪些事情
1. 創建一個空物件
2. 將this指向該空物件
3. 執行函式
4. 將執行的結果回傳
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255914.html
標籤：其他
上一篇：Canvas學習參考檔案
下一篇：2021前端性能優化手段總結