prototype和new的底层实现

Posted 2020-09-23

    <script type="text/javascript">
        function A(){
            this.name = "jack";
            this.age = 18;
            height = 180;
            this.action = function(v){
                console.log(this===v);
            }
            
        };
        A.prototype.price = 888888888;
    
//    首先：A的原型链prototype是个对象Object
//    然后：price是对象A原型链prototype的属性
        console.log(A.prototype.price);
//    A是没有price属性的哦
        console.log(A.price);
//    最后：原型链prototype中含有 构造器constructor和原型__proto__
        console.log(A.prototype);
//    原型链的constructor就是构造函数 A
        console.log(A.prototype.constructor);
        console.log(A === A.prototype.constructor);
//    __proto__中含有很多固有属性
        console.log(A.prototype.__proto__);
//    所以说：构造函数属性的使用都是靠 prototype来实现的。


//    那么 new A() 是怎么回事？
//    new A(); 不仅有 prototype的属性，也有
        var a = new A();
//    a除了this包含的属性外还有 __proto__
        console.log(a);
//    a能使用 A的的属性哦
        console.log(a.age);
//    因为a的就是A中的this
        a.action(a);
//    a能使用 A.prototype的属性哦
        console.log(a.price);
//    哎呦。a的原型__proto__和 A的原型链prototype是一样的
//    那么 new A() 是把 a.__proto__引用指向了A.prototype咯???
        console.log(a.__proto__ === A.prototype)
//    综合上面 的结论，那么 a能使用 prototype属性的原因是因为 a原型的引用指向了 A.prototype
//    a能使用A中的属性是因为。A中的this === a;
    </script>