乐趣区

关于javascript:typeof和instanceof的区别

jiezi

typeof 和 instanceof 都能够用来判断变量，它们的用法有很大区别
typeof 会返回一个变量的根本类型,instanceof 返回的是一个布尔值，须要留神的是，instanceof 只能用来判断对象和函数，不能用来判断字符串和数字等

* 先说 instanceof
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
语法
object instanceof constructor
形容
instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。*

了解：object.__proto__ === constructor.prototype ? => boolean

定义构造函数
function C(){}
function D(){}

var o = new C();

o instanceof C;
// true, 因为 Object.getPrototypeOf(o) === C.prototype
// 扩大：能够了解为 o.__proto__ === C.prototype

o instanceof D;
// false,D.prototype 不在 o 的原型链上

o instaceof 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

如果表达式 obj instanceof Foo 返回 true，则并不意味着该表达式会永远返回 true，因为 Foo.prototype 属性的值有可能会扭转，扭转之后的值很有可能不存在于 obj 的原型链上，这时原表达式的值就会成为 false。另外一种状况下，原表达式的值也会扭转，就是扭转对象 obj 的原型链的状况，尽管在目前的 ES 标准中，咱们只能读取对象的原型而不能扭转它，但借助于非标准的__proto__魔法属性，是能够实现的。比方执行 obj.__proto__ = {}之后，obj instanceof Foo 就会返回 false 了。

String 和 Date 对象同时也属于 Object 类型

var simpleStr = "some simple string";
var myString  = new String();
var newStr    = new String("String created with constructor");
var myDate    = new Date();
var myObj     = {};

simpleStr instanceof String; // false，查看原型链会找到 undefined
myString  instanceof String; // true
newStr    instanceof String; // true
myString  instanceof Object; // true

myObj instanceof Object; // true
({})  instanceof Object; // true

myString  instanceof Date; // false

myDate instanceof Date; // true
myDate instanceof Object; // true
myDate instanceof String; // false

typeof

typeof 操作符返回一个字符串, 批示未经计算的操作数的类型。

最新的 ECMAScript 规范定义了 8 种数据类型:

6 种原始类型，应用 typeof 运算符查看:
undefined：typeof instance === “undefined”
Boolean：typeof instance === “boolean”
Number：typeof instance === “number”
String：typeof instance === “string
BigInt：typeof instance === “bigint”
Symbol：typeof instance === “symbol”
null：typeof instance === “object”。
Object：typeof instance === “object”。任何 constructed 对象实例的非凡非数据结构类型，也用做数据结构：new Object，new Array，new Map，new Set，new WeakMap，new WeakSet，new Date，和简直所有通过 new keyword 创立的货色。
记住 typeof 操作符的惟一目标就是查看数据类型，如果咱们心愿查看任何从 Object 派生进去的构造类型，应用 typeof 是不起作用的，因为总是会失去 “object”。查看 Object 品种的适合形式是应用 instanceof 关键字。但即便这样也存在误差。

(以上摘自 MDN Web Docs)

如果咱们想要判断一个变量是否存在，能够应用 typeof：(不能应用 if(a) 若 a 未声明，则报错)

if(typeof a != 'undefined'){// 变量存在}

typeof 用于判断数据类型，返回值为 6 个字符串，别离为 string、Boolean、number、function、object、undefined。

var a = [34,4,3,54],
        b = 34,
        c = 'adsfas',
        d = function(){},
        e = true,
        f = null,
        g;

        console.log(typeof(a));//object
        console.log(typeof(b));//number
        console.log(typeof(c));//string
        console.log(typeof(d));//function
        console.log(typeof(e));//boolean
        console.log(typeof(f));//object
        console.log(typeof(g));//undefined

然而你可能会发现，typeof 在判断 null、array、object 以及函数实例（new + 函数）时，失去的都是 object。这使得在判断这些数据类型的时候，得不到真是的数据类型。由此引出 instanceof。
instanceof 判断该对象是谁的实例，同时咱们也就晓得 instanceof 是对象运算符。
这里的实例就牵扯到了对象的继承，它的判断就是依据原型链进行搜查，在对象 obj1 的原型链上如果存在另一个对象 obj2 的原型属性，那么表达式（obj1 instanceof obj2）返回值为 true；否则返回 false。

小结：

  • typeof 判断所有变量的类型，返回值有 number，boolean，string，function，object，undefined。
  • typeof 对于丰盛的对象实例，只能返回 ”Object” 字符串。
  • instanceof 用来判断对象，代码模式为 obj1 instanceof obj2（obj1 是否是 obj2 的实例），obj2 必须为对象，否则会报错！其返回值为布尔值。
  • instanceof 能够对不同的对象实例进行判断，判断办法是依据对象的原型链顺次向下查问，如果 obj2 的原型属性存在 obj1 的原型链上，（obj1 instanceof obj2）值为 true。
退出移动版