js的三座大山之 原型链与原型

原型对象的三大特征

原型对象的三大特征:封装 继承 多态

封装 : 将某个具体功能封装在对象中，只对外部暴露指定的接口，外界在使用的时候，只考虑接口怎么用，不用考虑内部怎么实现（前面学习的api其实就是一种封装思想）

继承 : 一个对象拥有其他对象所有成员

多态:一个对象在不同情况下有多种状态

替换原型继承

把父对象作为子对象的构造函数的原型

        //父对象
       let father = {
           house : {
               address:'武汉天地',
               price : 10000000
           },
           car:{
               brand:'劳斯莱斯幻影',
               price:8000000
           }
       }

       //子对象构造函数
       function Son(name,age){
        this.name = name
        this.age = age
       }

       //默认原型
       Son.prototype.eat = function(){
           console.log('吃东西')     
       }
       /* 替换原型继承： 把父对象作为子对象构造函数的原型*/
       Son.prototype = father

       let son1 = new Son('爽哥',20)
       let son2 = new Son('ikun',30)
       console.log(son1,son2)

原型链

1.原型链:每一个对象都有自己的原型,原型也是对像,也有自己的原型对象,以此类推形成原型链结构,称之为原型链(原型链的终点是null)

2.对象访问原型链规则:就近原则; 对象先访问自己的,自己没有就找原型,原型没有就找原型的原型,一直找到原型链的终点null,如果找不到,属性则获取undefind,方法则报错

原型链的作用:继承

查看数组的原型链

    //1.Array
    let arr = new Array(10,20,30);
    console.log ( arr );
    //查看arr的原型
    console.log ( arr.__proto__.constructor );//Array
    console.log ( arr.__proto__ === Array.prototype );
    //查看arr的原型的原型
    console.log ( arr.__proto__.__proto__.constructor );//Object
    console.log ( arr.__proto__.__proto__ === Object.prototype );//true

其实其他数据类型的原型链数组类似

查看dom的原型链

        let div = document.querySelector('div')
        console.log(div.__proto__) //HTMLDivElement
        console.log(div.__proto__.__proto__) //HTMLElement
        console.log(div.__proto__.__proto__.__proto__) //Element
        console.log(div.__proto__.__proto__.__proto__.__proto__) //Node
        console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__) //EventTarget
        console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__) //Object
        console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__) //null