原生JS知識點整理

摘要： 1. 基本型別有哪幾種？null 是物件嗎？基本資料型別和複雜資料型別儲存有什麼區別？ 基本型別有6種，分別是undefined,null,bool,string,number,symbol(ES6新增)。 雖然 typeof null 返回的值是 object,但是null...

1. 基本型別有哪幾種？null 是物件嗎？基本資料型別和複雜資料型別儲存有什麼區別？

• 基本型別有6種，分別是undefined,null,bool,string,number,symbol(ES6新增)。
• 雖然 typeof null 返回的值是 object,但是null不是物件，而是基本資料型別的一種。
• 基本資料型別儲存在棧記憶體，儲存的是值。
• 複雜資料型別儲存在堆記憶體，儲存的是地址。當我們把物件賦值給另外一個變數的時候，複製的是地址，指向同一塊記憶體空間，當其中一個物件改變時，另一個物件也會變化。

2. typeof 是否正確判斷型別? instanceof呢？ instanceof 的實現原理是什麼？

首先 typeof 能夠正確的判斷基本資料型別，但是除了 null, typeof null輸出的是物件。

但是物件來說，typeof 不能正確的判斷其型別， typeof 一個函式可以輸出 'function',而除此之外，輸出的全是 object,這種情況下，我們無法準確的知道物件的型別。

instanceof可以準確的判斷複雜資料型別，但是不能正確判斷基本資料型別。(正確判斷資料型別請戳： github.com/YvetteLau/B… )

instanceof 是通過原型鏈判斷的，A instanceof B, 在A的原型鏈中層層查詢，是否有原型等於B.prototype，如果一直找到A的原型鏈的頂端(null;即 Object.prototype.__proto__ ),仍然不等於B.prototype，那麼返回false，否則返回true.

instanceof的實現程式碼:

// L instanceof R
function instance_of(L, R) {//L 表示左表示式，R 表示右表示式
var O = R.prototype;// 取 R 的顯式原型
L = L.__proto__;// 取 L 的隱式原型
while (true) { 
if (L === null) //已經找到頂層
return false;
if (O === L)//當 O 嚴格等於 L 時，返回 true
return true; 
L = L.__proto__;//繼續向上一層原型鏈查詢
} 
}
複製程式碼複製程式碼

3. for of , for in 和 forEach,map 的區別。

• for...of迴圈：具有 iterator 介面，就可以用for...of迴圈遍歷它的成員(屬性值)。for...of迴圈可以使用的範圍包括陣列、Set 和 Map 結構、某些類似陣列的物件、Generator 物件，以及字串。for...of迴圈呼叫遍歷器介面，陣列的遍歷器介面只返回具有數字索引的屬性。對於普通的物件，for...of結構不能直接使用，會報錯，必須部署了 Iterator 介面後才能使用。可以中斷迴圈。

• for...in迴圈：遍歷物件自身的和繼承的可列舉的

  屬性

  , 不能直接獲取屬性值。可以中斷迴圈。

• forEach: 只能遍歷陣列，不能中斷，沒有返回值(或認為返回值是undefined)。
• map: 只能遍歷陣列，不能中斷，返回值是修改後的陣列。

PS: Object.keys()：返回給定物件所有可列舉

屬性的字串陣列

。

關於forEach是否會改變原陣列的問題，有些小夥伴提出了異議，為此我寫了程式碼測試了下(注意陣列項是複雜資料型別的情況)。 除了forEach之外，map等API，也有同樣的問題。

let arry = [1, 2, 3, 4];

arry.forEach((item) => {
item *= 10;
});
console.log(arry); //[1, 2, 3, 4]

arry.forEach((item) => {
arry[1] = 10; //直接運算元組
});
console.log(arry); //[ 1, 10, 3, 4 ]

let arry2 = [
{ name: "Yve" },
{ age: 20 }
];
arry2.forEach((item) => {
item.name = 10;
});
console.log(arry2);//[ { name: 10 }, { age: 20, name: 10 } ]
複製程式碼複製程式碼

如還不瞭解 iterator 介面或 for...of, 請先閱讀ES6文件: Iterator 和 for...of 迴圈

更多細節請戳: github.com/YvetteLau/B…

4. 如何判斷一個變數是不是陣列？

• 使用 Array.isArray 判斷，如果返回 true, 說明是陣列
• 使用 instanceof Array 判斷，如果返回true, 說明是陣列
• 使用 Object.prototype.toString.call 判斷，如果值是 [object Array], 說明是陣列
• 通過 constructor 來判斷，如果是陣列，那麼 arr.constructor === Array . (不準確，因為我們可以指定 obj.constructor = Array )

