js中的prototype、__proto__与constructor 的关系

学习连接:
先看: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学习得知原因是,如上图代码注释。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 JavaScript ,每个对象都有一个 __proto__ 属性,指向其构造函数的原型对象。而每个函数都有一个 prototype 属性,指向该函数实例化出来的对象的原型对象。 __proto__ 属性是一个指针,指向该对象的构造函数的原型对象。通过 __proto__ 属性可以访问原型对象的属性和方法。这个属性在 ES6 已经被标准化,可以用 Object.getPrototypeOf() 来获取对象的原型。 prototype 属性是函数的一个特殊属性,指向一个对象。当函数用作构造函数创建实例对象时,该对象的原型会指向构造函数的 prototype 属性指向的对象。也就是说,该对象可以访问构造函数原型对象的属性和方法。 举个例子: ``` function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}`); } const p = new Person('Tom'); console.log(p.__proto__ === Person.prototype); // true console.log(Person.prototype.constructor === Person); // true console.log(p.constructor === Person); // true ``` 在这个例子,我们定义了一个构造函数 `Person`,并给其原型对象添加了一个 `sayHello` 方法。我们通过 `new` 关键字实例化了一个 `Person` 对象 `p`。这个对象的 `__proto__` 属性指向了 `Person.prototype`,因此我们可以通过 `p.__proto__.sayHello()` 或者 `Person.prototype.sayHello.call(p)` 来调用 `sayHello` 方法。同时,我们也可以通过 `Person.prototype` 来访问 `Person` 构造函数原型对象的属性和方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值