原型链(一)：辨别原型链的两种方法

最新推荐文章于 2025-06-16 11:23:53 发布

蚁方阵

最新推荐文章于 2025-06-16 11:23:53 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：精进的前端文章标签：原型链

本文链接：https://blog.youkuaiyun.com/yiifaa/article/details/52185534

精进的前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了JavaScript中对象如何通过原型链查找属性与方法的过程，并提供了getPrototypeOf与isPrototypeOf两种方法来判断对象间的原型关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS对象查找属性与方法时，除了优先会从自身查找，还会不断追溯自己的原型祖先，自到追溯到Object对象的原型为止。

基于JS对象原型的这种特征，为了保证调用正常，经常需要判断对象之间是否存在原型关系，这里提供两种方法，分别是getPrototypeOf与isPrototypeOf，示例代码如下：

//  图形通用原型
var shapeProto = {
        getType () {
            return this.type !== undefined ? this.type : 'Shape';
        }
    },
    circleProto;
//  声明形状类
function Shape(type) {
    this.type = type;
}
//  设置Shape的原型
Shape.prototype = shapeProto;
//  创建圆形类
function Circle(radius) {
    this.radius = radius;
    this.getRadius = function() {
        return this.radius;
    }
}
//  设置圆形类的原型
circleProto = new Shape('Circle')
Circle.prototype = circleProto;
//  初始化圆形对象
var c1 = new Circle(10);
alert(c1.getType());    //  输出Circle

现在，Circle对象的原型链为circleProto => shapeProto => Object.prototype，查找属性与方法时会依次往上查找，为了判断对象之间的原型依赖关系，可以采用如下的方法。

1.getPrototypeOf，用于查找原型链的直接父原型

//  只能获取直接父原型
alert(Object.getPrototypeOf(c1) === circleProto);   //  输出true
alert(Object.getPrototypeOf(c1) === shapeProto);    //  输出false

利用getPrototypeOf的这个特性，我们可以轻松获得对象的原型链，如下：

//  获取对象的原型链
function getPrototypeChain(obj) {
   var result = [],
       proto = obj;
   while(proto != null) {
        proto = Object.getPrototypeOf(obj);
        if(proto != null) {
            result.push(proto);
            obj = proto;
        }
    }
    return result;
}
//  protoChain为[circelProto, shapeProto, Object.prototype]
var protoChain = getPrototypeChain(c1);

2.isPrototypeOf，能对原型链上的所有对象进行判断

alert(circleProto.isPrototypeOf(c1));   //  输出true
alert(shapeProto.isPrototypeOf(c1));    //  输出true