【设计模式+原型理解】第三章：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 ...
随机推荐
- bzoj3289 Mato的文件管理 莫队+树状数组
求逆序对个数,莫队套树状数组 #include<cstdio> #include<iostream> #include<cstring> #include<c ...
- BZOJ_1098_[POI2007]办公楼biu_链表优化BFS
BZOJ_1098_[POI2007]办公楼biu_链表优化BFS Description FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的 电话号 ...
- BZOJ_1826_[JSOI2010]缓存交换 _线段树+贪心
BZOJ_1826_[JSOI2010]缓存交换 _线段树+贪心 Description 在计算机中,CPU只能和高速缓存Cache直接交换数据.当所需的内存单元不在Cache中时,则需要从主存里把数 ...
- python环境下实现OrangePi Zero寄存器访问及GPIO控制
最近入手OrangePi Zero一块,程序上需要使用板子上自带的LED灯,在网上一查,不得不说OPi的支持跟树莓派无法相比.自己摸索了一下,实现简单的GPIO控制方法,作者的Zero安装的是Armb ...
- ssh框架整合笔记
1.建立普通的Javaweb项目,导入项目所必须的jar包. 2.配置web.xml文件. web.xml 3.在src下建立struts.xml. struts.xm 4.在实体包下配置 实体名 ...
- MIP 技术交流分享（3月15日）
3月15日下午,MIP 团队工程师与58赶集的 Web 前端工程师进行了一次面对面的技术交流. 在这次交流中,MIP 工程师主要分享了 MIP 技术原理,MIP 加速原理,以及 MIP 为开发者提供的 ...
- python中的shutil模块
目录 python中的shutil模块 目录和文件操作 归档操作 python中的shutil模块 shutil模块对文件和文件集合提供了许多高级操作,特别是提供了支持文件复制和删除的函数. 目录和文 ...
- Python-字符版gif图
一.背景 上一篇文章我们讲了怎么做自己的炫酷二维码,需要的移驾Python-炫酷二维码,本片文章我们讲述下怎么把一张图片处理成字符版图片,就是说使用字符替代每个像素的颜色,形成一个由字符组成的图片,并 ...
- 『片段』ShellHelper 控制台程序 的 程序调用（支持输入命令得到返回字符串输出）
背景: > 之前做 OGG 时,被 OGG的配置 恶心到了.(OGG是啥,这里就不解释了) > 总之就是一个 控制台程序,总是得手动执行一堆命令,每次都得输入 —— 实在是打字打累了. & ...
- 使用WebGL 自定义 3D 摄像头监控模型
前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...