[上海|结业弟子]JS-温奇|2020年01月02日的日报-技能树.IT修真院

发表于： 2020-01-02 20:31:27

1 1125

今天完成的事：

深度剖析原型链是什么，有什么用处？

深度学习递归和使用

js实现继承常用方式

明天计划的事：

完成前台页面

遇到的问题:

暂无

收获：

深度剖析原型链是什么，有什么用处？

JavaScript本身不提供类实现。 (在ES2015/ES6中引入了class关键字，但是只是语法糖，JavaScript 仍然是基于原型的)。通过原型这种机制，JavaScript 中的对象从其他对象继承功能特性。

当谈到继承时，Javascript 只有一种结构：对象。每个对象都有一个内部链接到另一个对象，称为它的原型 prototype。该原型对象有自己的原型，等等，直到达到一个以null为原型的对象。根据定义，null没有原型，并且作为这个原型链prototype chain中的最终链接。那么原型链如何工作? prototype 属性如何向已有的构造器添加方法?

————————————————

ECMAScript中原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。基本的实现是利用构造函数，原型和实例的关系。即是每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针[[prototype]].由于构造函数，原型和实例存在这样的关系，如果我们让一个原型对象等于另一个构造函数的实例，那么此时这个原型对象将包含一个指向另一个原型对象的指针，这样的话，另一个原型原型中也包含着指向另一个构造函数的指针。如果另一个原型又是另一个类型的实例，那么上面的关系还是会成立。这样层层递进，就够成了实例与原型的链条，这就是所谓的原型链的基本概念。

原型链

每个构造函数都有原型对象，每个构造函数实例都包含一个指向原型对象的内部指针（proto），如果我们让第一个构造函数的原型对象等于第二个构造函数的实例，结果第一个构造函数的原型对象将包含一个指向第二个原型对象的指针，再然第三个原型对象等于第一个构造函数的实例，这样第三个原型对象也将包含指向第一个原型对象的指针，以此类推，就够成了实例于原型的链条，这就是原型链的基本概念

什么是原型继承：原型链的基本实现就是将一个构造函数的实例赋值给另一个构造函数的原型。这样，这个函数的实例就会继承那构造函数的属性和方法。

构造函数

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象。即为对象变量赋初始值。每个构造函数的实例都将共享构造函数的初始值。构造函数的出现是为了解决使用Object构造函数和字面量表示法不方便创建大量重复对象的问题。

原型模式

使用构造函数的问题是，每个方法都要在每个实例上重新创建一遍，即在构造函数的不同实例上的同名函数是不相等的。而我们创建每个构造函数都有一个prototype(原型)属性，这个属性是个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法，我们使用这个原型对象来共享实例的属性和方法的模式就叫原型模式

在对象实例中，访问对象原型的方法

1、使用proto属性
此属性是浏览器支持的一个属性，并不是ECMAScript里的属性
2.Object.getPrototypeOf
3.使用constructor.prototype的方法
对于不支持proto的浏览器，可以使用constructor，访问到对象的构造函数，在用prototype访问到原型

在构造函数中，访问对象原型的方法

1.使用prototype属性

递归的概念

在程序中函数直接或间接调用自己

直接调用自己
简介调用自己

跳出结构,有了跳出才有结果

递归的思想

递归的调用,最终还是要转换为自己这个函数

如果有个函数foo,如果他是递归函数,到最后问题还是转换为函数foo的形式
递归的思想就是将一个未知问题转换为一个已解决的问题来实现

function foo(){
...foo(...)...
}

递归的步骤(技巧)

1. 假设递归函数已经写好

2. 寻找递推关系

3. 将递推关系的结构转换为递归体

4. 将临界条件加入到递归体中

JavaScript常用继承方案

继承分类

先来个整体印象。如图所示，JS中继承可以按照是否使用object函数（在下文中会提到），将继承分成两部分（Object.create是ES5新增的方法，用来规范化这个函数）。

其中，原型链继承和原型式继承有一样的优缺点，构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create, 同时优化了组合继承，成为了完美的继承方式。ES6 Class Extends的结果与寄生组合继承基本一致，但是实现方案又略有不同。

1、原型链继承

构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。

继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。

原型链方案存在的缺点：多个实例对引用类型的操作会被篡改。

2、借用构造函数继承

使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类（不使用原型）

核心代码是SuperType.call(this)，创建子类实例时调用SuperType构造函数，于是SubType的每个实例都会将SuperType中的属性复制一份。

缺点：

只能继承父类的实例属性和方法，不能继承原型属性/方法
无法实现复用，每个子类都有父类实例函数的副本，影响性能

3、组合继承

组合上述两种方法就是组合继承。用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

缺点：

第一次调用SuperType()：给SubType.prototype写入两个属性name，color。
第二次调用SuperType()：给instance1写入两个属性name，color。

实例对象instance1上的两个属性就屏蔽了其原型对象SubType.prototype的两个同名属性。所以，组合模式的缺点就是在使用子类创建实例对象时，其原型中会存在两份相同的属性/方法。

4、原型式继承

利用一个空对象作为中介，将某个对象直接赋值给空对象构造函数的原型。

object()对传入其中的对象执行了一次浅复制，将构造函数F的原型直接指向传入的对象。

缺点：

原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
无法传递参数

另外，ES5中存在Object.create()的方法，能够代替上面的object方法。

5、寄生式继承

核心：在原型式继承的基础上，增强对象，返回构造函数

函数的主要作用是为构造函数新增属性和方法，以增强函数

缺点（同原型式继承）：

原型链继承多个实例的引用类型属性指向相同，存在篡改的可能。
无法传递参数

6、寄生组合式继承

结合借用构造函数传递参数和寄生模式实现继承

这个例子的高效率体现在它只调用了一次SuperType 构造函数，并且因此避免了在SubType.prototype 上创建不必要的、多余的属性。于此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和isPrototypeOf()

这是最成熟的方法，也是现在库实现的方法

7、混入方式继承多个对象

Object.assign会把 OtherSuperClass原型上的函数拷贝到 MyClass原型上，使 MyClass 的所有实例都可用 OtherSuperClass 的方法。

8、ES6类继承extends

extends关键字主要用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。其中constructor表示构造函数，一个类中只能有一个构造函数，有多个会报出SyntaxError错误,如果没有显式指定构造方法，则会添加默认的 constructor方法，使用例子如下。

1、函数声明和类声明的区别

函数声明会提升，类声明不会。首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError。

2、ES5继承和ES6继承的区别

ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.call(this)）.
ES6的继承有所不同，实质上是先创建父类的实例对象this，然后再用子类的构造函数修改this。因为子类没有自己的this对象，所以必须先调用父类的super()方法，否则新建实例报错。