面向对象03-继承

01 继承的概念

继承：通过某种方式使其中一个类型A获取另一个类型B的属性和方法，其中A类型成为子类型，B为父类型

Javascript中的继承：

Object是所有对象的父级|父类型|超类型：js中所有的对象都直接或间接的继承自Object。

继承有两种方式：接口继承和实现继承，在js中只支持实现继承，实现继承主要依赖原型链来完成。

说明:其他语言中继承通常通过类来实现，js中没有类的概念，js中的继承是某个对象继承另外一个对象，是基于对象的。

---

继承方式

01 属性拷贝实现继承

问题：属性拷贝如果拷贝的是引用类型，那么会有数据共享的问题

直接赋值与属性拷贝有什么区别：

 直接赋值：所有的数据都是共享的

 属性拷贝：仅仅引用类型是共享的

重新设置引用类型的值：

直接赋值：重新设置某个对象的引用类型值，那么另外一个对象会受到影响
属性拷贝：重新设置某个对象的引用类型值，那么另外一个对象不会受到影响 会切断他们之间的关系

代码示例01

    var obj1 = {
        name:"张三",
        arr:[1,2,3],
        showName:function () {
            console.log(this.name);
        }
    };

    var obj2 = {};
    //要求obj2获得obj1的属性和方法
    for (var i in obj1)
    {
        obj2[i] = obj1[i];
    }

    console.log(obj2);
    obj1.arr.push(4);
    console.log(obj2.arr);  //arr[4]

    obj1.name = "李四";
    console.log(obj2.name);  //张三

    obj1.arr = ["demo1","demo2"];
    console.log(obj2.arr);  //arr[4]

代码示例02

    var o1 = {
        name:"张三",
        arr:[1,2,3],
        showName:function () {
            console.log(this.name);
        }
    };

    var o2 = o1;
    console.log(o2);
    o1.name = "李四";
    console.log(o2.name); //李四

    o1.arr = ["demo1","demo2"];
    console.log(o2.arr);  //["demo1","demo2"];

02 原型式继承

• 利用动态特性

• 直接替换原型对象

• 设置子对象的原型对象等于父对象的原型对象

  01 原型对象成员共享
  
  02 子对象的构造器属性不正确（容易产生误解）
  
  03 子对象获取不到父构造函数的实例成员
  

代码示例

//利用动态特性

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

    Person.prototype.showName = function () {
        console.log(this.name);
    };
    var p1 = new Person();
    p1.showName();
    
//直接替换原型对象

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

    Person.prototype = {
        constructor:Person,
        showName:function () {
            console.log(this.name);
        }
    };
    var p1 = new Person();
    p1.showName();

//设置子对象的原型对象等于父对象的原型对象

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

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

    //设置原型继承
    Student.prototype =  Person.prototype;
    var stu = new Student();
    console.log(stu);
    console.log(stu.showName);
    console.log(stu.name);

03 安全扩展内置对象

需求3：在所有的数组上面添加name属性（name） 添加方法showName，在数组的原型对象上添加属性和方法

缺点：

01 原型对象上面的属性和方法可能会被覆盖(不安全)

02 原型对象上面的属性和方法会越来越多，不方便管理和维护，性能会降低（属性的访问）

03 可能会出现一些不容易察觉的错误(建议：在遍历数组的时候使用普通for循环)。for..in 循环会把原型对象上面的属性和方法列举出来。

代码示例

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

var arr1 = [1,2,3];
var arr2 = ["demo01","demo02"];
console.log(arr1.name);
//arr2.showName();
console.log(arr2.name);  

for(var i in arr2)
{
    console.log(i, arr2[i]);  //会将新添加到原型对象一起遍历
}

解决方法：设置自定义构造函数的原型对象为父构造函数的一个实例，既能拥有父构造函数的实例与原型成员，又不会在设置属性与方法的时候改变其成员

