JS面试题-JS实现继承的方法（共6种）

用户10106350

发布于 2022-10-28 13:10:57

6940

发布于 2022-10-28 13:10:57

文章被收录于专栏：WflynnWeb

方法一：借助call

function Parent (sex) {
    this.name = 'zxx'
    this.sex = sex
}
Parent.prototype.test = function () {
    console.log('我是函数')
}
Parent.prototype.why = 'not'
function Child (sex) {
    Parent.call(this, sex)
    this.age = 18
}
console.log(new Parent())
console.log(new Child())
console.log(new Child('女'))
console.log(new Child().name) // zxx
console.log(new Child().why) // undefined
console.log(new Child().test()) // test is not a function

这样写的时候子类虽然能够拿到父类的属性值，但是问题是父类原型的属性无法继承

方法二: 借助原型链

function Parent (sex) {
    this.name = 'zxx'
    this.sex = sex
}
Parent.prototype.test = function () {
    console.log('我是函数')
}
Parent.prototype.why = 'not'
function Child (sex) {
    this.age = 18
}
Child.prototype = new Parent()
console.log(new Parent())
console.log(new Child())
console.log(new Child('女'))
console.log(new Child().name) // zxx
console.log(new Child().why) // not
console.log(new Child().test()) // 我是函数

存在问题：

① 引用类型的属性被所有实例共享。 ② 在创建 Child 的实例时，不能向Parent传参

var c1 = new Child()
var c2 = new Child()
c2.character.push(999)
console.log(c1.character) // [1, 5, 9, 2, 999]
console.log(c2.character) // [1, 5, 9, 2, 999]

方法三：将前两种组合

function Parent () {
    this.name = 'zxx'
    this.character = [1, 5, 9, 2]
}
Parent.prototype.test = function () {
    console.log('我是函数')
}
Parent.prototype.why = 'not'
function Child () {
    Parent.call(this) // 注意这里的坑，在这里，我们又会调用了一次 Parent 构造函数。
    this.age = 18
}
Child.prototype = new Parent() // 父类的构造函数是被执行了两次的，第一次：Child.prototype = new Parent();第二次：实例化的时候会被执行;
var c1 = new Child() // 第二次调用父构造函数
var c2 = new Child()
c2.character.push(999)
console.log(c1.character) // [1, 5, 9, 2]
console.log(c2.character) // [1, 5, 9, 2, 999]

存在问题：会调用两次父构造函数。一次是设置子类型实例的原型的时候;一次在创建子类型实例的时候。

方法四：组合继承优化

function Parent () {
    this.name = 'zxx'
    this.character = [1, 5, 9, 2]
}
Parent.prototype.test = function () {
    console.log('我是函数')
}
Parent.prototype.why = 'not'
function Child () {
    Parent.call(this)
    this.age = 18
}
Child.prototype = Parent.prototype
var c1 = new Child()
var c2 = new Child()
console.log(c1)
console.log(c2)

这里让将父类原型对象直接给到子类，父类构造函数只执行一次，而且父类属性和方法均能访问，但是子类实例的构造函数是Parent，而不是Child，这也是不对的。

方法五(推荐使用): 组合继承的优化1（寄生组合式继承）

这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Child.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。

function Parent () {
    this.name = 'zxx'
    this.character = [1, 5, 9, 2]
}
Parent.prototype.test = function () {
    console.log('我是函数')
}
Parent.prototype.why = 'not'
function Child () {
    Parent.call(this)
    this.age = 18
}
Child.prototype = Object.create(Parent.prototype);
/*等价于
var F = function () {};
F.prototype = Parent.prototype;
Child.prototype = new F();
Object.create的底层实现
Object.create = function (o) {
    var F = function () {}
    F.prototype = o
    return new F()
}
*/
Child.prototype.constructor = Child;
var c1 = new Child()
console.log(c1)
console.log(c1 instanceof Child) // true；
console.log(c1 instanceof Parent) // true;
console.log(Child.prototype.isPrototypeOf(c1)); // true
console.log(Parent.prototype.isPrototypeOf(c1)); // true
console.log(c1.constructor.name); // Child,注意不加Child.prototype.constructor = Child;结果是Parent

方法六：ES6-Class继承

三个关键字：① class关键字。②extends关键字。③super关键字

class ZxxFn {
    // 类的构造方法
    constructor (name, age) {
        this.name = name
        this.age = age
    }
    showName () {
        console.log('调用父类的构造方法')
        console.log(this.name)
    }
}
class ZxxSubFn extends ZxxFn {
    constructor (name, age, salary) {
        super(name, age); // 调用父类的构造方法
        this.salary = salary
    }
    // 父类的方法重写
    showName () {
        console.log('调用子类的构造方法')
        console.log(this.name, this.salary)
    }
}
let zxx1 = new ZxxSubFn('zxx', 18, 88888888)
console.log(zxx1) // ZxxSubFn {name: "zxx", age: 18, salary: 88888888}
zxx1.showName() // zxx

1、子类构造函数中必须调用super方法，否则在新建对象时报错。

constructor(name, age,job) {
    // 报错
}

2、子类构造函数中必须在使用this前调用super,否则报错。

constructor (name, age, salary) {
    this.salary = salary
    super(name, age); // 报错
}

super调用属性:（有坑）

class ZxxFn {
    // 类的构造方法
    constructor (name, age) {
        this.name = name
        ZxxFn.prototype.age = age
    }
    showName () {
        console.log('调用父类的构造方法')
        console.log(this.name)
    }
}
class ZxxSubFn extends ZxxFn {
    constructor (name, age, salary) {
        super(name, age); // 调用父类的构造方法
        this.salary = salary
    }
    // 父类的方法重写
    showName () {
        console.log(super.name) // undefined
        // super.name报了undefined，表示没有定义。
        // super是指向父类的prototype对象，即Person.prototype，
        // 父类的方法是定义在父类的原型中，而属性是定义在父类对象上的，所以需要把属性定义在原型上。
        console.log(super.age) // 18
        console.log(this.name, this.salary) // zxx 88888888
    }
}
let zxx1 = new ZxxSubFn('zxx', 18, 88888888)
console.log(zxx1) // ZxxSubFn {name: "zxx", age: 18, salary: 88888888}
zxx1.showName()

this指向问题

class ZxxFn {
    // 类的构造方法
    constructor (name, age, sex) {
        this.name = name
        ZxxFn.prototype.age = age
        this.sex = '女'
    }
    showSex () {
        console.log(this.sex)
    }
}
class ZxxSubFn extends ZxxFn {
    constructor (name, age, sex) {
        super(name, age); // 调用父类的构造方法
        this.sex = sex
    }
    // 父类的方法重写
    showSex () {
        super.showSex()
    }
}
let zxx1 = new ZxxSubFn('zxx', 18, '男')
zxx1.showSex()
// 子类在调用父类构造函数时，父类的原型this值已经指向了子类，
// 即ZxxFn.prototype.call(this)，故输出的子类的值。

ES6的extends被编译后的JavaScript代码

ES6的代码最后都是要在浏览器上能够跑起来的，这中间就利用了babel这个编译工具，将ES6的代码编译成ES5让一些不支持新语法的浏览器也能运行。

核心是_inherits函数，可以看到它采用的依然也是第五种方式————寄生组合继承方式，同时证明了这种方式的成功。不过这里加了一个Object.setPrototypeOf(subClass, superClass)，是用来继承父类的静态方法。这也是原来的继承方式疏忽掉的地方。

function _inherits (subClass, superClass) {
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}