JavaScript使用原型判断对象类型

简介: 1. constructor属性在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们并没有给这个对象添加过constructor,这个属性是从哪儿来的呢?讲过原型之后,我们知道这个属性是原型中的,所以一般重写原型时也都会把constructor补上。

1. constructor属性

在JavaScript创建对象(二)——构造函数模式中,我们说过可以使用对象的constructor属性判断对象的类型:p1.constructor === Person,可能当时就有细心的读者会想,我们并没有给这个对象添加过constructor,这个属性是从哪儿来的呢?讲过原型之后,我们知道这个属性是原型中的,所以一般重写原型时也都会把constructor补上。

我们可以通过像下面的代码一样,切断实例与原型的关系:

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.prototype = {
    constructor: Person,
    sayName: function(){
        console.log(this.name);
    }
}

var p1 = new Person('张三', 18, 'JavaScript');
var p2 = new Person('李四', 20, 'Java');

//切断p1与Person原型的关系
p1.__proto__ = null;

console.log(p1.constructor === Person);//false
console.log(p2.constructor === Person);//true

如代码所示,切断p1Person原型的关系后,p1.constructor === Person的结果为falseconstructor属性失效了。

工厂模式没办法使用这种方法判读对象的类型,为什么呢?因为使用工厂模式创建的对象本质上只是一个Object类型,它们的constructor属性都是Object,所以没办法通过constructor区分对象的类型。

2. instanceof关键字

之前我们还使用过instanceof判断对象的类型,该方法不仅可以判断对象本身的类型,还能判断出父类型,其实这个关键字也是依赖原型的。还是以上述p1为例,看下面代码:

console.log(p1 instanceof Person);//false
console.log(p1 instanceof Object);//false

如代码所示,p1的原型被置为null后,instanceof也失效了。

3. isPrototypeOf()方法

这是原型对象上的一个方法,用于判断对象的原型。那么问题又来了,我们明明重写了Person的原型,并且也没有声明isPrototypeOf()方法,这个方法是从哪来的呢?这就涉及到原型链的知识了,以后再讲。仍然以上述p1p2为例,看下面代码:

console.log(Person.prototype.isPrototypeOf(p1));//false
console.log(Person.prototype.isPrototypeOf(p2));//true

如代码所示,p1切断了与原型的关系,结果为falsep2的原型就是Person.prototype,结果为true。

4. getprototypeof()方法

这是Object上的一个方法,可以直接获取到实例的原型对象,看下面代码:

console.log(Object.getPrototypeOf(p1) === Person.prototype);//false
console.log(Object.getPrototypeOf(p1));//null
console.log(Object.getPrototypeOf(p2) === Person.prototype);//true
console.log(Object.getPrototypeOf(p2));//{constructor: ƒ, sayName: ƒ}

p1的原型被设置为了null,获取的结果也就是nullp2正常获取到了原型。

本文参考《JavaScript高级程序设计(第三版)》

目录
相关文章
|
4月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
41 0
|
4月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
47 0
|
4月前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
52 0
|
1月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
24 0
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
24 1
|
1月前
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
13 1
|
1月前
|
JavaScript 前端开发 Java
什么是JavaScript原型对象
【8月更文挑战第2天】什么是JavaScript原型对象
49 9
|
4月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
3月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
77 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
1月前
|
设计模式 JavaScript 前端开发
js对原型和继承的理解
了解JavaScript中原型和继承的概念对于编写优雅高效的代码、理解库和框架的内部机制以及执行高级设计模式都有着重要的意义。
36 0