摘要：本文為知識(shí)整理，可能工作中用到這些東西不多，可是總有人想讓你會(huì)前言小時(shí)候很渴望長(zhǎng)大，羨慕大人們的財(cái)富自由長(zhǎng)大后又很羨慕小時(shí)候，懷念小時(shí)候的無憂無慮，守候著那份天真。哦，還有，不是長(zhǎng)大就能財(cái)富自由。。。

本文為知識(shí)整理，可能工作中用到這些東西不多，可是總有人想讓你會(huì)

前言：小時(shí)候很渴望長(zhǎng)大，羨慕大人們的財(cái)富自由；長(zhǎng)大后又很羨慕小時(shí)候，懷念小時(shí)候的無憂無慮，守候著那份天真。哦，還有，不是長(zhǎng)大就能財(cái)富自由。。。

①：對(duì)象冒充實(shí)現(xiàn)繼承：(可實(shí)現(xiàn)多繼承)

——原理：讓父類構(gòu)造函數(shù)成為子類的方法，然后調(diào)用子類的方法，通過this關(guān)鍵字給所有屬性和方法賦值

function Parent(name)
{
    this.name=name;
    this.sayName=function () {
        console.log(this.name);
    }
}
function Child (cname) {
    this.parent=Parent;
    this.parent(cname);
    delete this.parent; // 刪除無用的parent函數(shù) == f Parent(name)
}
var mychild=new Child("名字");
mychild.sayName();

②：原型鏈繼承 (不能實(shí)現(xiàn)多繼承)

prototype

    function Parent (name, age) {
      this.name = name;
      this.age = age;
      this.ParFunc = function () {
          console.log(this.height)
      }
    };
    Parent.prototype.sayName = function () {
      console.log(this)
    };
    function Child (cname, cage, height) {
      this.height = height
    }

Child.prototype = new Parent(); // Child原型指向Parent的一個(gè)實(shí)例
Child.prototype.constructor = Child; // 把Child指向自己，不與Parent共享
var child = new Child("測(cè)試名字", "測(cè)試年齡", "測(cè)試身高")
console.log(child) // 發(fā)現(xiàn)打印出來的屬性都繼承了，就是沒值

child.ParFunc()：當(dāng)訪問ParFunc屬性時(shí)，會(huì)先在child的實(shí)例屬性中尋找，找不到就去child的原型對(duì)象上去找。一層一層的尋找構(gòu)成了原型鏈

因?yàn)闊o法向父類構(gòu)造函數(shù)傳參;可以 new Parent("名字", "年齡")這時(shí)傳參
注：如果想用原型給Child拓展方法：

Child.prototype.childHeight = function () {
      console.log(this.height)
    }

一定要寫到Child.prototype = new Parent()的下面，要么就被覆蓋掉了。

③：call、apply繼承(不能繼承原型鏈，prototype上的)

        function Parent (name, age) {
          this.name = name;
          this.age = age;
          this.ParFunc = function () {
              console.log(this.name)
          }
        }
        
        function Child (cname, cage, height) {
          Parent.call(this,cname,cage); // 繼承的參數(shù)為當(dāng)前函數(shù)的形參
          // apply: Parent.call(this,arguments);
          this.height = height;
        }
        var child = new Child("測(cè)試名字", "測(cè)試年齡", "測(cè)試身高")
        console.log(child)  //  ParFunc: ? () age: "測(cè)試年齡"
name: "測(cè)試名字"

④：組合繼承：call+原型鏈繼承

function Parent (name, age) {
  this.name = name;
  this.age = age;
  this.ParFunc = function () {
      console.log(this.height)
  }
}
Parent.prototype.sayName = function () {
  console.log(this)
}
function Child (cname, cage, height) {
  Parent.call(this, cname, cage); // 解決傳參問題
  this.height = height;
};
Child.prototype = new Parent()
Child.prototype.constructor = Child; // 把Child指向自己，否則一直指向Parent
var child = new Child("測(cè)試名字", "測(cè)試年齡", "測(cè)試身高")

比較常用的繼承方式，缺點(diǎn)是 兩次調(diào)用 Parent構(gòu)造函數(shù)

⑤：寄生組合繼承：

cal+prototype

