昼猫笔记 -- 面向对象(II) - 继承

骑猪看日落 2021-12-15 02:55 116阅读 0赞

### 继承 ###

由于js不像java那样是真正面向对象的语言，js是基于对象的，它没有类的概念。

所以，要想实现继承，可以用js的原型prototype机制或者用`apply`和`call`方法去实现，还有就是js可以通过构造函数和原型的方式模拟实现类的功能。

另外，js类式继承的实现也是依靠原型链来实现的。

--------------------

### 继承方法 ###

1.  `call`继承：子类继承父类，将父类的私有属性继承为子类的私有属性

function Xx() {
        this.name = '小欣欣'
    };
    Xx.prototype.age = 18;
    
    function Zm() {
        this.name = '昼猫'
        Xx.call(this)
    };
    Zm.prototype.age = 13;
    
    var xx = new Xx;
    var zm = new Zm;
    console.log(zm.name); // 小欣欣

![../img/call继承.png][.._img_call_.png]

1.  原型继承 将父类的私有和共有属性都继承为子类的共有属性

function Xx() {
       this.name = '小欣欣'
    };
    Xx.prototype.age = 18;
    
    function Zm() {
       this.name = '昼猫'
    };
    Zm.prototype.age = 13;
    
    // 父类的实例赋值给子类的原型
    Zm.prototype = new Xx
    
    var xx = new Xx;
    var zm = new Zm;
    console.log(zm);

![../img/原型继承.png][.._img_.png]

1.  冒充对象继承：将父类私有的和共有的都继承为子类私有的

![../img/冒充对象继承.png][.._img_.png 1]

1.  混合继承：私有的继承为私有的，共有的和私有的再次继承为私有的

> 混合继承是`call` 和原型继承的结合  
> 私有的被继承了两次

function Xx() {
        this.name = '欣欣'
        this.age = '欣欣私有'
    }
    Xx.prototype.age = 18
    
    function Zm() {
        this.name = '昼猫'
        this.age = '昼猫私有'
        Xx.call(this)
    }
    Zm.prototype.age = new Xx;
    
    var xx = new Xx;
    var zm = new Zm;
    console.log(zm.name, zm.age); // 欣欣 欣欣私有

![../img/混合继承.png][.._img_.png 2]

1.  组合继承：私有的继承为私有的，共有的继承为共有的

function Xx() {
        this.name = '欣欣'
        this.age = '欣欣私有：10'
    }
    Xx.prototype.age = 18
    
    function Zm() {
        this.name = '昼猫'
        this.age = '昼猫私有:10'
        Xx.call(this)
    }
    // Zm.prototype.age = 13;
    Zm.prototype = Object.create(Xx.prototype)
    var xx = new Xx;
    var zm = new Zm;
    console.log(zm.name, zm.age); // 欣欣 欣欣私有：10
    console.log(zm.__proto__.age); // 18

![../img/组合继承.png][.._img_.png 3]

1.  中间类继承

function fn() {
        console.log(arguments);
        arguments.__proto__ = Array.prototype
        arguments.shift()
    }
    fn(1, 2, 3)

![../img/中间类继承.png][.._img_.png 4]

> `arguments` 不是一个数组，没有 `Array` 的自带的方法，可以通过这种方法，将`arguments`的原型执行 `Array` 内置类的原型

--------------------

### 克隆 ###

var obj = {
        name: '小欣欣',
        age: 16
    }

> 注意：这种方式不是克隆只是把obj的内存地址 简单的赋值(内存地址)

`for in` 克隆

> 注意：不管是共有的还是私有的都将克隆为私有的

var obj = {
        name: '昼猫',
        age: '12'
    }
    var obj2 = {}
    for (const key in obj) {
        obj2[key] = obj[key]
    }
    console.log(obj2); //{name: '昼猫', age: '12'}

`Object.create()` JS提供的一种克隆方式，将obj的所有属性克隆到obj2的原型上

var obj = {
        name: '小欣欣',
        age: 16
    }
    var obj2 = Object.create(obj)

如果需要添加私有的属性，需要在第二个参数添加 `value` 值（否则会报错，’不是一个对象‘）

var obj = {
        name: '小欣欣',
        age: 16
    }
    var obj2 = Object.create(obj, {name: {value: '昼猫'}})

> 文章来自 个人公众号 [昼猫笔记][Link 1]

转载于:https://www.cnblogs.com/zhoumao/p/10265363.html

[.._img_call_.png]: /images/20211214/17de035c30e84323a47654f50370713a.png
[.._img_.png]: /images/20211214/f048fb54fc4849889f78ab410139c01a.png
[.._img_.png 1]: /images/20211214/7eb12de6146a44d9b041cd61a6f76036.png
[.._img_.png 2]: /images/20211214/4c515a16752f421aa45c0da2d9eab935.png
[.._img_.png 3]: /images/20211214/9abf5c08ba454999b16c62aada875a0a.png
[.._img_.png 4]: /images/20211214/b59dd479be344368847bf5ac0e03408f.png
[Link 1]: https://mp.weixin.qq.com/mp/homepage?__biz=MzUzNjkyNjkwOA==&hid=4&sn=4be329f74f5e57cb428863d2e9af9ca3