分分钟学会继承

这是我见到的几种js继承方法,如果有文章中没有提及的,希望可以分享共同学习

(一)原型链继承

function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function() {
console.log("parent name is " + this.name)
}
function Child(name) {
this.name = name
}
Child.prototype = new Parent('张三')
Child.prototype.constructor = Child
Child.prototype.getName = function() {
console.log('child name is ' + this.name)
}
var child = new Child('小张')
child.getName() // child name is 小张

只要是原型链中出现过的原型,都可以说是该原型链派生的实例的原型。
这种方法有个缺点:

  1. 子类型无法给超类型传递参数,在面向对象的继承中,我们总希望通过 var child = new Child('son', 'father'); 让子类去调用父类的构造器来完成继承。

(二) 类是继承

function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function() {
console.log("parent name is " + this.name)
}
Parent.prototype.do = function() {
console.log("doSomething")
}
function Child(name, parentName) {
Parent.call(this, parentName)
this.name = name
}
Child.prototype.getName = function() {
console.log('child name is ' + this.name)
}
var child = new Child('小张')
child.getName() // child name is 小张
child.do() // child.do is not a functio

相当于 Parent 这个函数在 Child 函数中执行了一遍,并且将所有与 this 绑定的变量都切换到了 Child 上,这样就克服了第一种方式带来的问题。
缺点:
1. Parent函数在Child中执行一遍, 并且不能复用一些共有的函数

(三)组合式继承, 一二两种方法的结合

function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function() {
console.log("parent name is " + this.name)
}
Parent.prototype.do = function() {
console.log("doSomething")
}
function Child(name, parentName) {
Parent.call(this, parentName)
this.name = name
}
Child.prototype.getName = function() {
console.log('child name is ' + this.name)
}
Child.prototype = new Parent();
Child.prototype.construtor = Child;
var child = new Child('小张')
child.getName() // child name is 小张
child.do() // doSomething

缺点:
Parent 需要调用两次

(四)寄生组合式继承

function Parent(name) {
this.name = name;
}
Parent.prototype.getName = function() {
console.log("parent name is " + this.name)
}
Parent.prototype.do = function() {
console.log("doSomething")
}
function Child(name, parentName) {
Parent.call(this, parentName)
this.name = name
}
function initPrototype(Parent, Child) {
Child.prototype = Object.create(Parent.prototype);
Child.prototype.construtor = Child;
}
initPrototype(Parent, Child);
Child.prototype.getName = function() {
console.log('child name is ' + this.name)
}
var child = new Child('小张', '张三')
child.getName() // child name is 小张
child.do() // doSomething

(五)ES6继承

class Parent {
constructor(name) {
this.name = name;
}
do() {
console.log('something');
}
getName() {
console.log('parent name is', this.name);
}
}
class Child extends Parent {
constructor(name, parentName) {
super(parentName);
this.name = name;
}
getName() {
console.log('child name is', this.name);
}
}
const child = new Child('小张', '张三');
child.getName(); // child name is 小张
child.do(); // something

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • (a fork of Airbnb's Javascript Style Guide) Strikingly ES...
    飘零_zyw阅读 4,929评论 1 2
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,418评论 2 17
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,618评论 1 10
  • 我基本從來不寫工作的事兒。 因為工作實在沒啥好寫的,不就是工作唄。 然後今天打算稍微寫一點,就寫JS吧。 我一直相...
    LostAbaddon阅读 5,339评论 22 21
  • 一个梦。我总爱记录自己各种奇怪的,但是却有印象的梦。 也许是因为睡觉也戴着耳机,所以,常常会因为歌入梦而梦到故事。...
    _akc_阅读 1,436评论 0 2

友情链接更多精彩内容