完整原型链-------图文详解

完整原型链-------图文详解

前言 :

本片适合有js基础的前端技术工作者;
如果你精通JS高级, 那么你可以直接阅读下图 ;
如果你是JS初学者, 建议你先了解以下概念( 附 案例 )
不足之处 , 欢迎指正

1. 什么是原型链

原型链 ：每一个对象，都有__proto__指向自身的原型。 而原型也是对象，也有自己的
__proto__指向原型的原型，以此类推形成链式结构，称之为原型链。

2. 对象访问原型链中成员的规则 ：就近原则

访问对象的成员 , 先看自己有没有, 自己有就先访问自己的 , 自己没有就看原型, 原型有,则访问,没有则访问原型的原型. 还是没有, 则继续往上找. 依此类推, 一直找到原型链的终点NULL. 如果还没有找到, 如果是属性, 则获取undefined 如果是方法 , 则报错 XXX xxx is not defined
举例 :

       //1.构造函数
        function Person(name,age){
            this.name = name;
            this.age = age;
        };

        //2.原型对象
        Person.prototype.sayHi = function(){
            console.log('人生若只如初见，何事秋风悲画扇');
        };

        Person.prototype.type = '哺乳动物';

        //3.实例化对象
        var p1 = new Person('又又',18);
        console.log(p1);

        //请说出以下代码执行结果
        console.log(p1.name);//又又      p1自己有name属性
        console.log(p1.type);//哺乳动物   p1自己没有type，但是p1的原型有
        console.log(p1.hobby);//undefined p1自己没有hobby，原型也没有
        p1.sayHi();// 人生若只如初见，何事秋风悲画扇   p1自己没有这个方法，原型有
       // p1.eat();//报错 xxx is not defined    p1自己没有这个方法，原型也没有

       //为什么不报错？  p1自己没有这个方法，原型也没有这个方法，但是原型的原型有
        p1.toString();

        //查看p1的原型链
        console.log(p1.__proto__.constructor);//Person
        console.log(p1.__proto__ === Person.prototype);//true

        //查看p1的原型的原型
        console.log(p1.__proto__.__proto__.constructor);//Object
        console.log(p1.__proto__.__proto__ === Object.prototype);//true

        //查看p1的原型的原型的原型
        console.log(p1.__proto__.__proto__.__proto__);//null

3. 内置对象的原型链

<script>
        //1.Date日期对象

        var d1 =  new Date();
        console.log(d1);// log打印日期对象，会自动转成字符串显示时间
        console.dir(d1);// dir 查看对象内存
        

        //1.1 查看d1的原型链
        console.log(d1.__proto__.constructor);//Date
        console.log(d1.__proto__ === Date.prototype);//true

        //1.2 查看原型的原型
        console.log(d1.__proto__.__proto__.constructor);//Object
        console.log(d1.__proto__.__proto__ === Object.prototype);//true
        
        

        //2.Array数组对象

        var arr = [10,20,30];// new Array(10,20,30)
        console.log(arr);
        

        //2.1 查看arr的原型
        console.log(arr.__proto__.constructor);//Array
        console.log(arr.__proto__ === Array.prototype);//true
        //2.2 查看arr的原型的原型
        console.log(arr.__proto__.__proto__.constructor);//Object
        console.log(arr.__proto__.__proto__ === Object.prototype);//true
        
        
        //3. String对象
        var str = new String('123');
        console.log(str);
        
        //3.1 查看str的原型链
        console.log(str.__proto__.constructor);//String
        console.log(str.__proto__ === String.prototype);//true
        //3.2 查看str原型的原型
        console.log(str.__proto__.__proto__.constructor);//Object
        console.log(str.__proto__.__proto__ === Object.prototype);//true
        
        
        //4.DOM对象
        var box = document.getElementById('box');
        var p1 = document.getElementById('p1');
    </script>