整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          typeof和instanceof的區分和實現原理

          、typeof

          typeof是一個操作符而不是函數,用來檢測給定變量的數據類型 常用于檢測如下類型:

          string,number,boolean,undefined,symbol

          typeof原理:

          不同的對象在底層都表示為二進制,在Javascript中二進制前(低)三位存儲其類型信息。

          1. 000: 對象
          2. 010: 浮點數
          3. 100:字符串
          4. 110: 布爾
          5. 1: 整數

          typeof null 為什么為object?

          答:不同的對象在底層都表示為二進制,在Javascript中二進制前(低)三位都為0的話會被判斷為Object類型,null的二進制表示全為0,自然前三位也是0,所以執行typeof時會返回"object"。

          2、instanceof

          判斷引用數據類型

          一個對象是否為某一個構造函數的實例;或者說判斷一個實例是否屬于某種類型

          console.log({} instanceof Object) // true
          // 也可以判斷一個實例是否是其父類型或者祖先類型的實例
          console.log([] instanceof Object) // true
          console.log([] instanceof Array)  // true
          
          
          function Foo() {}
          let f = new Foo()
          console.log(f instanceof Foo) //true
          

          instanceof的實現原理

          function instanceof2(L, R) { //L是表達式左邊,R是表達式右邊
              const O = R.prototype;
              L = L.__proto__;
              while(true) {
                  if (L === null)
                      return false;
                  if (L === O) // 這里重點:當 L 嚴格等于 0 時,返回 true 
                      return true;
                  L = L.__proto__;
              }
          }
          
          instanceof2([],Object) //true
          

          3、Object.prototype.toString.call()

          一般利用原型屬性來判斷數據類型

          擊上方藍字關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

          首先,我們知道在ECMAScript中有5種基本數據類型(undefined,Null,Boolean,Number和String)。還有一種復雜的數據類型(Object)。鑒于ECMAScript是松散類型,因此需要有一種手段來檢測給定變量的數據類型,然而,typeof就是負責提供這方面信息的操作符。

          對一個值使用typeof操作符可能返回下列某個字符串:

          1. "undefined" - 如果這個值未定義

          2. "boolean" - 如果這個值布爾值

          3. "string" - 如果這個值是字符串

          4. "number" - 如果這個值是數值

          5. "object" -如果這個值是對象或null

          6. "function" -如果這個值是函數

          知道了上面這些知識點之后,下面,進入今天要講的重點內容。

          在工作中,我們時常需要去檢測一個值是否是一個對象,通過上面分析,如果直接使用typeof會存在一些缺陷。然而,如何才能讓這個判斷代碼輸出結果符合我的意愿呢?需要考慮三個點。

          從最基本的這個判斷函數開始:

          第一個點,Null類型需要排除

          null值表示的是一個空對象指針,也就是說:

          console.log(isObject(null))

          輸出:true

          這不是我們需要的,所以我們將代碼改成下面這樣子:

          這樣的話,就將str為null判斷成object的情況過濾掉了。

          第二個點,function需要考慮成object

          函數通過typeo返回的是一個字符串function。如下所示:

          大多數情況下,可能這是我們期望的情況,但有時候我們希望將函數考慮成輸出ture的情況。我們的代碼可以這么改:

          最加了一個typeof(str)全等于function。

          第三個點,Array不需要考慮成object

          數組通過typeof返回的是一個字符串object。如下所示:

          因為數組確實也是一個對象呀,同樣在大多數情況下,這也是我們期望的情況 ,但是,有時候我需要將數組考慮輸出false的情況,可以往isObject函數里再加一行代碼:

          為什么要分上面這三點來講一下了?這樣一來,我們可以根據自己的實際情況來考慮需要過慮哪種類型,自由組合代碼。

          如果同時需要對空值,數組,函數返回false,只讓對象返回true,下面這么搞,會更簡單。

          沒錯,利用contructor指向來判斷。

          總結一下:

          對于一些這樣的判斷,在應用層面,也可以使用一些現有庫封裝好的函數,或者新標準提供的函數。

          從新增了css3一些新屬性后,給很多前端開發者在制作網頁效果方面帶來了很大的方便!增強了炫酷的用戶體驗!下面來說說css3屬性選擇器input下的radio定制效果,感興趣的小伙伴可以看看!

          效果是這樣的:

          模擬一個方向盤指示效果,當你點擊上下左右,方向指針就會指向到那個位置!

          實現代碼如下:

          html結構:

          css樣式部分:

          附上項目中用到的圖標:


          主站蜘蛛池模板: 国产一区二区三区免费| 亚洲AV香蕉一区区二区三区| 91视频一区二区| 午夜视频在线观看一区| 一区二区在线视频免费观看| 亚洲日韩中文字幕无码一区| 精品久久久久中文字幕一区| 日韩精品一区二区三区国语自制| 精品无人区一区二区三区在线| 亚洲一区二区三区香蕉| 亚洲av区一区二区三| 日本香蕉一区二区三区| 亚洲AV成人精品日韩一区| 亚洲av乱码一区二区三区香蕉| 秋霞午夜一区二区| 最美女人体内射精一区二区| 国产在线aaa片一区二区99| 亚洲国产综合无码一区二区二三区| 精品国产日韩一区三区| 无码少妇丰满熟妇一区二区| 精品一区二区三区在线观看视频 | 国产一区二区三区视频在线观看| 韩国一区二区视频| 麻豆AV无码精品一区二区| 麻豆AV一区二区三区| 成人精品一区二区户外勾搭野战| 亚洲av无码一区二区三区观看| 精品爆乳一区二区三区无码av| 精品成人乱色一区二区| 无码人妻精品一区二区蜜桃网站| 精品亚洲AV无码一区二区三区 | 一区二区国产在线观看| 亚洲午夜日韩高清一区| 中文乱码精品一区二区三区| 国产精品美女一区二区视频 | 精品一区高潮喷吹在线播放| 中文乱码字幕高清一区二区| 日韩精品免费一区二区三区| 国产福利电影一区二区三区,亚洲国模精品一区 | 熟女少妇丰满一区二区| 高清国产AV一区二区三区|