代码示例

    //01 提供自定义的构造函数
    function MyArray() {
    
    }
    //02 设置自定义构造函数的原型对象
    MyArray.prototype = new Array();   //拥有数组的所有属性和方法
    
    //03 在自定义构造函数上面添加属性和方法
    MyArray.prototype.name = "name";
    MyArray.prototype.showName = function () {
        console.log(this.name);
    }
    //04 使用自定义构造函数来创建对象
    var arr1 = new MyArray();
    arr1.push(1,2,3);
    console.log(arr1.length);
    console.log(arr1);

04 原型链继承
子构造函数.prototype=new 父构造函数（）；
（子构造函数的实例可以继承父构造函数的实例属性与原型方法）

代码示例

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

    function Person() {
        this.name = "人"
    }
    Person.prototype = new Animal();
    Person.prototype.constructor = Person;  //注意，动态添加属性与方法一定要在原型链继承之后，如果在之前，添加的属性与方法会被覆盖
    Person.prototype.eat = function () {
        console.log("吃饭");
    }

    function Student() {
        this.className = "超神班";
    }

    Student.prototype = new Person();
//    Student.prototype.constructor = Student;
//    Student.prototype.read = function () {
//        console.log("阅读");
//    }
    //错误的演示！！！
    //Student.prototype = {
        constructor : Student,
        read:function () {
            "读书"
     //  }     使用字面量方式添加属性和方法，会覆盖原型链继承
    }

    function Boy() {
        this.girlF = "林志玲";
    }

    Boy.prototype = new Student();
    Boy.prototype.constructor = Boy;
    Boy.prototype.play = function () {
        console.log("打游戏");
    }

    var boy = new Boy();
    console.log(boy);
    boy.eat();

注意点：

• 注意设置原型链的位置，先完成原型链继承，再给原型添加成员
• 进行原型链继承时注意构造器属性
• 继承完成后，不能使用字面量方式给原型添加属性与方法，会覆盖。

问题：

01 父对象的实例属性会成为子对象的原型属性，如果其实例属性为引用类型，则存在数据共享的问题
02 在创建子类型的实例的时候，不能给父类型的构造函数传递参数

代码示例

    function Person(name) {
        this.name = name;
        this.friends = ["巴拉巴拉","哗啦哗啦","滴答滴答"];
    }
    Person.prototype.showName = function () {
        console.log(this.name);
    }

    function Boy() {
    }
    Boy.prototype = new Person("张三");//设置实现原型链继承

    var boy1 = new Boy();
    console.log(boy1.friends);   //Array(4)

    var boy2 = new Boy();
    console.log(boy2.friends);    //Array(4)

    boy1.friends.push("乌拉乌拉");
    console.log(boy1.friends);   //Array(4)
    console.log(boy2.friends);   //Array(4)

    console.log(boy1.name);
    console.log(boy2.name);

05 原型链结构

01 每个对象都是由构造函数创建出来的
02 每个构造函数都有一个与之相关连的原型对象（prototype）
03 构造函数的原型对象本身也是对象，因此构造函数的原型对象也有自己的构造函数
04 构造函数的原型对象的构造函数也有相关联的原型对象，而这个原型对象也是一个对象，因此也有构造函数
05 构造函数的原型对象的构造函数的原型对象也有构造函数..也有原型对象..也是对象...构造函数....
以上 会形成一种链式的访问结构，这种结构称为原型链

原型链的终点是Object.prototype ，Object.prototype的原型对象是(Object.prototype.__ proto__ )

所有对象原型链的终点都是Object.prototype

代码示例

function Person() {
    }

var p1 = new Person();

    //p1 是一个对象，因此有构造函数（Person）
    //构造函数都有原型对象因此Person.prototype存在（Object）
    //Person.prototype本身是一个对象（Object），因此也有构造函数（Object）
    //Object的构造函数也有原型对象,Object.prototype
    //Object.prototype本身也是一个对象，这个对象是Object类型
    //Object.prototype也有构造函数，构造函数是Object

06 原型链中属性搜索规则

