首頁 > web前端 > js教程 > JavaScript中instanceof與typeof運算子的用法及區別詳細解析_javascript技巧

JavaScript中instanceof與typeof運算子的用法及區別詳細解析_javascript技巧

WBOY
發布: 2016-05-16 17:14:13
原創
1200 人瀏覽過

JavaScript中的instanceof和typeof常被用來判斷一個變數是什麼類型的(實例),但它們的使用還是有區別的:

typeof 運算子
傳回一個用來表示表達式的資料型別的字串。

typeof expression ;

expression 參數是需要尋找型別資訊的任意表達式。

說明
typeof 是一個一元運算符,放在一個運算數之前。

typeof 運算子把型別資訊當作字串回傳。 typeof 回傳值有六種可能: “number” ,“string”, “boolean”, “object” ,“function”, 和 “undefined.”

(而 ECMAScript 有 5 種原始型別(primitive type),分別是 Undefined、Null、Boolean、Number 和 String。)

註解:

1、我們上面提到了ECMAScript的5種原始類型,在使用typeof操作符時,我們需要特別區分"物件類型"與"物件值"(字面值)的差別。例如Boolean 物件是 Boolean 原始類型的參考類型,而true和false則是Boolean物件的兩個可能的物件值。我們可以把 ECMAScript的預先定義物件(相對於其他語言中的類別)看作是 對應類型的原始值的封裝(或包裝)。而ECMAScript的所有預定義物件又都是繼承於Object物件。因此有下列情況:

複製程式碼 程式碼如下:

  var );
  alert(typeof testvar);  //輸出  "object"
  testvar= 68;
  alert(typeof testvar); 科:


