Js中原型与原型链及_proto_和prototype的关系

最新推荐文章于 2021-04-20 15:23:30 发布

原创最新推荐文章于 2021-04-20 15:23:30 发布 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#prototype #对象 #原生js

原生js 专栏收录该内容

10 篇文章

订阅专栏

本文详细解释了JavaScript中_proto_和prototype的区别与联系，通过构造函数Animal实例化对象cat的过程，阐述了它们如何支撑原型链及实现继承。

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

理解认识_ proto_和prototype

每一个构造函数都有一个prototype属性，类型是object，是一个引用对象
每一个对象也有一个_ proto_对象，类型是object，也是一个引用对象
每一个构造函数在被创建之后都会有一个prototype属性，这个属性指向函数的原型对象，通过构造函数创建的对象都会有一个_ proto_对象，指向这个构造函数的prototype。

function Animal(type) {
            this.type = type;
        };
        Animal.prototype.name = 'Tom';
        var cat = new Animal('cat');

        console.log(cat.__proto__ === Animal.prototype);    //true

prototype的作用是用来实现基于原型的继承和属性的共享
_ proto_的作用的是构成原型链，同样是实现原型的继承

通过关键字new和构造函数创建的对象，他们的原型就是构造函数的prototype，都会继承object.prototype
在js中调用new关键字时，js引擎内部机制：

new Animal("cat") = {

    var obj = {};

    obj.__proto__ = Animal.prototype;

    var result = Animal.call(obj,"cat");

    returntypeof result === 'object'? result : obj;
}

（1）创建一个空对象obj;
（2）把obj的proto 指向Animal的原型对象prototype，此时便建立了obj对象的原型链：obj->Animal.prototype->Object.prototype->null
（3）在obj对象的执行环境调用Animal函数并传递参数“cat”。相当于var result = obj.Animal(“cat”)。
当这句执行完之后，obj便产生了属性name并赋值为”cat”。
（4）考察第3步返回的返回值，如果无返回值或者返回一个非对象值，则将obj返回作为新对象；否则会将返回值作为新对象返回。