js的6种继承

继承

1，借用构造函数继承

优点

  • 使用call或者apply改变this指向

缺点

  • 所有实例都拥有父类属性和方法的副本，浪费空间
  • 无法继承父类原型上的方法
function Parent(name) {
    this.name = name
    this.like = {
        type: 'big',
    }
    this.eat = function() {
        console.log(this.name + 'eat')
    }
}
Parent.prototype.height = '170'

function Child(age, name) {
    this.age = age
    Parent.call(this, name)
}

var p1 = new Child(20, 'p1')
var p2 = new Child(30, 'p2')
// 实例,p1 p2拥有相同的属性和方法，修改其中一个实例的属性，不会影响到另一个
console.log(p1)
console.log(p2)

// 拥有属性和方法的副本，互不影响
p1.name = '哈哈'
p1.like.type = 'small'
console.log(p1.name, p2.name) //哈哈 p2
console.log(p1.like, p2.like) //small big 即使是引用类型，也互不影响

// 无法继承父类原型上的属性
console.log(p1.height) //undefined

2，原型链继承

优点

可以共享原型上的方法，不用每个实例都创建相同的方法

缺点

  • 实例化时，无法向父类构造函数传递参数
  • 某个实例修改了原型上引用类型数据，所有实例都受影响
function Parent(name) {
    this.name = name
    this.like = {
        type: 'big',
    }
    this.eat = function() {
        console.log(this.name + 'eat')
    }
}
Parent.prototype.height = '170'

function Child(age, name) {
    this.age = age
}

Child.prototype = new Parent()
Child.prototype.constructor = Child //修正构造函数

// 初始化实例时，无法向父类构造函数传递参数
var p1 = new Child('p1')
var p2 = new Child('p2')

console.log(p1, p2) //Child { age: 'p1' } Child { age: 'p2' }
console.log(p1.name, p2.name) //undefined undefined

p1.name = 'p1'
console.log(p1.name, p2.name) //p1 parent

// 其中一个实例修改了父类实例属性上引用类型的数据，则所有实例都受影响
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'small' }

// 可以继承父类原型上的属性
console.log(p1.height) //170

3，组合式继承

结合构造函数和原型链结合

优点

  • 拥有父类实例属性和方法的副本
  • 可以共享父类原型上的属性和方法

缺点

  • 调用了2次父类构造函数，导致子类prototype上和实例上有两份相同的属性和方法
    即Child.prototype中和p1上有属性相同
function Parent(name) {
    this.name = name
    this.like = {
        type: 'big',
    }
    this.eat = function() {
        console.log(this.name + 'eat')
    }
}
Parent.prototype.height = '170'
Parent.prototype.obj = {
    weight: '200',
}

function Child(age, name) {
    this.age = age
    Parent.call(this, name)
}

Child.prototype = new Parent('parent')
Child.prototype.constructor = Child //修正构造函数

var p1 = new Child('p1')
var p2 = new Child('p2')

console.log(p1, p2)
console.log(p1.name, p2.name) //parent parent

// 相当于给实例p1添加了一个name属性
p1.name = 'p1'
console.log(p1.name, p2.name) //p1 undefined

// 拥有父类实例属性和方法的副本，修改实例的属性不会影响到其他实例
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'big' }

// 实例共享父类原型上的方法，若是引用类型，则都受影响
p1.obj.weight = '220'
p1.height = '180'
console.log(p1.height, p2.height) //180 170
console.log(p1.obj, p2.obj) //{ weight: '220' } { weight: '220' }

4，原型式继承

function create(obj) {
    function F() {}
    F.prototype = obj
    return new F()
}

var obj = {
    name: 'good',
    likes: ['a', 'b', 'c'],
}

var p1 = create(obj)
// 修改其中一个实例引用类型属性，则影响其他实例
p1.name = 'p1'
p1.likes.push('d')
var p2 = create(obj)
console.log(p1.name, p2.name) //p1 good
console.log(p1.likes, p2.likes) //[ 'a', 'b', 'c', 'd' ] [ 'a', 'b', 'c', 'd' ]

5，寄生式继承

// 返回一个对象，扩展该对象的属性和方法，会被每个实例复制
// 传入的obj会成为实例__proto__上的属性和方法
function create(obj) {
    var clone = Object.create(obj)
    clone.name = 'good'
    clone.likes = ['a', 'b', 'c']
    return clone
}

var person = {
    age: 20,
    eats: ['apple', 'banana'],
}

var p1 = create(person)
p1.age = 30
p1.likes.push('d')
p1.eats.push('hhh')
console.log(p1.age, p1.likes) //30 [ 'a', 'b', 'c', 'd' ]
console.log(p1.eats) //[ 'apple', 'banana', 'hhh' ]

var p2 = create(person)
console.log(p2.age, p2.likes) //20 [ 'a', 'b', 'c' ]
console.log(p2.eats) //[ 'apple', 'banana', 'hhh' ]

6，寄生组合式继承

在组合式继承继承上优化，因为组合式继承会调用2次父类构造函数，使用寄生式，可以继承父类原型上的方法

function Parent(name) {
    this.name = name
    this.like = {
        type: 'big',
    }
    this.eat = function() {
        console.log(this.name + 'eat')
    }
}
Parent.prototype.height = '170'
Parent.prototype.obj = {
    weight: '200',
}

function Child(age, name) {
    this.age = age
    Parent.call(this, name)
}
// 这里为什么不 `Child.prototype=Parent.prototype`呢，
//因为这样会导致子类原型和父类原型指向同一内存地址
// 给子类自身添加原型属性和方法时，变成给父类原型添加属性和方法，所以需要将子类的原型指向父类的实例。
//使用寄生方 法，在内部将fn的原型指向父类原型，然后返回fn的实例，再让Child的原型指向该实例
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

var p1 = new Child()
var p2 = new Child()

console.log(p1.__proto__ === Child.prototype) //true
console.log(Child.prototype.__proto__ === Parent.prototype) //true
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,492评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,048评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,927评论 0赞 358
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,293评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,309评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,024评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,638评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,546评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,073评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,998评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,678评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2赞 358