「高頻JS手寫(xiě)」20+高頻JS手寫(xiě)題總結(jié)

前言

這篇文章主要是 總結(jié) + 實(shí)踐一些比較常見(jiàn)且重要的JS手寫(xiě)題，方便自己以及大家學(xué)習(xí)參考 。

1. 數(shù)據(jù)類(lèi)型判斷

核心思想：typeof 可以判斷 Undefined、String、Number、Boolean 、Symbol
、Function類(lèi)型的數(shù)據(jù)，但對(duì)其他的都會(huì)認(rèn)為是Object，比如Null、Array等。所以通過(guò)typeof來(lái)判斷數(shù)據(jù)類(lèi)型會(huì)不準(zhǔn)確 。

解決方法：可以通過(guò)Object.prototype.toString解決。

實(shí)現(xiàn)：

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

1. 使用call 是為了綁定 this 到 obj 上
2. 使用slice 是因?yàn)檫@前面返回的結(jié)果是類(lèi)似[Object xxx]這樣的, xxx 是根據(jù) obj 的類(lèi)型變化的
3. 使用toLowerCase 是因?yàn)樵鷗ypeof的返回結(jié)果的第一個(gè)字母是小寫(xiě)字母
   。

2. 繼承

2.1 原型繼承

核心思想：子類(lèi)的原型成為父類(lèi)的實(shí)例

實(shí)現(xiàn)
：

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

原型繼承存在的問(wèn)題：

1. 原型中包含的引用類(lèi)型屬性將被所有實(shí)例對(duì)象共享
2. 子類(lèi)在實(shí)例化時(shí)不能給父類(lèi)構(gòu)造函數(shù)傳參

2.2 構(gòu)造函數(shù)繼承

核心思想
：在子類(lèi)構(gòu)造函數(shù)中調(diào)用父類(lèi)構(gòu)造函數(shù)

實(shí)現(xiàn) ：

function SuperType(name) {     this.name = name;    this.colors = ['red', 'green'];    this.getName = function() {         return this.name;    }}function SubType(name) {     // 繼承 SuperType 并傳參    SuperType.call(this, name);}// 測(cè)試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']復(fù)制代碼

構(gòu)造函數(shù)繼承的出現(xiàn)是為了解決了原型繼承的引用值共享問(wèn)題。優(yōu)點(diǎn)是可以在子類(lèi)構(gòu)造函數(shù)中向父類(lèi)構(gòu)造函數(shù)傳參。它存在的問(wèn)題是