js中的prototype、proto与constructor 的关系

最新推荐文章于 2022-04-30 16:49:41 发布

肖哒哒啊

最新推荐文章于 2022-04-30 16:49:41 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://blog.csdn.net/cc18868876837/article/details/81211729

前端专栏收录该内容

18 篇文章

订阅专栏

本文详细阐述了JavaScript中__proto__、constructor及prototype属性的区别与联系，并通过具体案例解释了原型链的工作原理。

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

学习连接：
先看：https://www.cnblogs.com/youhong/p/6838611.html
再看：https://blog.csdn.net/cc18868876837/article/details/81211729

function Foo(){};
var f1 = new Foo();

在这里插入图片描述

总结：
1、 __proto__和constructor属性是对象（f1是Foo的实例化对象）所独有的，也就是f1才有，
2、prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。

3、当访问一个对象不存在某属性的时候，会一直通过__proto__查找父级，父级的父级，一直找到终点null。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。

4、prototype属性的作用就是，让该函数所实例化的对象们都可以找到，公用的属性和方法，根据值的测试打印发现。
即f1.proto=== Foo.prototype

5、constructor属性的含义就是指向该对象的构造函数，所有函数（当做对象来看）最终的构造函数都指向Function。

案例补充1

       class Test {
            constructor() {
                //类的非静态方法->会在实例化过程中添加到this中去
                this.test1 = function () {   //这里命名是test1
                    console.log('none-static:' + this);
                }
            }
            //静态方法(类原型上的静态属性)，在定义的时候就放在Test.prototype{}里面去 
            test() {
                console.log('static:' + this);
            }
        }
        var res = new Test();
        res.test(); //执行的是 constructor 里面的test 
        console.log(res);

在这里插入图片描述

上图console.log(res)，最终看到了test1的属性（方法），说明是在constructor构造器中绑定的test1方法。但是通过res.test()打印出的结果是’static:’ [object object] ，可以看到是从__proto__原型链上获取的方法test。这又一次说明了 总结的第三条__proto__原型链的查找思想。

案例补充2

        class Test {
            constructor() {
                //类的非静态方法->会在实例化过程中添加到this中去
                this.test = function () {  //将test1 改成了test和下面的test方法同名
                    console.log('none-static:' + this);
                }
            }
            //静态方法(类原型上的静态属性)，在定义的时候就放在Test.prototype{}里面去 
            test() {
                console.log('static:' + this);
            }
        }
        var res = new Test();
        res.test(); //执行的是 constructor 里面的test 
        console.log(res);

在这里插入图片描述
打印结果是 none-static:[object object]，我们可以看到这是contructor里面的方法。那为什么不是test()呢？我的理解思想是在php语言中，constructor是构造方法，当调用某个类里面方法时候，会优先执行咧里面的constructor构造方法，所以在上述代码中，运行的是test方法。但是根据js学习得知原因是，如上图代码注释。