【设计模式+原型理解】第三章：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 ...
随机推荐
- [Usaco2007 Open]Fliptile 翻格子游戏 状压dp
n,m<=15,直接搞肯定不行,考虑一行一行来, 每一行的状态只与三行有关,所以从第一行开始枚举,每一次让下面一行填上他上面那行的坑 最后一行必须要同时满足他自己和他上面那行,否则舍去 #inc ...
- BZOJ_2073_[POI2004]PRZ_状压DP
BZOJ_2073_[POI2004]PRZ_状压DP 题意: 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上 ...
- Python&Appium实现滑动引导页进入APP
最近在研究安卓APP的自动化测试.首先遇到的问题是,当一个session建立的时候,最先进入的是欢迎页和引导页,引导页有三张,最后一张上显示"enter"按钮,点击才能进入主界面. ...
- 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境
技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...
- java一个大接口拆用多线程方式拆分成多个小接口
问题引入 目的:我们的接口A 分别调用了a1 a2 a3 三个接口,最终返回值是 a1的返回值+a2的返回值+a3的返回值 如果同步执行 a1 a2 a3 然后结果相加 很慢 . 如果异步执行 无法 ...
- 【.NET异步编程系列1】：await&async语法糖让异步编程如鱼得水
前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...
- Keepalived部署与配置详解
Keepalive详解 工作原理 Keepalived本质就是为ipvs服务的,它也不需要共享存储.IPVS其实就是一些规则,Keepalived主要的任务就是去调用ipvsadm命令,来生成规则,并 ...
- WebGL three.js学习笔记 自定义顶点建立几何体
自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...
- VBC#代码互转工具
VBCSHARP代码互转工具,适用于VB.NET和C#代码相互转换翻译,可代码段转换和批量文件转换.于2019年3月5日制作完成,允许各群随意分发和使用. 下载地址:下载链接 欢迎使用 下载地址:下载 ...
- Python 中@property的用法
在绑定属性时,如果我们直接把属性赋值给对象,比如: p = Person() p.name= 'Mary' 我们先看个详细的例子(注意双下划线name和age定义为私有变量): class Perso ...