js中的new file_使用JS原型链优雅的实现类的继承

对于前端或者喜欢js的程序员来说，原型链是js学习过程中的一个比较难的且无法跳过的知识点。接下来我会根据我自己的理解来试着解释一下js当中的原型链，如有错误和不足的地方，恳请各位不吝赐教。

那么首先，js原型链是什么呢？

简单来说js的原型链主要是实现了面向对象中的继承。

那么什么是继承呢？

继承就是类实例可以访问类和父类的属性以及方法。

类？

类是一种抽象，它表明了一类对象共有的属性和方法。在js中类就是构造函数（目前js中的class仍然只是一个语法糖，但是个人还是比较喜欢js中通过构造函数和原型链实现继承的方式的）

用以下例子解释和说明

//类的实例访问类的属性或者方法

尝试写一个构造函数（类）,并定义构造函数的prototype原型对象

使用此构造函数生成一个实例，并尝试访问原型上的属性和方法

到这里我们已经知道如何定义一个类（构造函数）了，那么如何实现类的继承呢？我们开始写一个子类，并继承该构造函数（父类）。

如上我们就完成了继承，现在我们创建一个子类的实例，试着访问父类的属性和方法。

这样我们就完成了一个基本的类（构造函数）的定义，以及类的继承。

总结与扩展

其实在js中，继承主要分为三个部分：

1. prototype
2. 构造函数
3. 静态属性和方法

上面已经讲到了前面两点，还有第三点，继承父类的静态属性和方法。何谓静态属性与方法呢，在js中可以这么理解，即构造函数上的非prototype原型对象的属性和方法。因为在js中，构造函数跟普通函数没有区别，而所有的函数也是一个对象，所以可以和普通对象一样拥有自己的属性和方法。

举个例子，es5之前因为class语法糖还没有出现，为了便于语义上的理解。经常有以下写法：

那这个要怎么实现呢，以下是比较简单的实现方法：

那我们的子类Cat如何继承这个父类的create方法呢，如下：

但是这个简单的实现方式在继承父类的静态属性和方法的时候会出现问题，那就是子类从父类继承来的create方法，会返回父类的实例而不是子类的。

那我们怎么解决这个问题呢？我们都知道js中this只想的是调用该方法的对象。即改成如下写法即可：

这样就实现了前面说到的三点的全部继承方法。到这里已经算是很完整的继承实现方式了。那还有其他的问题不？当然还有，我们发现一些构造函数不需要使用new运算符：

但是当我也使用这种不需要使用new运算符的方式去创建实例的时候就会出现问题：

这是为什么呢？如果要弄懂这个为什么，那我们就需要知道new运算符到底做了什么。

1. 创建一个空对象。
2. 将此空对象的__proto__指向被运算构造函数的prototype原型对象
3. 将此对象付给构造函数的this（相当于以此对象调用构造函数）

好了现在我们明白了new运算符到底做了什么了，那我们该想想怎么不通过new运算符来创建实例了。方法如下：

这样我们就可以不用new来直接创建该类的实例了：

此前我还使用过另一种方式来检测是否通过new来创建实例，但是在继承之后子类会无法正常调用父类的构造函数：

到此，就是目前我所了解到的关于js原型链相关的一些知识，如有缺漏恳请各位读者不惜倾囊相告。文笔和措辞不当之处还请多多包涵。

尊重他人劳动成果，转载时请先获得授权。

本人邮箱地址：zzg19931223@gmail.com(技术交流或者工作机会请发送至此邮箱)