function Parent (name, age) { // 父函數(shù)
  this.name = name;
  this.age = age;
  this.ParFunc = function () {
      console.log(this.height)
  }
}
Parent.prototype.sayName = function () {
  console.log(this)
}
function Child (cname, cage, height) { // 子函數(shù)
  Parent.call(this, cname, cage)
  this.height = height;
};
var createObj = function () { // 中間函數(shù)繼承 Parent
  function Trans() {};
  Trans.prototype = Parent.prototype;
  return new Trans();
};
Child.prototype = createObj()
Child.prototype.constructor = Child; // 改回指針
var child = new Child("名字", "年齡", "身高")
console.log(child)

官方定義：

    data-*是 **html5** 新屬性
    主要用于存儲(chǔ)頁面的自定義數(shù)據(jù)
    不應(yīng)該包含大寫字母（會(huì)默認(rèn)轉(zhuǎn)為小寫）
    注釋：用戶代理會(huì)完全忽略前綴為 "data-" 的自定義屬性。

腦海里第一印象就是 getAttribute(),setAttribute()倆屬性了，一個(gè)獲取，一個(gè)設(shè)置
而平時(shí)又很少用到，但是平時(shí)用的框架什么的多數(shù)都用 data-* 這個(gè)自定義屬性，那其實(shí)獲取 data- 這類自定義屬性的時(shí)候，還有個(gè)更方便的方法dataset

eg:var div1 = document.getElementById("div1")
console.log(div1.dataset) // DOMStringMap {a: "測(cè)試", b: "222"}a: "測(cè)試"b: "222"

用data-*作為自定義屬性：可以一句話就獲取到所有屬性，獲取方式也簡(jiǎn)便

先盜個(gè)圖

——冒泡(IE事件流)：從最深的節(jié)點(diǎn)向外傳播，div -> window,就好比往水里丟一個(gè)石子，一層層波浪抵達(dá)河邊緣

——捕獲(網(wǎng)景)：從最外層向目標(biāo)傳遞，window -> div,就好比你去一個(gè)大企業(yè)集團(tuán)找人，需要提供公司 > 大部門 > 小部門 > 小組 > 目標(biāo)

——目標(biāo)：即觸發(fā)過程event.target

——target、currentTarget的區(qū)別：target這個(gè)屬性指向的是目標(biāo)過程中的DOM對(duì)象，也就是 觸發(fā)事件監(jiān)聽的對(duì)象, currentTarget這個(gè)指向的是當(dāng)前的對(duì)象，具體內(nèi)容跟this一樣，當(dāng)this指向的是目標(biāo)的時(shí)候(事件的目標(biāo)階段)，target與currentTarget相同

——現(xiàn)在幾乎所有的主流瀏覽器都支持冒泡；IE早起版本會(huì)跳過html直接跳到document，且不支持捕獲。

——平時(shí)多數(shù)用到冒泡多一些，事件代理(委托)也是通過事件冒泡的原理，讓DOM節(jié)點(diǎn)可追溯，也可以利用冒泡的原理做埋點(diǎn)，避免新增DOM節(jié)點(diǎn)，改代碼上線

——事件句柄addEventListener("事件名", "function", false)，默認(rèn)冒泡

emm... 那不就直接 return typeof n 不就完了，哦不對(duì)，再識(shí)別一下數(shù)組，因?yàn)閿?shù)組的typeof也是對(duì)象，Array.isArray(n)...
/^12/ 這返回啥？ wc,也是object吧，那咋區(qū)分，對(duì)，正則有test方法，再判斷一下

if (n.test) {
    return "RegExp"
}

null好像也返回obj吧，時(shí)間 Date嘞，都返回obj也沒毛病，萬物皆對(duì)象啊。

據(jù)說instanceof也可以：左側(cè)是否是右側(cè)的實(shí)例，也就是說每個(gè)類型我們都得判斷，于是

[] instanceof Array // true
[] instanceof Object // true

不光麻煩，返回的也不精確啊

據(jù)說constructor也可以：js引擎會(huì)為函數(shù)添加prototype,并讓其指向"該函數(shù)"的引用

/^12/.constructor // f RexExp(){[native code]}
new Date().constructor // ? Date() { [native code] }
null.constructor // 報(bào)錯(cuò)：Cannot read..
undefined.constructor // 報(bào)錯(cuò)：Cannot read..
發(fā)現(xiàn)確實(shí)能校驗(yàn)一些typeof 不能校驗(yàn)的，但是 null和undefined沒有"指針"啊,而且寫繼承的時(shí)候，指針是可以被改的，稍不注意就涼涼了...

