JS继承

一. 原型链继承方式

// 1.原型链继承方式(父类的实例当做子类的原型。如此子类的原型包含父类定义的实例属性,享有父类原型定义的的属性)
function SuperType() { // 父类
    this.type = 'Somthing Where'
}
SuperType.prototype.SayValue = function() {
    return this.type
}
function SubType () { // 子类
    this.name = 'Hello'
}
SubType.prototype = new SuperType() // 父类的实例当做子类的原型
SubType.prototype.getSayValue = function() {
    return this.name
}
var instance = new SubType() // 为什么能直接instance.name访问到,因为在这一步又new了一次,instance就继承了构造函数SubType的属性和方法
console.log(instance.name) // 备注(原型链继承的缺点就是'原型对象的引用属性都是被共享的,不能传递参数')

二. 借用构造函数方式

// 2.借用构造函数(通过在子类构造函数内部调用call()和apply()方法来实现继承)
function SuperType(name) { // 父类
    this.name = name
    this.color = ['red', 'yello', 'green']
    this.sayName = function() {
      return this.name
    }
}
function SubType() { // 子类(通过在子类构造函数中通过call方法,同时可以传递一些参数)
    SuperType.call(this, '李四')
    this.age = ' 23'
}
var instance = new SubType()
console.log(instance) // 备注(借用构造函数的缺点就是不能通过原型prototype来定义方法,这就造成了没法封装一个方法给所有人用,全部要写死在构造函数中,造成内存的浪费)

三. 组合式继承方式

// 组合继承(将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式)
function SuperType(name) { // 父类
    this.name = name
    this.color = ['red', 'yello', 'green']
}
SuperType.prototype.SayValue = function() {
    return this.name
}
function SubType() { // 子类(同样通过call的方式)
    SuperType.call(this, '李四')
    this.age = '23'
}
SubType.prototype = new SuperType() // 同样父类的实例当做子类的原型
SubType.prototype.constructor = SubType // 通过将子类原型的constructor指向子类的构造函数
SubType.prototype.getSubValue = function() {
    console.log(this.age)
}
var instance = new SubType()
console.log(instance.SayValue()) // 备注(组合继承注意要重新指向子类的构造函数这一步,其他的就是集二者之和,既可以通用处理方法也可以传递参数)
// 缺点是调用了两次父类构造函数SuperType.call(this)和new SuperType()

 

posted @ 2022-01-18 17:29  格里兹曼  阅读(39)  评论(0编辑  收藏  举报