完美清晰掌握ES5构造函数实现类的继承

ES5中的类

es5中的类

function Person() {
    this.name = '张三';
    this.age = 12;
}

var p = new Person();

console.log(p.name)

构造函数和原型链里面增加方法

function Person() {
    this.name = '李四';
    this.age = 23;
    this.run = function() {
        console.log(`${this.name}运动了~`)
        // console.log(this)
    }
}

// 在原型链上扩展属性和方法（原型链上的属性会被多个实例共享，构造函数不会）
Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}

var p = new Person();

p.run();
p.work()

类的静态方法

function Person() {}

Person.love = function() {
    console.log('我是类的静态方法，通过实例访问的是类的实例方法，通过类名直接访问的是类的静态方法。');
}

Person.love();

类的继承原型链和对象冒充，用的最多的是两者组合继承模式

（对象冒充） 
function Person() {
    this.name = '李四';
    this.age = 23;
    this.run = function() {
        console.log(`${this.name}运动了~`)
    }
}

Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}

function Animal() {
    Person.call(this); // 对象冒充实现继承
}

let a = new Animal();

a.run(); // 对象冒充可以继承构造函数里面的属性和方法
a.work(); // error报错； 对象冒充可以继承构造函数里面的属性和方法，但是没法继承原型链上的属性和方法

类的继承（原型链）

function Person() {
    this.name = '李四';
    this.age = 23;
    this.run = function() {
        console.log(`${this.name}运动了~`)
    }
}

Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}

function Animal() {}

Animal.prototype = new Person(); // 原型链继承 可以继承构造函数里面的属性和方法，也可以继承原型链上的属性和方法

let a = new Animal();

a.run();
a.work();

原型链继承的问题

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(`${this.name}运动了~`)
    }
}

Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}


var p = new Person('李四', 29);

p.run();

function Animal(name, age) {

}

// 使用原型链继承
Animal.prototype = new Person();

var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参

a.run(); // undefined运动了~

原型链和对象冒充组合继承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(`${this.name}运动了~`)
    }
}

Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}


var p = new Person('李四', 29);

p.run();

function Animal(name, age) {
    Person.call(this, name , age); // 对象冒充继承，实例化子类可以给父类传参
}

// 使用原型链继承
Animal.prototype = new Person();

var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参，但是同时也使用了对象冒充的方式就可以给父类传参

a.run(); // 赵武运动了~
a.work();

对象冒充+原型链组合继承的另一种写法

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(`${this.name}运动了~`)
    }
}

Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`性别：${this.sex}`)
}


var p = new Person('李四', 29);

p.run();

function Animal(name, age) {
    Person.call(this, name , age); // 对象冒充继承，可以继承父类构造函数中的属性和方法，且实例化子类可以给父类传参
}

// 使用原型链继承
// Animal.prototype = new Person();
Animal.prototype = Person.prototype; // 因为对象冒充继承了构造函数中的属性和方法且可以传参，所以通过原型链的方式继承原型上的属性和方法即可。

var a = new Animal('赵武', 23); // 通过原型链继承实例化的时候没法给子类传参，但是同时也使用了对象冒充的方式就可以给父类传参

a.run(); // 赵武运动了~
a.work();

总结

function Animal(name, age) {Person.call(this, name , age);} 对象冒充的方式实现继承可以继承父类构造函数中的属性和方法，但是不能继承原型链上的属性和方法。且这种式可以给父类传参。
Animal.prototype = new Person();原型链的方式实现继承实例可以访问父类构造函数中的属性和方法，也可以访问原型链中的属性和方法，但是不能给父类传参。
所以两者组合使用，就可以实现既能访问构造函数中的属性和方法，也能继承原型链上的属性和方法，同时也能给父类传参。

来源：CSDN

作者：yw00yw

链接：https://blog.csdn.net/yw00yw/article/details/103984448

标签

构造函数

es5

李四

animal