3.1 typeof
typeof
对于基本数据类型来说,除了null
都可以显示正确的类型- 判断出的类型为
string
格式
//设计缺陷
typeof null //"object"
typeof缺点
typeof
对于对象来说,除了函数为function
,其他对象都会显示object
,所以说typeof
并不能准确判断变量到底是什么类型
- 如果我们想判断一个对象的正确类型,这时候可以考虑使用
instanceof
,因为其内部机制是通过原型链来判断的
3.2 instanceof
instanceof
运算符用于检测构造函数的prototype
属性是否出现在某个实例对象的原型链上。简单来说就是instanceof
是用来判断 A 是否为 B 的实例。
//实际上是判断Array.prototype是否在[]的原型链上
[] instanceof Array //true
instanceof 的缺点
- 不管是数组对象还是正则对象,都是 Object 的实例,检测结果都是 TRUE ,所以无法基于这个结果判断是否为普通对象(
Array
、Date
、RegExp
对象等)。加上是否处于原型链上的判断方法不严谨,instanceof 方法判断的是是否处于原型链上,而不是是不是处于原型链最后一位,所以会出现下面这种情况:
var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object); // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true
- 其次,基本数据类型的实例是无法基于它检测出来的
- 不能检测基本数据类型
- 字面量方式创建的不能检测,构造函数创建的就可以检测
对于基本数据类型来说,字面量方式创建出来的结果和实例方式创建的是有一定区别的
console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true
从严格意义上来讲,只有实例创建出来的结果才是标准的对象数据类型值,也是标准的 Number 这个类的一个实例;对于字面量方式创建出来的结果是基本的数据类型值,不是严谨的实例,但是由于 JS 的松散特点,导致了可以使用 Number.prototype 上提供的方法。
- 无法检测 null 和 undefined
对于特殊的数据类型
null
和undefined
,他们的所属类是Null
和Undefined
,但是浏览器把这两个类保护起来了,不允许我们在外面访问使用。
3.3 constructor
constructor
作用和instanceof
非常相似。但constructor
检测Object
与instanceof
不一样,还可以处理基本数据类型的检测。
var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false
constructor 的缺点
- 无法检测 null 和 undefined
null
和undefined
是无效的对象,因此是不会有constructor
存在的,这两种类型的数据需要通过其他方式来判断。
- 不稳定
函数的
constructor
是不稳定的,这个主要体现在把类的原型进行重写,在重写的过程中很有可能出现把之前的constructor
给覆盖了,这样检测出来的结果就是不准确的,由此可知instanceof
同样也存在这个问题。
function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array
3.4 Object.prototype.toString.call()
这个方法在
Object
的原型上
定义:找到Object.prototype
上的toString
方法,让toString
方法执行,并且基于call
让方法中的this
指向检测的数据值,这样就可以实现数据类型检测了
MDN上的描述:
每个对象都有一个
toString()
方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString()
方法被每个Object
对象继承。如果此方法在自定义对象中未被覆盖,toString()
返回"[object type]"
,其中type
是对象的类型。以下代码说明了这一点:
var o = new Object();
o.toString(); // returns [object Object]
从 JavaScript 1.8.5 开始,
toString()
调用null
返回[object Null]
,undefined
返回[object Undefined]
可以通过 toString() 来获取每个对象的类型。
为了每个对象都能通过
Object.prototype.toString()
来检测,需要以Function.prototype.call()
或者Function.prototype.apply()
的形式来调用,传递要检查的对象作为第一个参数,称为thisArg
。
- 实例
Object.prototype.toString.call('') ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用
3.5 常见面试题
3.5.1 instance
的原理是什么
面试题:
instance
的原理是什么
instanceof
可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype
代码实现
instanceof
- 首先获取类型的原型
- 然后获得对象的原型
- 循环判断对象的原型是否等于类型的原型,直到对象原型为
null
,因为原型链最终为null
function myInstanceof(left, right) {
let prototype = right.prototype
left = left.__proto__
while (true) {
if (left === null || left === undefined)
return false
if (prototype === left)
return true
left = left.__proto__
}
}
//测试
var arr = [1, 2, 3];
console.log(myInstanceof(arr, Array)) // true
3.5.2 怎么判断属性在当前对象上还是构造函数的prototype里面
结合两者,可以判断某个属性是否是原型上的属性。
- obj.hasOwnProperty(‘属性名’) 用于检查给定的属性是否存在于当前实例对象中,(而不是实例原型中)(解释来至:javascript高级程序设计第三版第三章Object)。如果是返回true,如果不是返回 false。
而 - in 操作符用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过prototype继承的属性。如:(属性名 in 对象) ,不管属性是原型的还是实例的,只要存在就会返回ture;否则返回false。
栗子:
class Point {
constructor() {
this.x = 'a';
this.y = 'b'
}
getId() {
return '1';
}
}
function isPrototypeAttr(obj, pro) {
return !obj.hasOwnProperty(pro) && (pro in obj)
}
let p1 = new Point();
console.log(isPrototypeAttr(p1, 'toString')); //true
console.log(isPrototypeAttr(p1, 'getId')); //true
console.log(isPrototypeAttr(p1, 'x')); //false
//所以toString和getId都是原型对象属性。x就是实例对象属性!