对象在访问（读取|写）属性的时候,先遍历当前的对象，查找有没有指定的属性

01 如果有该属性，那么就直接使用
02 如果没有该属性，那么就遍历当前对象的原型对象，在原型对象身上查询指定的属性
    01 如果找到那么就直接使用
    02 如果没有找到，那么就继续向上查询
03 重复这个过程，直到Object.prototype,如果找到那么就使用，如果没有找到那么就返回undefined或者是报错。

07 借用构造函数继承
作用：获取父构造函数的实例成员（解决传参的问题）
注意：获取不到父构造函数的原型成员，可以采用原型式继承获取

代码示例

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

    function Boy(name,age) {
        //构造函数内部会默认创建空对象并赋值给this
        Person.call(this,name,age);  //this.name = name;  借用构造函数,也就是将构造函数Person中的实例属性给了this，this又指向由Boy构造函数创建的实例
    }

    Boy.prototype = Person.prototype;    //原型式继承C

    var boy1 = new Boy("张三",20);
    var boy2 = new Boy("李四",30);
    console.log(boy1);
    console.log(boy2);
    boy1.showName();

08 组合继承
借用构造函数获取父构造函数的实例成员；
利用原型式继承，获取父构造函数的原型对象；

问题：原型对象数据的共享问题

09 深拷贝继承

用法：使用for ...in循环来遍历，如果是值类型，直接赋值；如果是引用类型，那么新创建一个对象，再次遍历，持续整个过程，使用递归函数。注意：使用for ...in循环会把原型对象成员也拷贝，使用hasOwnProperty方法进行过滤。

代码示例1

    var person = {
        name:"张三",
        car:{
            type:"飞船",
            color:"黑色",
            des:{
                number:666888
            }
        },
        arr:[1,2,3,4]
    };


    //参数1:目标对象 ，参数2：要拷贝属性的对象
    function deepCopy(obj1,obj2) {
        obj1 = obj1 || {};  //容错性处理
        for(var i in obj2)
        {
            //只拷贝实例属性
            if (obj2.hasOwnProperty(i))
            {
                if (typeof obj2[i] == "object")
                {
                    //引用类型,新创建对象，再次遍历
                    //需要判断是数组还是对象
                    obj1[i] = Array.isArray(obj2[i])?[]:{};  //Array.isArray方法判断是否是数组，
                    deepCopy(obj1[i],obj2[i]);
                }else
                {
                    obj1[i] = obj2[i];
                }
            }

        }
    }

    var p = {};
    deepCopy(p, person);
    console.log(p);

    //验证共享的问题是否解决
    person.car.type = "银河战舰";
    console.log(p.car.type);

    console.log(person);

代码示例2
深拷贝实现继承，数据共享问题解决

    function deepCopy(obj1,obj2) {
        obj1 = obj1 || {};  //容错性处理
        for(var i in obj2)
        {
            //只拷贝实例属性
            if (obj2.hasOwnProperty(i))
            {
                if (typeof obj2[i] == "object")
                {
                    //引用类型,新创建对象，再次遍历
                    //需要判断是数组还是对象
                    obj1[i] = Array.isArray(obj2[i])?[]:{};
                    deepCopy(obj1[i],obj2[i]);
                }else
                {
                    obj1[i] = obj2[i];
                }
            }

        }
    }

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

    Person.prototype.hi = "hi";

    function Boy(name,age) {
        //构造函数内部会默认创建空对象并赋值给this
        Person.call(this,name,age);  //this.name = name;  借用构造函数
    }


    deepCopy(Boy.prototype,Person.prototype);

    var boy1 = new Boy("张三",20);
    var boy2 = new Boy("李四",30);
    console.log(boy1);
    console.log(boy2);
    boy1.showName();
    console.log(boy1.hi); //hi
    Boy.prototype.hi = "hahahahah";
    console.log(boy1.hi); //hahahahah

    var p1 = new Person();
    console.log(p1.hi);   //hi