Javascript 類型檢查

LdhAndroid 發(fā)布于2019-08-21 10:53 / 673人閱讀

摘要：在中常見的類型檢查手段主要有和。與方法不同的是，方法要求開發(fā)者明確地確認(rèn)對象為某特定類型。操作符用于檢測某個對象的原型鏈?zhǔn)欠癜硞€構(gòu)造函數(shù)的屬性。例如在上面的例子中，原型中的屬性被修改指向到了，導(dǎo)致檢測不出實例對象真實的構(gòu)造函數(shù)。

在 Javascript 中常見的類型檢查手段主要有：typeof,instanceof,constructor和Object.prototype.toString。

typeof 運算符

typeof操作符返回的是類型字符串.

typeof 12   // "number"
typeof "hello" // "string"
typeof true   // "boolean"
typeof function(){}   // "function"
typeof undefined   // "undefined"
typeof [1,2] // "object"
typeof {}   // "object"
typeof NaN // "number"
typeof null // "object"

從上面的輸出結(jié)果可以得出結(jié)論：typeof只能用來檢測基本數(shù)據(jù)類型。在實際的生產(chǎn)環(huán)境中，typeof常常用來判斷變量是否為undefined。

instanceof 運算符

在 JavaScript 中，判斷一個變量的類型嘗嘗會用 typeof 運算符，在使用 typeof 運算符時采用引用類型存儲值會出現(xiàn)一個問題，無論引用的是什么類型的對象，它都返回 “object”。ECMAScript 引入了另一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與 typeof 運算符相似，用于識別正在處理的對象的類型。與 typeof 方法不同的是，instanceof 方法要求開發(fā)者明確地確認(rèn)對象為某特定類型。

instanceof操作符用于檢測某個對象的原型鏈?zhǔn)欠癜硞€構(gòu)造函數(shù)的prototype屬性。

123 instanceof Number               //false
"123" instanceof String             //false
true instanceof Boolean,            //false
[] instanceof Array                 //true
{} instanceof Object                //true
(function(){}) instanceof Function  //true
undefined instanceof Object         //true
null instanceof Object              //true
new Date() instanceof Date          //true
new RegExp() instanceof RegExp      //true
new Error() instanceof Error        //true

從輸出結(jié)果來看, undefined和null是檢測不成Object類型的，要使用 instanceof 進(jìn)行變量檢測時，需要首先判斷是否是 undefined 和 null

constructor屬性

在使用instanceof檢測變量類型時，我們檢測不到number, ‘string’, bool的類型的。因此，我們需要換一種方式來解決這個問題。

constructor本來是原型對象上的屬性，指向構(gòu)造函數(shù)。但是根據(jù)實例對象尋找屬性的順序，若實例對象上沒有實例屬性或方法時，就去原型鏈上尋找，因此，實例對象也是能使用constructor屬性的。但是undefinded 和 null是沒有 constructor 屬性的。

function Person(){}
var Tom = new Person();
console.log(Tom.constructor == Person);  //true
(123).constructor == Number;  //true
("hello").constructor == String ;  //true
(true).constructor == Boolean;  //true
[].constructor == Array;  //true
{}.constructor == Object;  //true
(function(){}).constructor == Function  //true

從上面的輸出結(jié)果可以看出，除了undefined 和 null，其他類型的變量均能使用constructor判斷出來。

但是constructor也不是萬無一失的，它是能被修改的，會導(dǎo)致輸出的結(jié)果不正確。例如：

function Person(){}
function Student(){}
Student.prototype = new Person();
var Jack = new Student();
console.log( Jack.constructor == Student ); //false
console.log( Jack.constructor == Person ); //true

在上面的例子中， Student原型中的constructor屬性被修改指向到了Person，導(dǎo)致檢測不出實例對象Jack真實的構(gòu)造函數(shù)。

Object.prototype.toString

Object.prototype.toString.call(變量)輸出的是一個字符串，字符串里有一個數(shù)組，第一個參數(shù)是Object，第二個參數(shù)就是這個變量的類型，而且，所有變量的類型都檢測出來了，我們只需要取出第二個參數(shù)即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"來檢測變量arr是不是數(shù)組。

Object.prototype.toString.call(123);
//"[object Number]"
Object.prototype.toString.call("hello");
//"[object String]"
Object.prototype.toString.call(false);
//"[object Boolean]"
Object.prototype.toString.call([]);
//"[object Array]"
Object.prototype.toString.call({});
//"[object Object]"
Object.prototype.toString.call(function(){});
//"[object Function]"
Object.prototype.toString.call(null)
//"[object Null]"
Object.prototype.toString.call(undefined)
//"[object Undefined]"

ECMA里是這樣定義Object.prototype.toString.call的：

Object.prototype.toString( ) When the toString method is called, the following steps are taken:

Get the [[Class]] property of this object.

Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.

Return Result (2)

上面的規(guī)范定義了Object.prototype.toString的行為：首先，取得對象的一個內(nèi)部屬性[[Class]]，然后依據(jù)這個屬性，返回一個類似于”[object Array]”的字符串作為結(jié)果（看過ECMA標(biāo)準(zhǔn)的應(yīng)該都知道，[[]]用來表示語言內(nèi)部用到的、外部不可直接訪問的屬性，稱為“內(nèi)部屬性”）。利用這個方法，再配合call，我們可以取得任何對象的內(nèi)部屬性[[Class]]，然后把類型檢測轉(zhuǎn)化為字符串比較，以達(dá)到我們的目的。