JavaScript常见的六种继承方式

/**

// --------------------------------------------------------------
// --------------------------------------------------------------
// 方式一、原型链继承----------------------------------------------
// --------------------------------------------------------------
// --------------------------------------------------------------
// ---特点:
// 父类新增原型方法/原型属性,子类都能访问到
// 简单,易于实现
// ---缺点:
// 无法实现多继承
// 来自原型对象的所有属性被所有实例共享
// 创建子类实例时,无法向父类构造函数传参
// 要想为子类新增属性和方法,必须要在Student.prototype = new Person() 之后执行,不能放到构造器中

()=>{
    function Person(name, age) {
        this.name = name,
        this.age = age,
        this.play = [1, 2, 3]
        this.setName = function () { }
    }
    Person.prototype.setAge = function () { }
    //子类型
    function Student(price) {
        this.price = price
        this.setScore = function () { }
    }
    Student.prototype = new Person() // 子类型的原型为父类型的一个实例对象
    var s1 = new Student(15000)
    var s2 = new Student(14000)
    console.log(s1,s2)
}

// --------------------------------------------------------------
// --------------------------------------------------------------
// 方式二: 借用构造函数继承----------------------------------------
// --------------------------------------------------------------
// --------------------------------------------------------------
// ---特点:
// 解决了原型链继承中子类实例共享父类引用属性的问题
// 创建子类实例时,可以向父类传递参数
// 可以实现多继承(call多个父类对象)
// ---缺点:
// 实例并不是父类的实例,只是子类的实例
// 只能继承父类的实例属性和方法,不能继承原型属性和方法
// 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

()=>{
    function Person(name, age) {
        this.name = name,
        this.age = age,
        this.setName = function () {}
    }
    Person.prototype.setAge = function () {}
    function Student(name, age, price) {
        Person.call(this, name, age)  // 相当于: this.Person(name, age)
        /*this.name = name
        this.age = age*/
        this.price = price
    }
    var s1 = new Student('Tom', 20, 15000)
}

// --------------------------------------------------------------
// --------------------------------------------------------------
// 方式三: 原型链+借用构造函数的组合继承----------------------------
// --------------------------------------------------------------
// --------------------------------------------------------------
// ---优点:
// 可以继承实例属性/方法,也可以继承原型属性/方法
// 不存在引用属性共享问题
// 可传参
// 函数可复用
// ----缺点:
// 调用了两次父类构造函数,生成了两份实例

()=>{
    function Person(name, age) {
        this.name = name,
        this.age = age,
        this.setAge = function () { }
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    function Student(name, age, price) {
        Person.call(this,name,age)
        this.price = price
        this.setScore = function () { }
    }
    Student.prototype = new Person()
    Student.prototype.constructor = Student//组合继承也是需要修复构造函数指向的
    Student.prototype.sayHello = function () { }
    var s1 = new Student('Tom', 20, 15000)
    var s2 = new Student('Jack', 22, 14000)
    console.log(s1)
    console.log(s1.constructor) //Student
}

// --------------------------------------------------------------
// --------------------------------------------------------------
// 方式四: 组合继承优化1-------------------------------------------
// --------------------------------------------------------------
// --------------------------------------------------------------
// ---优点:
// 不会初始化两次实例方法/属性,避免的组合继承的缺点
// ---缺点:
// 没办法辨别是实例是子类还是父类创造的,子类和父类的构造函数指向是同一个。

()=>{
    function Person(name, age) {
        this.name = name,
            this.age = age,
            this.setAge = function () { }
    }
    Person.prototype.setAge = function () {
        console.log("111")
    }
    function Student(name, age, price) {
        Person.call(this, name, age)
        this.price = price
        this.setScore = function () { }
    }
    Student.prototype = Person.prototype
    Student.prototype.sayHello = function () { }
    var s1 = new Student('Tom', 20, 15000)
    console.log(s1)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容