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

【前言】

　　我们都知道，面向对象（类）的三大特征：封装、继承、多态

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

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

　　多态：

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

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

【1、原型继承】

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

<!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 打印出来的样子如下：

　　上面的多层继承，是不是看起来特别想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;

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

　　原型继承总结：

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

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

　　　　特点：它把父类中私有+公有的都继承到子类原型上（即子类公有的）

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

【2、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继承，把父类的私有属性和私有方法全部都拿过来了，但是却拿不了父类的公有方法，这是它的缺点，也是优点。

【3、冒充对象继承】

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

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继承只是把父类的私有拿过来变成自己私有的，但是“冒充对象继承”则是把父类的私有+公有的属性和方法拿过来变成自己私有的。

【4、混合模式继承】

　　->原型继承 + 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把父类私有的，复制给了子类私有的；第二遍就是使用原型继承，把父类私有+公有的属性，给了子类公有的

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

【5、寄生组合式继承】（强烈推荐）

　　->目的：子类继承父类，父类私有的子类就继承私有的，父类公有的子类就继承公有的（注意，是在__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);　　

　　　　　　继承公有：先把父类私有的清空（这里的清空可以新建一个新对象，然后新对象的原型指向父类的原型即可），然后子类的原型指向该新对象

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

　　总结“寄生式继承”

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

--END--

【设计模式+原型理解】第三章：javascript五种继承父类方式的更多相关文章

【设计模式+原型理解】第一章：使用Javascript来巧妙实现经典的设计模式
刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是 ...
JavaScript五种继承方式详解
本文抄袭仅供学习http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html 一. 构造函数绑定 ...
JavaScript 五种(非构造方式)继承
参考链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html
第三章 JavaScript操作BOM对象
第三章 JavaScript操作BOM对象一.window对象浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...
【软件构造】第三章第五节 ADT和OOP中的等价性
第三章第五节 ADT和OOP中的等价性在很多场景下,需要判定两个对象是否 “相等”,例如:判断某个Collection 中是否包含特定元素. ==和equals()有和区别?如何为自定义 ADT正确 ...
JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
Android五种数据存储方式
android 五种数据存储 :SharePreferences.SQLite.Contert Provider.File.网络存储 Android系统提供了四种存储数据方式.分别为:SharePre ...
Javascript中实现继承的方式
js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性 ...
JavaScript几种继承方式的总结
1.原型链继承直接将子类型的原型指向父类型的实例,即"子类型.prototype = new 父类型();",实现方法如下: //父类构造函数 function father(n ...

随机推荐

Arrays.asList 为什么不能 add 或者 remove 而 ArrayList 可以
分析如下例子: 1 import java.util.Arrays; 2 import java.util.List; 3 4 5 public class Test { 6 public stati ...
学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
qtchooser
qtchooser 的配置目录: /usr/lib/x86_64-linux-gnu/qtchooser qtchooser 的真实配置目录: /usr/share/qtchooser qtchoos ...
Postman----presets与环境变量的联合使用
一.环境在开发不同阶段,可能存在不同的环境(对我碰到的就是服务器地址/api版本/header信息等不一样),比如 debug环境和release环境,每次切换环境测试的时候都得重新配置url信息, ...
面试题之小炼牛刀zip,lambda,map
# 现有两元祖,(('a'),('b')),(('c'),('d'))# 请使用python中匿名函数生成列表[{'a':'c'},{'b':'d'}]t1=(('a'),('b'))t2=(('c' ...
js的异步加载你真的懂吗
面试高频之js的异步加载讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ? 1 , 创建document对象, 开始解析页面, ...
浏览器加载 CommonJS 模块的原理与实现
就在这个周末,npm 超过了 cpan ,成为地球上最大的软件模块仓库. npm 的模块都是 JavaScript 语言写的,但浏览器用不了,因为不支持 CommonJS 格式.要想让浏览器用上这些模 ...
ASP.NET Core 实战：构建带有版本控制的 API 接口
一.前言在上一篇的文章中,主要是搭建了我们的开发环境,同时创建了我们的项目模板框架.在整个前后端分离的项目中,后端的 API 接口至关重要,它是前端与后端之间进行沟通的媒介,如何构建一个 “好用” ...
《HelloGitHub》第 35 期
<HelloGitHub>第 35 期兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程. ...
【转】javascript笔记之apply、call、bind用法
原文地址:https://www.cnblogs.com/coco1s/p/4833199.html apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数 ...

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

【设计模式+原型理解】第三章：javascript五种继承父类方式的更多相关文章

随机推荐

热门专题