把這些都整合到一起基本也都?jí)蛴昧耍墒遣⒉粌?yōu)雅

有請(qǐng)toString登場(chǎng)....
華麗分割線

toString() 是 Object 的原型方法，調(diào)用該方法，默認(rèn)返回當(dāng)前對(duì)象的 [[Class]] 。這是一個(gè)內(nèi)部屬性，其格式為 [object Xxx] ，其中 Xxx 就是對(duì)象的類型。完美~~

Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]

但是我覺得除了obj比較特殊之外，其他類型,typeof都可以判斷，不需要再多調(diào)用一次toString方法，所以最終封裝 =>

function typeDetection (n) {
  if (typeof n === "object") {
      return Object.prototype.toString.call(n)
  } else {
      return typeof n
  }
}

直接調(diào)用typeDetection("") // string

Q:字符：1234567890.12 轉(zhuǎn)換為：1,234,567,890.12

R:
個(gè)人用了while循環(huán)的方式

function strFilter (str) {
  let newStr = String(str).split(".") // 切分原始字符,兼容傳入Number類型
  let transStr = newStr[0],resStr = [] 
  while (transStr/1000 > 1) { // 判斷是否大于1000
      let whildStr = String((transStr/1000).toFixed(3)).split(".") // 這里一定要保留三位小數(shù),否則正數(shù)部分末位的0就會(huì)丟失,又轉(zhuǎn)為String，因?yàn)镹umber沒有split方法
      transStr = whildStr[0] // 每次都取小數(shù)點(diǎn)以前的(正數(shù)部分)
      resStr.unshift(whildStr[1]) // 向前插入小數(shù)點(diǎn)后的數(shù)字()
  }
  // 除以1000剩下的數(shù) + 每次除以1000后的數(shù) + 原來小數(shù)
  let res2 = newStr[1]?("." + newStr[1]):""
  let resComma = resStr.length?("," + resStr.join(",")): ""
  return transStr + resComma + res2
}

雖然實(shí)現(xiàn)代碼很多，但個(gè)人覺得還算易懂

網(wǎng)上看到用正則的，確實(shí)簡(jiǎn)短：

function strFilter2 (n) {
  let s = String(n)
  let re = /d{1,3}(?=(d{3})+$)/g
  let n1 = s.replace(/^(d+)((.d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$&,") + s2 })
  return n1
}

其實(shí)正則在好多場(chǎng)景都體現(xiàn)出優(yōu)勢(shì)，只是不能被輕易想到

Q:以下this指向

(function () {
  "use strict";
  console.log(this) // undefined
})()
(function () {
  "use strict";
  console.log(this) // window
})()

R:嚴(yán)格模式下，除構(gòu)造函數(shù)、對(duì)象內(nèi)置函數(shù)外，this均指向 undefined

Q:script標(biāo)簽的 async、defer啥區(qū)別？
R:別說那沒用的，上圖

啥也不加：script讀取和解析腳本階段都會(huì)阻斷頁面執(zhí)行，
加async : script解析腳本階段會(huì)阻斷頁面執(zhí)行
加defer : scriptj腳本將在頁面完成解析時(shí)執(zhí)行

Q:[1,2,3].map(parseInt)的結(jié)果？
R:之前用到parseInt，只知道是向下取整，翻了下w3c的parseInt定義: Crazy

再看map，

parseInt就是回調(diào)函數(shù),map會(huì)傳給parseInt三個(gè)參數(shù)，parseInt只識(shí)別前兩個(gè)，
那也就是得到了

function parseInt1 (item, index) {
  return parseInt(item,index)
}

得到 parseInt(1,0) parseInt(2,1) parseInt(3,2)

parseInt(1,0)，parseInt定義radix不傳或者0,按10進(jìn)制，也就得到了1
parseInt(2,1)，parseInt又定義第二個(gè)參數(shù) radix 位于 2-36(除了0)，否則返回NaN,所以得到NaN

parseInt(3,2),這個(gè)據(jù)說(網(wǎng)上)是 3不是 2的合法進(jìn)制數(shù) (只有0和1)，但是個(gè)人試了試
parseInt(10,2) => 3，parseInt(20, 2) => 6,parseInt(30, 2) => NaN

,發(fā)現(xiàn)只要是字符首字符小于 radix都是可以的，但是一旦首字符 >= radix，就會(huì)返回NaN

參考文章：判斷js數(shù)據(jù)類型的四種方法