function fn() {
console.log(Array.isArray(arguments));//false; 因為arguments是類陣列，但不是陣列
console.log(Array.isArray([1,2,3,4]));//true
console.log(arguments instanceof Array); //fasle
console.log([1,2,3,4] instanceof Array); //true
console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
console.log(Object.prototype.toString.call([1,2,3,4])); //[object Array]
console.log(arguments.constructor === Array); //false
arguments.constructor = Array;
console.log(arguments.constructor === Array); //true
console.log(Array.isArray(arguments));//false
}
fn(1,2,3,4);
複製程式碼複製程式碼

5. 類陣列和陣列的區別是什麼？

類陣列:

1）擁有length屬性，其它屬性（索引）為非負整數（物件中的索引會被當做字串來處理）;

2）不具有陣列所具有的方法；

類陣列是一個普通物件，而真實的陣列是Array型別。

常見的類陣列有: 函式的引數 arugments, DOM 物件列表(比如通過 document.querySelectorAll 得到的列表), jQuery 物件 (比如 $("div")).

類陣列可以轉換為陣列:

//第一種方法
Array.prototype.slice.call(arrayLike, start);
//第二種方法
[...arrayLike];
//第三種方法:
Array.from(arrayLike);
複製程式碼複製程式碼

PS: 任何定義了遍歷器（Iterator）介面的物件，都可以用擴充套件運算子轉為真正的陣列。

Array.from方法用於將兩類物件轉為真正的陣列：類似陣列的物件（array-like object）和可遍歷（iterable）的物件。

6. == 和 === 有什麼區別？

=== 不需要進行型別轉換，只有型別相同並且值相等時，才返回 true.

== 如果兩者型別不同，首先需要進行型別轉換。具體流程如下:

1. 首先判斷兩者型別是否相同，如果相等，判斷值是否相等.
2. 如果型別不同，進行型別轉換
3. 判斷比較的是否是 null 或者是 undefined, 如果是, 返回 true .
4. 判斷兩者型別是否為 string 和 number, 如果是, 將字串轉換成 number
5. 判斷其中一方是否為 boolean, 如果是, 將 boolean 轉為 number 再進行判斷
6. 判斷其中一方是否為 object 且另一方為 string、number 或者 symbol , 如果是, 將 object 轉為原始型別再進行判斷

let person1 = {
age: 25
}
let person2 = person1;
person2.gae = 20;
console.log(person1 === person2); //true,注意複雜資料型別，比較的是引用地址
複製程式碼複製程式碼

思考: [] == ![]

我們來分析一下: [] == ![] 是true還是false？

1. 首先，我們需要知道 ! 優先順序是高於 == (更多運算子優先順序可檢視:運算子優先順序)
2. ![] 引用型別轉換成布林值都是true,因此 ![] 的是false
3. 根據上面的比較步驟中的第五條，其中一方是 boolean，將 boolean 轉為 number 再進行判斷，false轉換成 number，對應的值是 0.
4. 根據上面比較步驟中的第六條，有一方是 number，那麼將object也轉換成Number,空陣列轉換成數字，對應的值是0.(空陣列轉換成數字，對應的值是0，如果陣列中只有一個數字，那麼轉成number就是這個數字，其它情況，均為NaN)
5. 0 == 0; 為true

7. ES6中的class和ES5的類有什麼區別？

1. ES6 class 內部所有定義的方法都是不可列舉的;
2. ES6 class 必須使用 new 呼叫;
3. ES6 class 不存在變數提升;
4. ES6 class 預設即是嚴格模式;
5. ES6 class 子類必須在父類的建構函式中呼叫super()，這樣才有this物件;ES5中類繼承的關係是相反的，先有子類的this，然後用父類的方法應用在this上。

8. 陣列的哪些API會改變原陣列？

修改原陣列的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原陣列的API有:

slice/map/forEach/every/filter/reduce/entries/find

注: 陣列的每一項是簡單資料型別，且未直接運算元組的情況下(稍後會對此題重新作答)。

9. let、const 以及 var 的區別是什麼？

• let 和 const 定義的變數不會出現變數提升，而 var 定義的變數會提升。
• let 和 const 是JS中的塊級作用域
• let 和 const 不允許重複宣告(會丟擲錯誤)
• let 和 const 定義的變數在定義語句之前，如果使用會丟擲錯誤(形成了暫時性死區)，而 var 不會。
• const 宣告一個只讀的常量。一旦宣告，常量的值就不能改變(如果宣告是一個物件，那麼不能改變的是物件的引用地址)

