【设计模式+原型理解】第三章：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 ...
随机推荐
- BZOJ_4378_[POI2015]Logistyka_树状数组
BZOJ_4378_[POI2015]Logistyka_树状数组 Description 维护一个长度为n的序列,一开始都是0,支持以下两种操作: 1.U k a 将序列中第k个数修改为a. 2.Z ...
- modbus学习笔记——帧
几个需要先搞懂的概念 1.modbus的数据类型 modbus定义了四种数据类型,这四种数据类型分别叫"离散量输入""线圈""输入寄存器"& ...
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- 初探机器学习之使用百度AI服务实现图片识别与相似图片
一.百度云AI服务 最近在调研一些云服务平台的AI(人工智能)服务,了解了一下阿里云.腾讯云和百度云.其中,百度云提供了图像识别及图像搜索,而且还细分地提供了相似图片这项服务,比较符合我的需求,且百度 ...
- SpringBoot框架与MyBatis集成，连接Mysql数据库
SpringBoot是一种用来简化新Spring应用初始搭建及开发过程的框架,它使用特定方式来进行配置,使得开发人员不再需要定义样板化的配置.MyBatis是一个支持普通SQL查询.存储和高级映射的持 ...
- React + TypeScript：元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- 【Python3爬虫】最新的模拟登录新浪微博教程
一.写在前面 首先呢,由于之前重装系统,又要重新配置环境,然后还有一些别的事,导致我一直没有写爬虫了,不过现在又可以继续写了. 然后我这次说的模拟登录新浪微博呢,不是使用Selenium模拟浏览器操作 ...
- 马蜂窝搜索基于 Golang 并发代理的一次架构升级
搜索业务是马蜂窝流量分发的重要入口.很多用户在使用马蜂窝时,都会有目的性地主动搜索与自己旅行需求相关的各种信息,衣食住行,事无巨细,从而做出最符合需求的旅行决策. 因此在马蜂窝,搜索业务交互的下游模块 ...
- java基础(七)-----深入剖析Java中的装箱和拆箱
本文主要介绍Java中的自动拆箱与自动装箱的有关知识. 基本数据类型 基本类型,或者叫做内置类型,是Java中不同于类(Class)的特殊类型.它们是我们编程中使用最频繁的类型. Java是一种强类型 ...
- 高淇java300集异常机制作业
1.以下关于异常的代码的执行结果是(C ).(选择一项) 1 2 3 4 5 6 7 8 9 10 11 12 public class Test { public static void m ...