複製程式碼 程式碼如下: 〜function Person(){function write ("
typeof(Person):" typeof(Person));    //function
  var person = new Person();
  document.write ("
  document.write ("
type type:" (person));    //object


注意:从传统意义上来说,ECMAScript 并不真正具有类。事实上,除了说明不存在类,在 ECMA-262 中根本没有出现“类”这个词。ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。

另外:这些预定义对象覆盖了Object 对象的 ValueOf() 方法,返回其原始值。而这些对象的所有属性和方法都可应用于相应类型的原始值上,因为它们是伪对象。

2、typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

提示:

1、值 undefined 并不同于未定义的值。但是,typeof 运算符并不真正区分这两种值。考虑下面的代码:

var oTemp;
alert(typeof oTemp);  //输出 "undefined"
alert(typeof oTemp2);  //输出 "undefined"

前面的代码对两个变量输出的都是 "undefined",即使只有变量 oTemp2 从未被声明过。如果对 oTemp2 使用除 typeof 之外的其他运算符的话,会引起错误,因为其他运算符只能用于已声明的变量上。

2、当函数无明确返回值时,返回的也是值 "undefined",如下所示:

function testFunc() {}
alert(testFunc() == undefined);  //输出 "true"3、类型Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

alert(null == undefined);  //输出 "true"
尽管这两个值相等,但它们的含义不同:

undefined 是声明了变量但未对其初始化时赋予该变量的值 或 未声明过的变量(只能用于typeof,但作为赋值目标时编译器会自动将其声明为全局变量)。

null 则用于表示尚未存在的对象(即对象为空,或对象找不到)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

3、我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错。

对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。如果我们希望获取一个对象是否是数组,或判断某个变量是否是某个对象的实例则要选择使用instanceof。


instanceof 运算符
在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。

instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:

var oStringObject = new String("hello world");
alert(oStringObject instanceof String); //输出 "true"
这段代码问的是“变量 oStringObject 是否为 String 对象的实例?”oStringObject 的确是 String 对象的实例,因此结果是 "true"。尽管不像 typeof 方法那样灵活,但是在 typeof 方法返回 "object" 的情况下,instanceof 方法还是很有用的。

instanceof运算符

是一个二元运算符。返回一个 Boolean 值,指出对象是否是特定类的一个实例。

expression  instanceof class

参数

 expression  必选项。任意对象表达式。

 class  必选项。任意已定义的对象类。

说明
如果 object 是 class 的一个实例,则 instanceof 运算符返回 true 。如果 object不是指定类的一个实例,或者 object 是 null ,则返回 false 。

用于判断一个变量是否某个对象的实例,

如var a=new Array();alert(a instanceof Array);会返回true,同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。

再如:function test(){};var a=new test();alert(a instanceof test)会返回true。

注意:

关于function 的 arguments,我们大家也许都认为 arguments 是一个 Array,但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象,尽管看起来很像。

此外还有类似的情况,例如:

var a=new Array();if (a instanceof Object) alert('Y');else alert('N');  得'Y'

但 if (window instanceof Object) alert('Y');else alert('N');    得'N'

所以,這裡的 instanceof 測試的 object 是指 js 語法中的 object,不是指 dom 模型物件。

而此時使用 typeof 會有些差別: alert(typeof(window)) 會得 object

引申:JavaScript中的instanceof運算子的原理是什麼?

學習js時,了解到在判斷js中一個實例是否屬於某一種類型時,可以使用instanceof操作符,例如function Person(){}

var person = new Person();  alert(person instanceof Person);//回傳true

那麼在執行instanceof這個操作時經過了怎樣的判斷,回傳了true/false?

會不會是透過判斷Person.prototype與person的內部指標[[prototype]]兩者引用是否相同而得到結果的?

其實,凡是能在實例的"原型對象鏈"中找到該構造函數的prototype屬性所指向的原型對象,就返回true。

而prototype根本就不是實例具有的屬性(或者說實例的prototype屬性為undefined),而是它原型物件中的屬性,如果被竄改了,這個判斷方法就不能正確回傳了。

另外,能不能直接判斷 person.constructor == Person來取得想要的結果呢?

我們做測試,如下JavaScript程式碼:

複製程式碼 程式碼如下:


程式碼如下:

function Person(name,sex){this.name=name;this.sex=sex;}
document.write ("
typeof Person:" typeof Person);
document.write ("
typeof Person.prototype:" typeof Person.prototype);
document.write ("
typeof Person.constructor:" typeof Person.constructor);

var person = new Person();

document.write ("

var person = new Person();");
document.write ("
typeof person: " typeof person);

document.write ("
typeof person.prototype:" typeof person.prototype);

document.write ("
typeof person.constructor:" typeof person.constructor) ;

document.write ("

Function.constructor:" Function.constructor);

document.write ("

Function.prototype:" Function.prototype);

document.write ("

Person.constructor:" Person.constructor);
document.write ("

Person.prototype:" Person.prototype);

document.write ("

person.constructor:" person.constructor);

document.write ("

person.prototype:" person.prototype) ;



輸出如下:


typeof Person:function
typeof Person.prototype:object
typeof Person.constructor:function

var person = new Person();
typeof person:object
typeof person.prototype:undefined

typeof person.constructor:function


Function.constructor:function Function() { [native code] }

Function.prototype:function Empty() {}

Person.constructor:function Function() { [native code] }

Person.prototype:[object Object]

person.constructor:function Person(name,sex){this.name=name;this.sex=sex;}

person.prototype:undefined

和Function類似,Number()為Number物件的建構函數,Number()用於將其參數轉換為數字number類型,並傳回轉換結果(若無法轉換則傳回NaN)。


在JavaScript中constructor較少使用,variable.constructor傳回其物件類別的建構函式的字串表示。

那麼在JavaScript中判斷資料型別時,我們可以使用以下方式來得到其詳細資料型別:

if((typeof a=="object") && (a.constructor==Array)){}

注意:constructor只能對已有變數進行判斷,而typeof則可對未宣告變數或空物件進行判斷(傳回undefined)。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板