原型链—之原生js贪吃蛇分析

什么是原型链：每一个对象都有自己的原型；原型也是对象,也有自己的原型,依次类推而形成的链式结构就叫做原型链 。

对象访问原型链中的成员采用就近原则
1.如果自己本身有就找自己的,如果自己没有就从原型中找,如果原型中也没有就从原型的原型中找,依次类推知道找到原型链的终点null,如果还没有找到是属性就返回undefined , 如果是方法就返回xxx is not a function.

一、构造函数构对象的原型链

        function Person(name,age){
            this.name = name;
            this.age = age;
        };

        //每一个人都可以打招呼，可以添加到原型中
        Person.prototype.sayHi = function(){
            console.log('中午好呀');
        };

        //人类是可爱的，可以添加到原型中
        Person.prototype.type = '可爱迷人';

        var p1 = new Person('可爱迷人的反派角色',20);

        console.log(p1);
        
        /*面试题 ：请说出下面程序运行的结果
         */
         console.log(p1.name);//可爱迷人的反派角色    p1自己有name属性
         console.log(p1.type);//可爱迷人  p1自己虽然没有type属性，但是它的原型有type
         p1.sayHi();//    p1自己虽然没有sayHi方法，但是它的原型有

        //对象取值：不存在undefined
         console.log(p1.Friend);//undefined   p1自己没有Friend，原型也没有，
         //p1.cry();//程序报错  cry is not a function    p1自己没有cry方法，原型也没有，

        //为什么不报错？ p1自己没有toString  p1的原型也没有toString  但是p1的原型的原型有toString
         console.log(p1.toString());


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

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

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

二、内置对象的原型链

        //1.Array对象
        var arr = [10,20,30];// new Array(10,20,30)

        //查看数组对象的原型链
        console.log(arr.__proto__.constructor);//Array
        console.log(arr.__proto__ === Array.prototype);//true

        //查看数组对象的原型的原型
        console.log(arr.__proto__.__proto__.constructor);//Object
        console.log(arr.__proto__.__proto__ === Object.prototype);//true

        console.log(arr.__proto__.__proto__.__proto__);//null

        console.log(arr);

        arr.push();//js作者将数组所有的API都放入了Array.prototype中，这样所有的数组对象都可以直接调用

        arr.toString();//所有的对象原型链都会指向Object.prototype,这就意味着任何对象都可以调用Object原型中的方法
        
        
        //2.Date对象

        var date = new Date();
            细节：日期对象不能直接用log，会自动转成toString字符串
        console.log(date);
        //查看对象内存空间  console.dir()
        console.dir(date);

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

        //查看date的原型的原型链
        console.log(date.__proto__.__proto__.constructor);//Object
        console.log(date.__proto__.__proto__ === Object.prototype);//true
        
        
        //3.String对象（基本包装类型  new String new Number new Boolean）
        var str = new String('123');
        console.log(str);

        //查看str对象的原型
        console.log(str.__proto__.constructor);//String
        console.log(str.__proto__ === String.prototype);//true

        //查看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');

        console.log(box);//打印HinnerHTML
        console.dir(box);//打印对象内存空间
        console.dir(p1);