【设计模式+原型理解】第三章:javascript五种继承父类方式

释放双眼,带上耳机,听听看~!

【前言】

  我们都知道,面向对象(类)的三大特征:封装、继承、多态

  继承:子类继承父类的私有属性和公有方法

  封装:把相同的代码写在一个函数中

  多态:

    ->重载:JS严格意义上是没有重载,但可以通过传递不同参数实现不同功能

    ->重写:子类重写父类的方法(这里只要把父类的原型一改,父类的其他实例会受到影响,又因为子类的原型链继承父类的实例,这就会导致同样会影响到子类的实例,本质是因为在JS原型继承中,由于它的核心原理,继承并不是从父类中拿过一份一模一样的东西拷贝过来,而是让子类和父类之间增加了一个原型链这样一个桥梁)

 

【原型继承】

  什么是原型继承,下面是一个非常常见的例子:

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Title</title>
</head>
<body>
    <div id=\"#div1\"></div>
</body>
<script>
    console.dir(document.getElementById(\'div1\'))
</script>
</html>

  当你展开id=\"div1\"这个dom节点的时候,你会看到,它的__proto__嵌套了一层又一层,如下,这是一条非常长的原型链

// #div1.__proto__ -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype
// -> Node.prototype -> EventTarget.prototype -> Object.prototype

  上面的原型链非常长,但是是如何将它们一级一级关联起来的呢?实现原理如下:

// 第四层 Object

// 第三层 myObject
function myObject() {

}
myObject.prototype = {
    constructor: myObject,
    hasOwnProperty: function () {}
};

// 第二层 myEventTraget
function myEventTraget() {
    
}
myEventTraget.prototype = new myObject(); // 子类的原型等于父类的实例
myEventTraget.prototype.constructor = myEventTraget;
myEventTraget.prototype.addEventListener = function () {};

// 第一层 myNode
function myNode() {

}
myNode.prototype = new myEventTraget(); // 子类的原型等于父类的实例
myNode.prototype.constructor = myNode;
myNode.prototype.createElment = function () {};

// 实例化
var n = new myNode; // 打印出来,看看n的结果,已经有四层__proto__了。

  实例n 打印出来的样子如下:

【设计模式+原型理解】第三章:javascript五种继承父类方式

  

  上面的多层继承,是不是看起来特别想dom的原型继承,一层套一层,下面来个简化版的。

// 原型继承简化
function A() { this.x = 100; } A.prototype.getX = function () { console.log(this.x) }; function B() { this.y = 200; } // 现在,B想继承A的私有+公有的属性和方法 B.prototype = new A; B.prototype.constructor = B; var b = new B;

  上面简化版的原型继承原理,可以参考下图:

【设计模式+原型理解】第三章:javascript五种继承父类方式

  原型继承总结:

    “原型继承”是JS最常见的一种继承方式

    子类B想要继承父类A中的所有属性和方法(私有+公有),只需要B.prototype = new A即可

    特点:它把父类中私有+公有的都继承到子类原型上(即子类公有的)

    核心:原型继承并不是把父类中的属性和方法克隆一份一模一样的给B,而是让B和A之间增加原型链的连接,以后实例b想要A中的getX方法,需要一级级向上查找来使用。

 

【call继承】

  -> 把父类私有属性和方法,克隆一份一模一样的,作为子类私有的属性和方法

function A() { // 一个函数,它有三种角色:1、普通函数(私有作用域);2、类(new);3、普通对象(__proto__)
    this.x = 100;
    this.a = function () {
        console.log(this.x);
    }
}
A.prototype.getX = function () {
    console.log(this.x);
};
function B() {
    this.y = 100;
    // this->b
    A.call(this);// ->A.call(b) 把A执行,让A中的this变为了n!!!
    //此时的A.prototype对B类来说是没用的,因为B没有继承A
}
var b = new B;
console.log(b.x); // ->100
b.a(); // ->100
b.getX();// ->b.getX is not a function

  值得注意的是,b.getX() // -> b.getX is not a function。为什么会这样呢,因为b实际上并没有继承A类,所以A.prototype对B是没有任何作用的,此时的A,实际上只是作为函数,而不是作为一个类!!!

  总结call继承

    ->call继承,把父类的私有属性和私有方法全部都拿过来了,但是却拿不了父类的公有方法,这是它的缺点,也是优点。

 

【冒充对象继承】

  ->把父类私有的+公有的属性和方法克隆一份一模一样的,给子类私有的

function A() {
    this.x = 100;
}
A.prototype.getX = function () {
    console.log(this.x);
};
function B() {
    // -> this->b
    var temp = new A; // 将A的实例当做普通对象来做遍历,这就是冒充对象
    for (var key in temp) {// 把父类A私有的和公有的,都复制过来给子类B私有的
        this[key] = temp[key];
    }
    temp = null;
}
var b = new B;
b.getX(); // ->x、getX

  注意:for in的写法,可以把对象公用和私有的属性和方法,全部都打印出来;

     obj.propertyIsEnumerable(key),此方法可以判断对象的私有属性

     obj .hasOwnProperty(key),此方法同样也可以判断对象的私有属性

  总结“冒充对象继承”:

    ->这个继承方法比call跟完善了一步,call继承只是把父类的私有拿过来变成自己私有的,但是“冒充对象继承”则是把父类的私有+公有的属性和方法拿过来变成自己私有的。

 

【混合模式继承】

  ->原型继承 + call继承

function A() {
    tihs.x = 100;
}
A.prototype.getX = function () {
    console.log(this.x)
};
function B() {
    A.call(this); // ->这一步,即等于: x=100
}
B.prototype = new A; // ->这一步,即等于:B.prototype: x=100 getX=....
B.prototype.constructor = B;
var b = new B;
b.getX();

  总结:

    ->这种方法,缺点是将A这个类,执行了两次

    ->首先父类私有的复制了两遍,第一遍是用call把父类私有的,复制给了子类私有的;第二遍就是使用原型继承,把父类私有+公有的属性,给了子类公有的

    ->也就是说重复了父类私有的存在于子类私有上, 也存在于子类公有上。也就是说,重复了一次父类私有的复制。

 

【寄生组合式继承】(强烈推荐

  ->目的:子类继承父类,父类私有的子类就继承私有的,父类公有的子类就继承公有的(注意,是在__proto__又套了一层原型)

// 寄生组合式继承
function A() {
    this.x = 100;
}
A.prototype.getX = function () {
    console.log(this.x);
};
function B() {
    // ->this->b
    A.call(this);
}
// B.prototype = Object.create(A.prototype); // 意思是把父类的原型,给了子类的原型
// Object.create创建了一个对象,并且把这个新对象的原型指向了a的原型,然后B的原型指向了这个新对象
B.prototype = objectCreate(A.prototype);
B.prototype.constructor = B;
var b = new B;
console.log(b);


// Object.create的原理如下
function objectCreate(o) {
    function Fn() {}
    Fn.prototype=o;
    return new Fn;
}

    注意,这种方式跟原型继承是有区别的,

    ->原型继承:是把父类私有+公有的属性给了子类的公有上

    ->寄生组合式继承:

      继承私有:A.call(this);  

      继承公有:先把父类私有的清空(这里的清空可以新建一个新对象,然后新对象的原型指向父类的原型即可),然后子类的原型指向该新对象

    ->比较绕,可以看看下图,即寄生组合式继承原理图

【设计模式+原型理解】第三章:javascript五种继承父类方式

 

  总结“寄生式继承”

    ->其实是比较完美地实现了继承,子类继承父类,父类私有的属性就放在子类私有上,父类公有的属性就放在子类公有上。

 

--END--

 

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

加速云:淮海电信100G高防,550元/16核/16g内存/120gSSD/30M独享带宽,分钟级全自动部署

2020-11-9 3:50:20

随笔日记

SpringCloud-config分布式配置中心

2020-11-9 3:50:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索