博客

ES5中的继承：

实例使用属性和方法

1.从实例对象本身查找属性或者方法

2.如果实例没有，从构造函数的原型对象中找

3.如果还没有，从父构造函数的原型对象中找

function Person(){}

Person.prototype={};

var p1=new Person();

p1.sayName=function(){};

p1.sayName(); //p1去调用sayName，自身有访问自身，自身没有访问构造函数原型对象，构造函数原型对象没有去找父构造函数

//1.经典继承
function Animal(type, age, weight, length) {
    this.type = type;
    this.age = age;
    this.weight = weight;
    this.length = length
}
Animal.prototype = {
    constructor: Animal,
    sayType: function () {
        console.log(this.type)
    }
}

function Dog(type, age, weight, length, name, color) {
    // 经典继承又称为构造函数继承
    Animal.call(this, type, age, weight, length);
    this.name = name;
    this.color = color;
}
处理完构造函数处理原型对象
//2.原型链继承
//子构造函数的原型指向父构造函数的原型对象
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.sayColor = function () {
    console.log(this.color)
}
var d1 = new Dog('狗', 1, '10kg', '40cm', '可乐', '白色');
console.log(d1);
d1.sayType();
d1.sayColor();

ES6中的继承：

用class通过extends关键字实现继承，子类可以没有构造函数，系统会默认分配。子类提供了构造函数则必须要显式调用super。super函数类似于借用构造函数。类似于Animal.call()

1.子类对象指向父类对象

2.子类原型对象继承父类原型对象

class Animal {
    // 静态属性
    static animalAttr = 'Animal的静态属性';
    constructor(name, age, weight) {
        this.name = name;
        this.age = age;
        this.weight = weight;
    }
    // 实例方法
    sayName() {
        console.log('实例方法')
    }

    // 静态方法
    static animalmethod() {
        console.log('Animal静态方法')
    }
}
// 要实现继承
class Dog extends Animal {
    constructor(name, age, weight, color) {
        super(name, age, weight);
        this.color = color;
        console.log('Dog的构造器')
    }
}
let dog = new Dog('豆豆', 1, 10, 'golden');
// 继承 子类的原型对象继承父类的原型对象
dog.sayName();
// 继承 子类的对象指向父类的对象
Dog.animalmethod();
console.log(Dog.animalAttr);

console.log(Dog.__proto__ === Animal);
console.log(Dog.prototype.__proto__ === Animal.prototype)