js-day16 面向对象的继承

面向对象的继承

原型链继承

子类构造函数的原型对象 = 父类构造函数的实例化对象;

原型链查找:
    找自身
    自身没有 找自身的原型对象(父类构造函数的实例化对象)
    如果没有 找父类构造函数的原型对象
    找object
    如果没有 返回undefined  如果在哪一步找到了 直接返回结果
​
constructor:
    当前对象的构造函数
​
原型链继承: 
    1. 无法识别当前对象真正的构造函数
    2. 一改全改
    3. 不能传参
    4. 子类构造函数身上的原型对象的属性和方法不能继承

// 1. 父类构造函数
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.money = ['交通', '存款', '理财'];
}
​
Father.prototype.work = function () {
    console.log('工作有收入');
};
​
// 2. 子类构造函数
function Son(){}
​
Son.prototype.hobby = function () {
    console.log('打游戏');
};
​
// 3. 设置继承: 子类构造函数的原型对象 = 父类构造函数的实例化对象;
Son.prototype = new Father('韩红', 50);
​
​
// 4. 实例化对象
var son1 = new Son();
​
console.log(son1);
console.log(son1.name);
console.log(son1.name1);

对象冒充继承

在子类构造函数中 调用父类构造函数 将父类构造函数this指向当前的this

不能继承父类构造函数的原型对象上的方法和属性

// 1. 父类构造函数
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.money = ['交通', '存款', '理财'];
}
​
Father.prototype.work = function () {
    console.log('工作有收入');
};
​
// 2. 子类构造函数
function Son(name, age){
    // 3. 在子类构造函数中 调用父类构造函数 将父类构造函数this指向当前的this
    Father.call(this, name, age);
}
​
Son.prototype.hobby = function () {
    console.log('打游戏');
};
​
// 4. 实例化对象
var son1 = new Son('张三', 12);
var son2 = new Son('李四', 12);
console.log(son1, son2);
son1.money.push('股票');
console.log(son1.money, son2.money);
/* 
    不能继承父类构造函数的原型对象上的方法和属性
*/
console.log(son1.name1);

组合继承

组合继承: 原型链 + 对象冒充

\1. 子类构造函数的原型对象的方法和属性继承不了

\2. 父类构造函数的属性和方法多次继承

// 1. 父类构造函数
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.money = ['交通', '存款', '理财'];
}
​
Father.prototype.work = function () {
    console.log('工作有收入');
};
​
// 2. 子类构造函数
function Son(name, age){
    // 3. 在子类构造函数中 调用父类构造函数 将父类构造函数this指向当前的this
    Father.call(this, name, age);
}
​
Son.prototype.hobby = function () {
    console.log('打游戏');
};
​
// 3. 子类构造函数的原型对象 = 父类构造函数的实例化对象
Son.prototype = new Father();
​
// 4. 实例化对象
var son1 = new Son('张三', 12);
var son2 = new Son('李四', 12);
console.log(son1, son2);
son1.money.push('股票');
console.log(son1.money, son2.money);
/* 
    不能继承父类构造函数的原型对象上的方法和属性
*/
console.log(son1.name1);

寄生式组合继承

Object.create(原型对象): 使用原型对象创建一个对象

/* 
    组合继承: 原型链 + 对象冒充
        1. 子类构造函数的原型对象的方法和属性继承不了
        2. 父类构造函数的属性和方法多次继承
*/
// 1. 父类构造函数
function Father(name, age) {
    this.name = name;
    this.age = age;
    this.money = ['交通', '存款', '理财'];
}
​
Father.prototype.work = function () {
    console.log('工作有收入');
};
​
// 2. 子类构造函数
function Son(name, age){
    // 3. 在子类构造函数中 调用父类构造函数 将父类构造函数this指向当前的this
    Father.call(this, name, age);
}
​
// 3. 子类构造函数的原型对象 = 父类构造函数的实例化对象
// Object.create(原型对象): 使用原型对象创建一个对象
// console.log(Object.create(Father.prototype));
Son.prototype = Object.create(Father.prototype);
// 单独设置
Son.prototype.constructor = Son;
​
// 后续son的原型对象添加属性和方法
Son.prototype.hobby = function () {
    console.log('打游戏');
};
​
var son1 = new Son('张三', 12);
console.log(son1);

图示