10. 在JS中什麼是變數提升？什麼是暫時性死區？

變數提升就是變數在宣告之前就可以使用，值為undefined。

在程式碼塊內，使用 let/const 命令宣告變數之前，該變數都是不可用的(會丟擲錯誤)。這在語法上，稱為“暫時性死區”。暫時性死區也意味著 typeof 不再是一個百分百安全的操作。

typeof x; // ReferenceError(暫時性死區，拋錯)
let x;
複製程式碼複製程式碼

typeof y; // 值是undefined,不會報錯
複製程式碼複製程式碼

暫時性死區的本質就是，只要一進入當前作用域，所要使用的變數就已經存在了，但是不可獲取，只有等到宣告變數的那一行程式碼出現，才可以獲取和使用該變數。

11. 如何正確的判斷this? 箭頭函式的this是什麼？

this的繫結規則有四種：預設繫結，隱式繫結，顯式繫結，new繫結.

1. 函式是否在 new 中呼叫(new繫結)，如果是，那麼 this 繫結的是新建立的物件。
2. 函式是否通過 call,apply 呼叫，或者使用了 bind (即硬繫結)，如果是，那麼this繫結的就是指定的物件。
3. 函式是否在某個上下文物件中呼叫(隱式繫結)，如果是的話，this 繫結的是那個上下文物件。一般是 obj.foo()
4. 如果以上都不是，那麼使用預設繫結。如果在嚴格模式下，則繫結到 undefined，否則繫結到全域性物件。
5. 如果把 null 或者 undefined 作為 this 的繫結物件傳入 call、apply 或者 bind, 這些值在呼叫時會被忽略，實際應用的是預設繫結規則。
6. 箭頭函式沒有自己的 this, 它的this繼承於上一層程式碼塊的this。

測試下是否已經成功Get了此知識點(瀏覽器執行環境):

