JavaScript – 继承 / 四六文摘

课程大纲

一、继承

1.继承和UML图

2.构造函数继承

3.原型链继承

4.混合继承

二、闭包

1.什么是闭包

2.闭包的原理

3.闭包的应用

继承和UML图

首先来看类的继承

1.父类和子类

2.方法重写

继承和UML我们简单来说一下：例如类名叫动物；动物这个类又分为猫类、狗类等；猫类、狗类等动物都有眼睛、鼻子、耳朵、嘴等这些属性。

构造函数和继承

我们回顾一下想要创建一个类Person，应该怎么创建：

在new Person过程中，我们回顾一下发生了哪些事情：

1.js解析器为我们创建了一个对象

2.将构造函数中的this指针指向了这个对象

3.执行构造函数内的代码

4.将构造函数返回

以上是我们的Person类

那现在我们创建一个student类

它比Person类要额外多一个id属性，也就是类似于学号

接着我们来创建一下：

但是现在的Person和Studen没有关系，我们没有将person代码重用，而是复制了一份下来，现在并不是继承，那我们怎么样能让student继承person的类呢？

想要继承person类，就要执行person构造函数，这样才能将name和age挂到对象上

但是，有一点需要注意，如果直接将相同部分删除，调用Person类，这时的this指针默认是指向window的

此时并不是我们想要的，name和age只是挂在了window上

我们想要的是name，age，sayHello挂在student对象上，在这里我们就要使用函数的两个方法：

apply 和 call 二者任选其一即可

我们如果通过某个方法调用Person，那么this就是指向这个方法前面的对象

两种方法的写法如下：

这样就实现了构造函数的继承

但是实际上这种构造函数的继承是有问题的

因为通常情况下，我们在创建对象时，不会把方法放到对象上；而是将方法放到原型上

我们将sayHello改为原型上，通过组合模式创建：

这时原型是用组合模式进行创建，但是继承仅仅继承了构造函数的内容，原型内的内容是完全没有涉及到的，这时我们就要想到如何去继承原型？

原型链的继承

在定义Person()函数之前，先要在它的原型上创建类，Person.prototype

然后添加一些属性，接着用new来创建这个类的对象

在new中，还是做了之前说过的那几件事：

1.创建了一个对象

2.将this指向了这个对象

3.执行构造函数

4.返回这个对象

此时运行结果为：

可以正常运行

首先说明你的p对象里面是有sayHello这个方法的，另外在sayHello中我们也成功的访问了它的name属性xiaoR，也就是说实际上在p上能访问到sayHello和name的，同理age也是存在的

为什么会这样呢？

我们看构造函数中完全是空的什么也没有，那为什么这个对象上会有name和sayHello呢？

这里来解释一下：

1.首先我们创建了一个function Person，在Person中有一个属性叫prototype，这个属性是我们每创建一个函数都会给我们分配的，这个prototype指向一个对象，这个对象实际上就是Person.prototype对象

2.接着我们在Person.prototype上添加了name，age，sayHello三个属性，实际上相当于在这个对象上添加了这3个属性，这就是我们创建Person构造函数所发生的事情

3.接着我们再回头来看一下，在new p时还发生了什么？还创建了一个_proto_属性，它指向了原型Person.prototype

4.我们在访问p的sayHello的时候实际上是访问p的某个属性，那么我们在访问p一个对象的属性时，它到底是怎么去找到它的值的呢？这就涉及到我们在访问属性的时候的一个规则：当访问一个对象属性的时候，首先在这个对象本身上进行查找，如果说能够在本身找到，就直接返回这个属性且停止查找；如果没找到，它会继续在原型上找，这个原型也就是_poto_指向的那个对象

5.我们通过这个解释再来看，现在我们在找P的sayHello时，在p对象本身是是没有的，既然p对象没有，那么就去_poto_指向的这个对象去找，即可找到p的name

即：返回的就是Person.prototype的属性