JS中typeof与instanceof的区别

分手后的思念是犯贱 2023-08-17 17:37 152阅读 0赞

**JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空，或者是什么类型的。**但它们之间还是有区别的：

**typeof**

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

**它返回值是一个字符串，该字符串说明运算数的类型。（**typeof 运算符返回一个用来表示表达式的数据类型的字符串。 ）

typeof其实就是判断参数是什么类型的实例，就一个参数

typeof 一般只能返回如下几个结果：**"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。**

运算数为数字 typeof(x) = "number" 
    
    字符串 typeof(x) = "string" 
    
    布尔值 typeof(x) = "boolean" 
    
    对象,数组和null typeof(x) = "object" 
    
    函数 typeof(x) = "function"

![复制代码][copycode.gif]

console.log(typeof (123));//typeof(123)返回"number" 
    console.log(typeof ("123"));//typeof("123")返回"string"
    var param1 = "string";
    var param2 = new Object();
    var param3 = 10;
    console.log(typeof(param1)+"\n"+typeof(param2)+"\n"+typeof(param3)); 
    　　　　　//　string object  number

![复制代码][copycode.gif]

我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined")\{alert("ok")\}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. 
    
    　　　　　if(document.mylist.length != "undefined" ) {} //这个用法有误. 
    
    正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 
    
         或 if( !isNaN(document.mylist.length) ) {} 
    
    typeof的运算数未定义,返回的就是 "undefined". 
    
    在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。

**instanceof**

`instanceof` 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 `prototype` 属性。

语法：object instanceof constructor

### 参数：`object（`要检测的对象.）`constructor（`某个构造函数） ###

## **描述：`instanceof `运算符用来检测 `constructor.prototype `是否存在于参数 `object `的原型链上。** ##

instance：实例,例子

**a instanceof b?alert("true"):alert("false"); **  //a是b的实例？真:假

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

![复制代码][copycode.gif]

如 :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
    
    alert(a==b);  //flase

![复制代码][copycode.gif]

案例：

![复制代码][copycode.gif]

另外，更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。
    
    例如：
    
    function Foo(){} 
    Foo.prototype = new Aoo();//JavaScript 原型继承 
    var foo = new Foo(); 
    console.log(foo instanceof Foo)//true 
    console.log(foo instanceof Aoo)//true
    
    上面的代码中是判断了一层继承关系中的父类，在多层继承关系中，instanceof 运算符同样适用。
    
    
    又如：
    
    console.log(Object instanceof Object);//true 
    console.log(Function instanceof Function);//true 
    console.log(Number instanceof Number);//false 
    console.log(String instanceof String);//false  
    console.log(Function instanceof Object);//true  
    console.log(Foo instanceof Function);//true 
    console.log(Foo instanceof Foo);//false

![复制代码][copycode.gif]

// 定义构造函数
    function C(){} 
    function D(){} 
    
    var o = new C();
    
    // true，因为 Object.getPrototypeOf(o) === C.prototype
    o instanceof C; 
    
    // false，因为 D.prototype不在o的原型链上
    o instanceof D; 
    
    o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
    C.prototype instanceof Object // true,同上
    
    C.prototype = {};
    var o2 = new C();
    
    o2 instanceof C; // true
    
    o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.
    
    D.prototype = new C(); // 继承
    var o3 = new D();
    o3 instanceof D; // true
    o3 instanceof C; // true

![复制代码][copycode.gif]

谈到 instanceof 我们要多插入一个问题，就是 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

需要注意的是，如果表达式 `obj instanceof Foo` `返回true，则并不意味着该表达式会永远返回ture，因为Foo.prototype属性的值有可能会改变`，改变之后的值很有可能不存在于`obj`的原型链上，这时原表达式的值就会成为`false`。另外一种情况下，原表达式的值也会改变，就是改变对象`obj`的原型链的情况，虽然在目前的ES规范中，我们只能读取对象的原型而不能改变它，但借助于非标准的`__proto__魔法属性`，`是可以实现的`。比如`执行obj.__proto__ = {}之后`，`obj instanceof Foo就会返回false了。`

### 例子: 表明`String`对象和`Date对象都属于``Object类型` ###

下面的代码使用了`instanceof`来证明：`String和``Date对象`同时也属于`Object类型`。

![复制代码][copycode.gif]

例子: 表明String对象和Date对象都属于Object类型
    
    下面的代码使用了instanceof来证明：String和Date对象同时也属于Object类型。
    var simpleStr = "This is a simple string"; 
    var myString  = new String();
    var newStr    = new String("String created with constructor");
    var myDate    = new Date();
    var myObj     = {};
    
    simpleStr instanceof String; // returns false, 检查原型链会找到 undefined
    myString  instanceof String; // returns true
    newStr    instanceof String; // returns true
    myString  instanceof Object; // returns true
    
    myObj instanceof Object;    // returns true, despite an undefined prototype
    ({})  instanceof Object;    // returns true, 同上
    
    myString instanceof Date;   // returns false
    
    myDate instanceof Date;     // returns true
    myDate instanceof Object;   // returns true
    myDate instanceof String;   // returns false

转载于:https://www.cnblogs.com/ysx215/p/11352954.html

[copycode.gif]: /images/20230808/17b4d3ccb20d4c8aae965a93fd1d097d.png