三種“類型判斷”的方法，一起手寫instanceof方法的實現原理
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
在Javascript中，有三種常用的方法用于判斷數據類型： 1. typeof操作符typeof操作符是最常用的判斷數據類型的方法之一。它是一個一元操作符，可以用于判斷一個值的數據類型，并返回一個表示該數據類型的字符串。常見的typeof返回值有： - "undefined": 用于表示未定義的變量 例如： typeof undefined; // "undefined" typeof 42; // "number" typeof "hello"; // "string" typeof true; // "boolean" typeof { name: "John" }; // "object" typeof function() {}; // "function" typeof 123n; // "bigint" typeof symbol('hello'); //"symbol" 需要注意的是，typeof對于null的判斷返回的是"object"，這是因為在Javascript的早期版本中，null被錯誤地認為是一個對象。而對于函數類型，則返回"function". 2. instanceof操作符instanceof操作符用于判斷一個對象是否屬于某個構造函數的實例。它比typeof更適用于判斷對象類型，因為它可以準確地判斷多層原型鏈中的實例關系。例如： var arr = []; var date = new Date(); var obj = {}; var fn = function(){};
arr instanceof Array; // true date instanceof Date; // true obj instanceof Object; // true fn instanceof Function; // true instanceof判斷的結果是一個布爾值，如果對象是指定構造函數的實例，則返回true，否則返回false。 同時，也正是因為instanceof操作符可以判斷多層原型鏈中的實例關系，那函數和數組不也可以看作是一個對象嗎，那用他們用instanceof操作符來判斷和Object的關系，是不是也能得到true呢，我們來看一看： var arr = []; var fn = function(){}; arr instanceof Object; // true fn instanceof Object; // true 結果也是true,欸， 這時候我們不妨先來大膽猜測一波，我們都知道，arr數組的創建實際是通過new構造函數Array()得到的，那arr就是構造函數Array()的一個實例對象，所以當我們判斷 //L 實例對象 //R 要判斷的數據類型 function instanceOF(L,R){ while(L !== null){ // 用實例對象的__proto__屬性和要判斷的數據類型的prototype進行判斷 //相等返回true,不相等再用實例對象的__proto__的__proto__屬性去判斷 //直到L.__proto__.__proto__...為null,就通過原型鏈根本找不到相等的了，返回false. if(L.__proto__ === R.prototype){ return true } else L = L.__proto__ } return false } //驗證我們手寫的instanceOF是否正確 console.log(instanceOF([],Array)); //true console.log(instanceOF([],Object));//true 所以，搞明白之后，是不是覺得手寫instanceof方法非常簡單啦！好，那既然數組，函數用instanceof方法和object數據類型進行判斷都為true，所以這種方法好像也不是那么完美，并不能精準判斷對象的類型。那我們不妨看看下面另一種方法。 3. Object.prototype.toString方法Object.prototype.toString是一個通用的方法，可以返回一個對象的內部屬性[[Class]]的值，從而判斷對象的類型。toString方法被重寫，并通過不同的內部屬性來標識不同的類型。例如： Object.prototype.toString.call(undefined); // "[object Undefined]" Object.prototype.toString.call(42); // "[object Number]" Object.prototype.toString.call("hello"); // "[object String]" Object.prototype.toString.call(true); // "[object Boolean]" Object.prototype.toString.call({ name: "John" }); // "[object Object]" Object.prototype.toString.call(function() {}); // "[object Function]" 這時小伙伴要問啦，不是講 console.log(Object.prototype.toString(undefined))// "[object Object]" console.log(Object.prototype.toString(42))// "[object Object]" console.log(Object.prototype.toString("hello"))// "[object Object]" 這時會發現結果都是
該文章在 2023/11/27 11:58:52 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
