基礎總結深入

---

一、數據類型

基本值類型：

? ? ? ? String：任意字符串、Number：任意的數字、boolean：true/false、undefined：undefined、null：null

對象引用類型：

? ? ? ? Object：任意對象、Function：一種特別的對象（可以執行）、Array：一種特別的對象（內部數據是有序的）

判斷：

? ? ? ? typeof：返回數據類型的字符串表達，可以判斷：undefined / 數值 / 字符串 / 布爾值

????????instanceof：判斷對象的具體類型，返回的是boolean值? ? ?

????????===：判斷值和類型全等，可以判斷：undefined，null

<script>var a;console.log(typeof a === "undefined"); //返回的是true typeof返回的是'undefined'var b = {}console.log(b instanceof Object) //true </script>

二、數據類型相關問題

1、undefined與null的區別？

? ? ? ? 答：undefined代表定義未賦值。null定義了并賦值了，只是值為null

2、什么時候給變量賦值為null呢？

? ? ? ? 答：初始賦值，表明將要賦值為對象。結束前，讓對象稱為垃圾對象（被垃圾回收器回收）

3、基本類型：存儲就是基本類型的數據、引用類型：保存的是地址值

三、數據_變量_內存

數據：存儲在內存中代表特定的信息。本質是010101010...

內存：可存儲數據的空間（臨時的）。棧：全局變量\局部變量。堆：對象

變量：可變化的量，變量名 變量值組成。

四、數據_變量_內存相關問題

1、var a = xxx，a內存中到底保存的是什么

? ? ? ? 答：xxx是基本數據，保存的就是這個數據。xxx是對象，保存的是這個數據。xxx是一個變量，保存的可能是(基本類型，也可能是地址值)

2、引用變量轉遞的是什么？

? ? ? ? 答：傳遞的是一個地址值，一個對象賦值一個新對象地址就不一樣了

3、在js調用時傳遞變量參數，是值傳遞還是引用傳遞？

? ? ? ? 答：傳遞的時候就可以看他類型，判斷他傳遞得類型

4、JS引擎如何管理內存

? ? ? ? 內存生命周期：分配最小內存空間，得到他的使用權，存儲數據，可以反復操作。釋放小內存空間

? ? ? ? 釋放內存：局部變量函數執行完自動釋放。對象成為垃圾對象，垃圾回收器回收

五、對象

對象：多個數據的封裝體，用來保存多個數據的容器，一個對象代表現實的一個事物

為什么要使用對象：統一管理多個數據

對象的組成：屬性名（本質上是字符串）和屬性值（任意類型）組成

訪問對象內部數據

? ? ? ? .屬性名：編碼簡單，有時不能用

? ? ? ? ["屬性名"]：編碼麻煩，能通用：屬性名包含特殊字符 - 空格? ? ? ? 屬性名不確定時用

<script>var a = {}a["context-type"] = "html/text" </script>

六、函數

1、什么是函數：實現特定功能的封裝體。只有函數可以執行，其余的不行

2、為什么要使用函數：提高代碼的復用性，便于閱讀交流

3、如何定義函數：

