js继承的几种方式，圣杯模式

继承，在面向对象的编程中用的还是非常多的，虽然面向对象因为其复杂的构建对象的初始化，在大多数的程序中并没用用到，但是我们使用过后才发现，这使得今后项目的扩展和维护更加容易。话不多说，进入正题。

1. 传统形式（原型链继承）

//父类
Father.prototype.name = "Li"
function Father() {this.age = 18
}
//子类
Son.prototype = new Father()
function Son() {}var son = new Son()

这种方法确实可以继承到name属性。son.name也确实是"Li"，我们输出son.age也可以得到18。

但是Son的构造函数中并没有age属性，该属性是Son.prototype中的。

缺点：并没有把父级的age属性继承到Son的构造函数中，而是放到了Son.prototype中，这并不是我们想要的

2. 借用构造函数继承

//父类
Father.prototype.name = "Li"
function Father() {this.age = 18
}
//子类
function Son() {Father.call(this)
}var son = new Son()

这种方法可以实现Son构造函数中有age属性

我们从图片中可以看出，虽然Son中是有了age属性，但是Son.prototype还是自己的原型，并没有继承自父类

缺点：1.不能继承借用构造函数的原型。2.每次用Son构造对象时，都会执行两个构造函数，造成资源浪费

3. 共享原型

//父类
Father.prototype.name = "Li"
function Father() {this.age = 18
}
//子类
function Son() {Father.call(this)
}Son.prototype = Father.prototype
var son = new Son()

这种写法看似没有问题，age被放到了Son构造函数中，父类原型上的name属性也继承来了

但是我们忽略了一点，不管是Son的prototype还是Father的prototype，他们都是一个对象，对象之间的赋值是地址的传递。所以当我们改变Father原型上的属性时，Son原型也会被修改。因为Son.prototype = Father.prototype这句话使他们指向了一个内存空间

缺点：原型之间改变相互影响

4. 圣杯模式

总结了上述方式缺点之后，慢慢的就演变成了现在在用的完美的继承方式，至于"圣杯模式"这个名字的由来，大家感兴趣的话还是自己查阅资料，"圣杯"简单来说就是"永恒"的意思，这里不做过多的讨论。

//父类
Father.prototype.name = "Li"
function Father() {this.age = 18
}
//子类
function Son() {Father.call(this)
}
//中间构造函数
function Temp() {}Temp.prototype = Father.prototype
Son.prototype = new Temp()
var son = new Son()

我们借用一个空的构造函数与Father共享原型，然后让Son的原型指向Temp的实例就可以完美解决以上问题。

解析：Temp.prototype = Father.prototype，使Temp.prototype和Father.prototype指向同一个内存空间，并不会影响Son.prototype。此时Son.prototype = new Temp()相当于Son.prototype__proto__ = Temp.prototype，也就是Son.prototype__proto__ = Father.prototype。从而实现了继承。

优化：

我们可以将它封装为一个方法，因为每次继承都会创建一个新的Temp中间函数，造成了资源浪费。优化代码如下

var inherit = (function () {var Temp = function() {}return function (Target, Origin) { //target继承自originTemp.prototype = Origin.prototypeTarget.prototype = new Temp()Target.prototype.constructor = Target //为了让Target原型的constructor指回TargetTarget.prototype.uber = Origin.prototype //找到自己的超类}
})()

由于es6有了Object.create()方法，可以改变函数的隐式原型(_proto_)，也可以不用中间函数

function inherit(Target, Origin) {Target.prototype = Object.create(Origin.prototype)Target.prototype.constructor = TargetTarget.prototype.uber = Origin.prototype
}

到此，就是继承的圣杯模式的最终写法了！

5.es6继承方式

class Father {constructor() {this.age = 18}
}
class Son extends Father {constructor() {super()}
}

js继承的几种方式，圣杯模式相关推荐

js 继承的几种方式
JS继承的实现方式: 既然要实现继承,那么首先我们得有一个父类,代码如下: function Animal(name) {// 属性this.name = name || '小白';// 实例方法th ...
学习js继承的6种方式
关于原型,原型链,构造函数和实例关系,可以参考上一篇文章地址:juejin.im/post/5cbfb3- js 实现继承的方式一:原型链继承 function Father(){this.name ...
JS 总结之原型继承的几种方式
在之前的总结中,我们详细分析了原型<JS 总结之原型>,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式. function Person (age) {this.age = ...
继承有几种方式，分别是什么，想要实现继承可以使用哪些方法
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [继承有几种方式 ...
可以实现继承的几种方式
继承的几种方式说起继承,又是一个老生常谈的问题了.今天来讲讲继承的几种方法以及他们的优缺点吧. 源码地址:点击这里一.原型链继承原型链继承:通过原型将一个引用类型继承另一个引用类型的属性和方法. ...
Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承第一种抽象继承,创建一个通用父类 ...
JavaScript系列-02 HTML嵌入js代码的第二种方式
javaScript系列 HTML中嵌入js代码的第二种方式脚本块的方式文章目录 javaScript系列前言一.了解脚本块的方式 1.1运行规则二.执行原理 1.编写代码 2.效果总结 ...
在HTML 中嵌入 JS 代码的三种方式
一,在HTML中嵌入JS代码的第一种方式:行间事件行间事件是指将JavaScript函数写到HTML元素中的执行事件. 1.JavaScript 是一种事件驱动型的编程语言,通常都是在发生某个事件的 ...
JavaScript——关于JavaScript、在HTML中嵌入JS代码的三种方式、变量
文章目录 JavaScript 01 关于JavaScript 1.1 JS的发展历史 1.2 JS的特性 1.3 JS的组成 1.4 JSP和JS的区别 02 在HTML中嵌入JS代码的三种方式 2 ...
HTML嵌入JS代码的三种方式
目录一.HTML嵌入JS代码的第一种方式:直接加一个事件句柄跟表达式二.HTML嵌入JS代码的第二种方式:脚本块三.HTML嵌入JS代码的第三种方式:外部引入js文件一.HTML嵌入JS代码的 ...

js继承的几种方式，圣杯模式

js继承的几种方式，圣杯模式相关推荐

最新文章

热门文章