var number = 5;
var obj = {
number: 3,
fn1: (function () {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function () {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
})()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);
複製程式碼複製程式碼

如果this的知識點，您還不太懂，請戳: 嗨，你真的懂this嗎？

12. 詞法作用域和this的區別。

• 詞法作用域是由你在寫程式碼時將變數和塊作用域寫在哪裡來決定的
• this 是在呼叫時被繫結的，this 指向什麼，完全取決於函式的呼叫位置(關於this的指向問題，本文已經有說明)

13. 談談你對JS執行上下文棧和作用域鏈的理解。

執行上下文就是當前 JavaScript 程式碼被解析和執行時所在環境, JS執行上下文棧可以認為是一個儲存函式呼叫的棧結構，遵循先進後出的原則。

• JavaScript執行在單執行緒上，所有的程式碼都是排隊執行。
• 一開始瀏覽器執行全域性的程式碼時，首先建立全域性的執行上下文，壓入執行棧的頂部。
• 每當進入一個函式的執行就會建立函式的執行上下文，並且把它壓入執行棧的頂部。當前函式執行-完成後，當前函式的執行上下文出棧，並等待垃圾回收。
• 瀏覽器的JS執行引擎總是訪問棧頂的執行上下文。
• 全域性上下文只有唯一的一個，它在瀏覽器關閉時出棧。

作用域鏈: 無論是 LHS 還是 RHS 查詢，都會在當前的作用域開始查詢，如果沒有找到，就會向上級作用域繼續查詢目標識別符號，每次上升一個作用域，一直到全域性作用域為止。

題難不難？

不難！

繼續挑戰一下！

難！

知道難，就更要繼續了！

14. 什麼是閉包？閉包的作用是什麼？閉包有哪些使用場景？

閉包是指有權訪問另一個函式作用域中的變數的函式，建立閉包最常用的方式就是在一個函式內部建立另一個函式。

閉包的作用有:

1. 封裝私有變數
2. 模仿塊級作用域(ES5中沒有塊級作用域)
3. 實現JS的模組

15. call、apply有什麼區別？call,aplly和bind的內部是如何實現的？

call 和 apply 的功能相同，區別在於傳參的方式不一樣:

• fn.call(obj, arg1, arg2, ...),呼叫一個函式, 具有一個指定的this值和分別地提供的引數(引數的列表)。

• fn.apply(obj, [argsArray]),呼叫一個函式，具有一個指定的this值，以及作為一個數組（或類陣列物件）提供的引數。

call核心:

• 將函式設為傳入引數的屬性
• 指定this到函式並傳入給定引數執行函式
• 如果不傳入引數或者引數為null，預設指向為 window / global
• 刪除引數上的函式

Function.prototype.call = function (context) {
/** 如果第一個引數傳入的是 null 或者是 undefined, 那麼指向this指向 window/global */
/** 如果第一個引數傳入的不是null或者是undefined, 那麼必須是一個物件 */
if (!context) {
//context為null或者是undefined
context = typeof window === 'undefined' ? global : window;
}
context.fn = this; //this指向的是當前的函式(Function的例項)
let rest = [...arguments].slice(1);//獲取除了this指向物件以外的引數, 空陣列slice後返回的仍然是空陣列
let result = context.fn(...rest); //隱式繫結,當前函式的this指向了context.
delete context.fn;
return result;
}

//測試程式碼
var foo = {
name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
console.log(this.name);
console.log(job, age);
}
bar.call(foo, 'programmer', 20);
// Selina programmer 20
bar.call(null, 'teacher', 25);
// 瀏覽器環境: Chirs teacher 25; node 環境: undefined teacher 25

複製程式碼複製程式碼

apply:

apply的實現和call很類似，但是需要注意他們的引數是不一樣的，apply的第二個引數是陣列或類陣列.

Function.prototype.apply = function (context, rest) {
if (!context) {
//context為null或者是undefined時,設定預設值
context = typeof window === 'undefined' ? global : window;
}
context.fn = this;
let result;
if(rest === undefined || rest === null) {
//undefined 或者 是 null 不是 Iterator 物件，不能被 ...
result = context.fn(rest);
}else if(typeof rest === 'object') {
result = context.fn(...rest);
}
delete context.fn;
return result;
}
var foo = {
name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
console.log(this.name);
console.log(job, age);
}
bar.apply(foo, ['programmer', 20]);
// Selina programmer 20
bar.apply(null, ['teacher', 25]);
// 瀏覽器環境: Chirs programmer 20; node 環境: undefined teacher 25
複製程式碼複製程式碼

bind

bind 和 call/apply 有一個很重要的區別，一個函式被 call/apply 的時候，會直接呼叫，但是 bind 會建立一個新函式。當這個新函式被呼叫時，bind() 的第一個引數將作為它執行時的 this，之後的一序列引數將會在傳遞的實參前傳入作為它的引數。

Function.prototype.bind = function(context) {
if(typeof this !== "function"){
throw new TypeError("not a function");
}
let self = this;
let args = [...arguments].slice(1);
function Fn() {};
Fn.prototype = this.prototype;
let bound = function() {
let res = [...args, ...arguments]; //bind傳遞的引數和函式呼叫時傳遞的引數拼接
context = this instanceof Fn ? this : context || this;
return self.apply(context, res);
}
//原型鏈
bound.prototype = new Fn();
return bound;
}

var name = 'Jack';
function person(age, job, gender){
console.log(this.name , age, job, gender);
}
var Yve = {name : 'Yvette'};
let result = person.bind(Yve, 22, 'enginner')('female');
複製程式碼複製程式碼

16. new的原理是什麼？通過new的方式建立物件和通過字面量建立有什麼區別？

new:

1. 建立一個新物件。
2. 這個新物件會被執行[[原型]]連線。
3. 將建構函式的作用域賦值給新物件，即this指向這個新物件.
4. 如果函式沒有返回其他物件，那麼new表示式中的函式呼叫會自動返回這個新物件。

function new(func) {
let target = {};
target.__proto__ = func.prototype;
let res = func.call(target);
if (typeof(res) == "object" || typeof(res) == "function") {
return res;
}
return target;
}
複製程式碼複製程式碼

字面量建立物件，不會呼叫 Object建構函式, 簡潔且效能更好;

new Object() 方式建立物件本質上是方法呼叫，涉及到在proto鏈中遍歷該方法，當找到該方法後，又會生產方法呼叫必須的 堆疊資訊，方法呼叫結束後，還要釋放該堆疊，效能不如字面量的方式。

通過物件字面量定義物件時，不會呼叫Object建構函式。

17. 談談你對原型的理解？

在 JavaScript 中，每當定義一個物件（函式也是物件）時候，物件中都會包含一些預定義的屬性。其中每個函式物件都有一個prototype 屬性，這個屬性指向函式的原型物件。使用原型物件的好處是所有物件例項共享它所包含的屬性和方法。

18. 什麼是原型鏈？【原型鏈解決的是什麼問題？】

原型鏈解決的主要是繼承問題。

每個物件擁有一個原型物件，通過 proto (讀音: dunder proto) 指標指向其原型物件，並從中繼承方法和屬性，同時原型物件也可能擁有原型，這樣一層一層，最終指向 null( Object.proptotype.__proto__ 指向的是null)。這種關係被稱為原型鏈 (prototype chain)，通過原型鏈一個物件可以擁有定義在其他物件中的屬性和方法。

建構函式 Parent、Parent.prototype 和 例項 p 的關係如下: (p.__proto__ === Parent.prototype)

19. prototype 和 __proto__ 區別是什麼？

prototype是建構函式的屬性。

__proto__ 是每個例項都有的屬性，可以訪問 [[prototype]] 屬性。

例項的 __proto__ 與其建構函式的prototype指向的是同一個物件。

function Student(name) {
this.name = name;
}
Student.prototype.setAge = function(){
this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true
複製程式碼複製程式碼

20. 使用ES5實現一個繼承？

組合繼承(最常用的繼承方式)

function SuperType() {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}

function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
console.log(this.age);
}
複製程式碼複製程式碼

其它繼承方式實現，可以參考《JavaScript高階程式設計》

21. 什麼是深拷貝？深拷貝和淺拷貝有什麼區別？

淺拷貝是指只複製第一層物件，但是當物件的屬性是引用型別時，實質複製的是其引用，當引用指向的值改變時也會跟著變化。

深拷貝複製變數值，對於非基本型別的變數，則遞迴至基本型別變數後，再複製。深拷貝後的物件與原來的物件是完全隔離的，互不影響，對一個物件的修改並不會影響另一個物件。

實現一個深拷貝:

function deepClone(obj) { //遞迴拷貝
if(obj === null) return null; //null 的情況
if(obj instanceof RegExp) return new RegExp(obj);
if(obj instanceof Date) return new Date(obj);
if(typeof obj !== 'object') {
//如果不是複雜資料型別，直接返回
return obj;
}
/**
* 如果obj是陣列，那麼 obj.constructor 是 [Function: Array]
* 如果obj是物件，那麼 obj.constructor 是 [Function: Object]
*/
let t = new obj.constructor();
for(let key in obj) {
//如果 obj[key] 是複雜資料型別，遞迴
t[key] = deepClone(obj[key]);
}
return t;
}
複製程式碼複製程式碼

看不下去了？別人的

送分題

會成為你的

送命題

22. 防抖和節流的區別是什麼？防抖和節流的實現。

防抖和節流的作用都是防止函式多次呼叫。區別在於，假設一個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。

防抖(debounce): n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

function debounce(func, wait, immediate=true) {
let timeout, context, args;
// 延遲執行函式
const later = () => setTimeout(() => {
// 延遲函式執行完畢，清空定時器
timeout = null
// 延遲執行的情況下，函式會在延遲函式中執行
// 使用到之前快取的引數和上下文
if (!immediate) {
func.apply(context, args);
context = args = null;
}
}, wait);
let debounced = function (...params) {
if (!timeout) {
timeout = later();
if (immediate) {
//立即執行
func.apply(this, params);
} else {
//閉包
context = this;
args = params;
}
} else {
clearTimeout(timeout);
timeout = later();
}
}
debounced.cancel = function () {
clearTimeout(timeout);
timeout = null;
};
return debounced;
};
複製程式碼複製程式碼

防抖的應用場景:

• 每次 resize/scroll 觸發統計事件
• 文字輸入的驗證（連續輸入文字後傳送 AJAX 請求進行驗證，驗證一次就好）

節流(throttle): 高頻事件在規定時間內只會執行一次，執行一次後，只有大於設定的執行週期後才會執行第二次。

//underscore.js
function throttle(func, wait, options) {
var timeout, context, args, result;
var previous = 0;
if (!options) options = {};

var later = function () {
previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};

var throttled = function () {
var now = Date.now() || new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
// 判斷是否設定了定時器和 trailing
timeout = setTimeout(later, remaining);
}
return result;
};

throttled.cancel = function () {
clearTimeout(timeout);
previous = 0;
timeout = context = args = null;
};

return throttled;
};

複製程式碼複製程式碼

函式節流的應用場景有:

• DOM 元素的拖拽功能實現（mousemove）
• 射擊遊戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
• 計算滑鼠移動的距離（mousemove）
• Canvas 模擬畫板功能（mousemove