<script>function fn1(){ //函數生命式console.log(123);}var fn2 = function(){ //表達式console.log(123);} </script>

4、如何執行函數：test()：直接調用、obj.test()：通過對象調用、new test()：new調用

test.apply(obj)：臨時讓test成為obj的方法進行調用。類式obj.test

test.call(obj)：可以讓一個函數成為指定任意對象的方法進行調用

<script>var obj = {}function fn1(){console.log(123);}fn1.call(obj)fn1.apply(obj) </script>

七、回調函數

生命函數才是回調函數：你定義的、你沒有調、但他最終執行了

常見的回調函數：dom事件回調函數，定時器回調函數、ajax請求回調函數、生命周期回調函數

<script>setTimeout(()=>{console.log(123);},3000)</script>

八、IIFE

1、理解：全程Immediately-Invoked Function Expression? ? ? ? 立即執行函數

2、作用：不會污染外部命名

<script>(function(){console.log(123);})()</script>

九、函數中的this

this是什么：所有函數本質上都是通過某個對象調用的，如果沒有直接指定就是window、所有函數內部都有一個this，他的值是調用函數的當前對象

如何確定this的值：test()：window? ? ? ? p.test()：p? ? ? ? new test()：新創建的對象? ? ? ? p.call(obj,test)：obj

函數高級

---

一、函數的prototype屬性

每個屬性都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象），原型對象中有一個屬性constructor，她指向函數對象

給原型對象添加屬性（一般都是方法）：作用函數的所有實例對象自動擁有原型中的屬性（方法）

<script>function Fun(){}Fun.prototype.test = function(){console.log(123);}var fn = new Fun()fn.test()console.log(fn); </script>

二、顯式原型與隱式原型

每個函數function都有一個prototype，即顯式原型（屬性）

每個實例對象都有一個__proto__，可稱為隱式原型（屬性）

對象的隱式原型的值為其對應構造函數的顯示原型的值

函數的prototype屬性：在定義函數時自動添加的，默認值是一個空的Object對象

對象的__proto__屬性：創建對象時自動添加的，默認值為構造函數的protope屬性值

程序員能直接操作顯示原型，但不能直接操作隱式原型(ES6之前)

三、原型鏈

訪問一個對象屬性時：

? ? ? ? 現在自身屬性中查找，找到返回

? ? ? ? 如果沒有，再沿著__proto__這條鏈向上查找，找到返回

? ? ? ? 如果最終沒有找到，返回undefined

讀取對象的屬性值時：會自動到原型鏈中查找

設置對象的屬性值時：不會查找原型鏈，如果當前對象沒有此屬性，直接添加屬性并設置其值

方法一般定義在原型中屬性一般通過構造函數定義在對象本身上

如果指定的屬性在指定的對象或其原型鏈中，則?in?運算符返回?true

<script>var obj = {name:"張三"}console.log("name" in obj); //true </script>

四、instanceof是如何判斷的

表達式：A instanceof B 如果B函數的顯示原型對象在A對象的原型鏈上，返回true，否則返回false

五、變量提升與函數提升

變量提升：通過var定義的變量在語句之間就可以訪問到，但是值為undefind

函數聲明提升：通過function聲明的函數，在之前就可以調用

先執行變臉提升，在執行函數提升

//執行順序 var a; function a(a){} a=2 a(1)//報錯

六、執行上下文

全局執行上下文：window? ?a = 3? ? 相當于? ? window.a

函數執行上下文：function(){ }? ?一個函數算一個上下文

七、作用域和作用域鏈

上下文環境（對象）是從屬于所在的作用域、全局上下文環境====》全局作用域、函數上下文環境===》函數作用域

作用域是靜態的，并不會說放在其他函數里執行而改變作用域的位置

<script>var x = 10function fn(){console.log(x);}function show(f){var x = 20f()}show(fn) //輸出的是10 </script>

八、閉包

小知識：for(var a = 0,length = array.length; a < length;a ++) 這樣能提升效率

如何產生閉包：當一個嵌套內部（子）函數引用了嵌套的外部（父）函數的變量（函數）時，就產生了閉包

使用函數內部的變量在函數執行完后，任然存活在內存中（延長了局部變量的生命周期）

讓函數外部可以操作（讀寫）到函數內部的數據（變量/函數）

<script> function fn(){var a = 10function add(){a++console.log(a);}function reduce(){a--console.log(a);}return {add,reduce} }var obj = fn() obj.add() //11 obj.reduce() //10 </script>

閉包的缺點：

? ? ? ? 函數執行后，函數內的局部變量沒有釋放，占用內存時間會變長，容易造成內存泄漏

解決：能不用閉包就不用，及時釋放

總結

以上是生活随笔為你收集整理的尚硅谷-----JS高级的全部內容，希望文章能夠幫你解決所遇到的問題。

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