面向对象(八)继承___ 03原型链继承

title: 面向对象(八)继承___ 03原型链继承 # 文章页面上的显示名
date: # 文章生成时间，一般不改
categories: # 文章分类目录，可省略
- 面向对象
tags: # 文章标签，可省略
- 面向对象
- 基于原型面向对象的继承 # 个数不限，单个可直接跟在 tags 后面

---

原型链结构

01 每个对象都是由构造函数创建出来的，因为每个对象都有构造函数
02 每个构造函数都有一个与之对应的原型对象
03 原型对象本身也是对象
04 因此，原型对象也有自己的构造函数
05 原型对象的构造函数也有自己的原型对象
06 原型对象的构造函数的原型对象也是对象，所以它也有自己的构造函数
07 原型对象的构造函数的原型对象的构造函数也有自己的原型对象。。。
以上，形成一个链式的结构，就称为是原型链

原型链的顶端是** Object.prototype**,Object.prototype本身也是一个对象，因此也有原型对象
Object.prototype.proto 是null

原型链中对象属性的搜索规则 --- 就近原则

01对象.属性的方法去访问属性的时候，先查找有没有对应的实例属性，如果有那么就直接使用
02如果没有，那么就去该对象的原型对象上面去找，如果有那么就直接使用
03如果没有，那么就接着查找原型对象的原型对象，如果有，那么就直接使用，
04如果没有，那么就继续上面的搜索过程
05直到搜索到Object.prototype为止，如果还是没有找到就返回undefined或者是报错

注意：
原型链搜索的路径越长，查询属性所花费的时间就越多

原型链继承

• 原型链继承的步骤

• 01提供一个父构造函数
• 02 提供一个子构造函数
• 03 设置子构造函数的原型对象为父构造函数的一个实例对象
• 04 在实例对象上面设置属性和方法

<script>
    function A(){
        this.age = 55;
        this.showAge = function(){
            console.log(this.age);
        }
    };

    //设置A的原型属性和方法
    A.prototype.logDes = function(){
        console.log("des");
    }

    function B(){};
    //设置原型链继承
    B.prototype = new A();
    B.prototype.des = "des";
    B.prototype.show = function(){
        console.log("show");
    };

    var b1 = new B();
    console.log(b1.age);
    b1.showAge();
    b1.logDes();
    console.log(b1);
</script>

复杂原型链继承示例

<script>

    //01 提供构造函数（4）
    //02 设置属性和方法（建议：属性设置在实例上，方法设置在原型上）
    //03 设置继承
    //04 修正构造器属性

    Animal.prototype.run = function(){
        console.log("run");
    }
    function Animal(color){
        this.color = color
    }

    Person.prototype = new Animal();
    Person.prototype.eat = function(){
        console.log("chi");
    }
    Person.prototype.constructor = Person;

    function Person(){
        this.name = "默认的名称"
    }



    Student.prototype = new Person();
    Student.prototype.study = function(){
        console.log("good good study, day day up");
    }
    Student.prototype.constructor = Student;

    function Student(){
        this.id = "201701"
    }

    Boy.prototype = new Student();
    Boy.prototype.lol = function(){
        console.log("lol");
    }
    Boy.prototype.constructor = Boy;

    function Boy(){
        this.sex = "男"
    }

    //创建对象
    var boy = new Boy("红色");
    console.log(boy);
</script>

原型链的使用注意

01 在设置完原型链之后需要修正构造器属性的指向(Student.prototype.constructor)
02 要在设置完原型继承之后再来为原型对象添加属性和方法
03 要在设置完原型继承之后只能通过对象的动态特性来设置原型对象的属性和方法，不要使用字面量的方式

---

原型链继承的问题

01 无法对父构造函数传递参数
02 继承过来的实例属性会成为当前对象的原型属性，会被创建出来的多个对象所共享

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.friends = ["王小强"];
    }

    Person.prototype.showAge = function(){
        console.log(this.age);
    }

    Person.prototype.showName = function(){
        console.log(this.name);
    }

    function Boy(book){
        this.book = book;
    };

    //设置继承
    Boy.prototype = new Person();
    var boy01 = new Boy("三字经");
    var boy02 = new Boy("弟子规");

    console.log(boy01);
    console.log(boy02);
    console.log(boy01.friends);
    console.log(boy02.friends);
    boy01.friends.push("张空空");
    console.log(boy01.friends);
    console.log(boy02.friends);

</script>

参数传递问题
原型共享问题