面向对象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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,311评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,339评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,671评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,252评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,253评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,031评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,340评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,973评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,466评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,701评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,254评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2赞 345

推荐阅读更多精彩内容