JavaScript继承实现综述

最近，我一直忙于前端工作，因为我做了更多的开发。net和php之前，前端开发喜欢在我带库的时候用。多次证明我不懂原理，甚至改不好代码，于是决定研究JavaScript的几个技术难点。

0x1。JavaScript的对象和构造函数

定义一个JavaScript对象可以定义如下

var a={x : 1，y : 2，add : function(){ return this . x this . y；}，mul : function(){ return this . x * this . y；}}这样，您定义了一个变量a，它有两个公共成员x和y，以及两个函数add和mul(公共方法)。然而，这种定义方法有两个缺点：

1.批量生成对象是不方便的，如果你var b=a；然后每次修改B的成员，就会同时改变A的成员，因为JavaScript引用机制

2.如果每次生成对象都需要自定义一些成员，那么应该写出相应的赋值操作，增加代码行数。

因此，在定义JavaScript对象之前，我们可以定义一个构造函数。

函数A(x，y){ this . x=x；this.y=ythis . add=function(){ return this . x this . y；} this . mul=function(){ return this . x * this . y；}}然后，定义一个对象

a=新A(1，2)；上面的代码看起来很简单，但是为了和C等面向对象语言区分开来，A并不是严格意义上的“类”的概念，因为JavaScript没有类，只是调用构造函数。

现在的问题是，如何才能实现传承？c清楚地实现了封装、继承和多态三个面向对象的特性。但是，对于JavaScript并没有严格的继承机制，而是用下面的方法来模拟。

0x2。JavaScript的原型

为了解释应用或调用函数，这里引入了原型。原型是功能所独有的。

要善用继承，首先要明白为什么要设计继承这个东西。无非就是“提取共性部分”，实现代码复用。

因此，在JavaScript中，公共部分也放在Function的原型中。

让我们比较两个继承和原型的例子

函数A(x，y){ this . x=x；this.y=ythis . add=function(){ return this . x this . y；} this . mul=function(){ return this . x * this . y；} }函数B(x，y){}B.prototype=new A(1，2)；控制台日志(新的B(3，4)。add())；//3在本例中，子类的原型指向a类对象

让我们实现另一个B继承A的例子：

函数A() {}A.prototype={x : 1，y : 2，添加：函数(){ return this . x this . y；}，mul : function(){ return this . x * this . y；} } A . prototype . constructor=A；函数B(){ } B . prototype=a . prototype；B .原型.构造器=B；b的原型对象是指A的原型对象。因为是引用，如果B的原型对象被修改，A的原型对象也会被修改，因为本质上它们都指向一个内存块。因此，每次更改B类型的原型时，都必须手动将构造函数改回来，以防止混淆。对比两个例子，前面的例子没有参考，所以不会出现这个问题。

创建一个b类型的对象。

B=新的B()；对象b具有类型a的所有成员。

console . log(b . add())；//3因为每个原型对象都有两个重要的成员：constructor和_proto_，而构造函数本质上是一个函数指针，所以B.prototype=A.prototype在执行后会覆盖构造函数，所以构造函数应该在后面重定向到b类型的构造函数。

0x3。JavaScript的构造函数绑定

定义了A类型的构造函数之后，再定义B类型的构造函数，然后在B类型的构造函数内部“嵌入并执行”A类型的构造函数。

函数A(x，y){ this . x=x；this.y=ythis . add=function(){ return this . x this . y；} this . mul=function(){ return this . x * this . y；} }函数B(x，y，z) {A.apply(this，arguments)；this.z=z}console.log(新的B(1，2，3))；apply函数与call函数基本相同，可以在类型构造函数内部执行类型构造函数。它还可以继承。

显示结果：

这里有一个公式：在B构造函数中写A.apply(this)，这样B构造的对象就可以拥有A构造函数中的所有成员。

说到申请和调用，还可以实现多重继承

function IA(){ this . walk=function(){ console . log(' walk ')；} } function IB(){ this . run=function(){ console . log(' run ')；} }函数Person(){ ia . apply(this)；IB.apply(此)；} var p=new Peer()；p . walk()；//walk p . run()；//运行以上就是本文的全部内容，希望大家能够喜欢