原型链-P14-2019-12-06

测试代码.png

原型链.png

//代码如下
   <script>
        //原形本质是对象所以我们可以动态的添加属性和方法
        function Student(age, name, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            // this.sayHi = function() {
            //     console.log("111");
            // }
        }
        // console.dir(Student.prototype);
        Student.prototype.sayHi = function() {
            console.log("大家好,我是" + this.name);
        }

        var st1 = new Student(18, "张三", "男")
        var st2 = new Student(19, "韩梅梅", "女")
            // st2.sayHi();
            // st2.say(); 错误 顶层为null
        var o = st1.__proto__;
        console.dir(o);
    </script>

在上面图中根据原型三角关系.png

可知现在只是查找到了构造函数拥有的原形而已所以可以找到

//再如下代码
    <script>
        //原形本质是对象所以我们可以动态的添加属性和方法
        function Student(age, name, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            // this.sayHi = function() {
            //     console.log("111");
            // }
        }
        // console.dir(Student.prototype);
        Student.prototype.sayHi = function() {
            console.log("大家好,我是" + this.name);
        }

        var st1 = new Student(18, "张三", "男")
        var st2 = new Student(19, "韩梅梅", "女")
            // st2.sayHi();
            // st2.say(); 错误 顶层为null
        var o = st1.__proto__;
        console.dir(o);
        var o1 = st1.__proto__;
        console.dir(o1.__proto__);
    </script>

var o1 = st1.__proto__;.png

//继续
   <script>
        //原形本质是对象所以我们可以动态的添加属性和方法
        function Student(age, name, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            // this.sayHi = function() {
            //     console.log("111");
            // }
        }
        // console.dir(Student.prototype);
        Student.prototype.sayHi = function() {
            console.log("大家好,我是" + this.name);
        }

        var st1 = new Student(18, "张三", "男")
        var st2 = new Student(19, "韩梅梅", "女")
            // st2.sayHi();
            // st2.say(); 错误 顶层为null
        var o = st1.__proto__;
        console.dir(o);
        //原型中的proto是什么类型
        var o1 = o.__proto__;
        console.dir(o1);

        var o2 = o1;
        console.dir(o2.__proto__);
    </script>

image.png

由此可以引出成员查找规则
会先再这个对象中查找,如果没有会去原型如再没有会去原型链查如果有没顶层null直接返回

image.png