「高頻JS手寫」20+高頻JS手寫題總結

前言

這篇文章主要是 總結 + 實踐一些比較常見且重要的JS手寫題，方便自己以及大家學習參考
。

1. 數據類型判斷

核心思想：typeof 可以判斷 Undefined、String 、Number、Boolean、Symbol 、Function類型的數據，但對其他的都會認為是Object，比如Null
、Array等 。所以通過typeof來判斷數據類型會不準確 
。

解決方法 ：可以通過Object.prototype.toString解決。

實現：

function mytypeof(obj) {     return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();}復制代碼

1. 使用call 是為了綁定 this 到 obj 上
2. 使用slice 是因為這前面返回的結果是類似[Object xxx]這樣的, xxx 是根據 obj 的類型變化的
3. 使用toLowerCase 是因為原生typeof的返回結果的第一個字母是小寫字母 。

2. 繼承

2.1 原型繼承

核心思想
：子類的原型成為父類的實例

實現：

function SuperType() {     this.colors = ['red', 'green'];}function SubType() { }// 原型繼承關鍵: 子類的原型成為父類的實例SubType.prototype = new SuperType();// 測試let instance1 = new SubType();instance1.colors.push('blue');let instance2 = new SubType();console.log(instance2.colors);  // ['red', 'green', 'blue']復制代碼

原型繼承存在的問題：

1. 原型中包含的引用類型屬性將被所有實例對象共享
2. 子類在實例化時不能給父類構造函數傳參

2.2 構造函數繼承

核心思想：在子類構造函數中調用父類構造函數

實現
：

function SuperType(name) {     this.name = name;    this.colors = ['red', 'green'];    this.getName = function() {         return this.name;    }}function SubType(name) {     // 繼承 SuperType 并傳參    SuperType.call(this, name);}// 測試let instance1 = new SubType('instance1');instance1.colors.push('blue');console.log(instance1.colors); // ['red','green','blue']let instance2 = new SubType('instance2');console.log(instance2.colors);  // ['red', 'green']復制代碼

構造函數繼承的出現是為了解決了原型繼承的引用值共享問題。優(yōu)點是可以在子類構造函數中向父類構造函數傳參。它存在的問題是：1)由于方法必須在構造函數中定義