JavaScript 各种继承

JavaScript 各种继承

原型链继承 function SuperClass(name) { this.name = name; } SuperClass.prototype.getName = function () { console.log(this.name); }; function SubClass(id) { this.id = id; } SubClass.prototype = new SuperClass(); SubClass.prototype.getID = function () { console.log(this.id); }; var sub = new SubClass(1); sub.getID(); // 1 console.log(SubClass.prototype.__proto__ === SuperClass.prototype); // true 构造函数继承 function SuperType(name) { this.name = name; } function SubType(name, age) { this.age = age; SuperType.call(this, name); } var sub = new SubType("小卡车", 20); console.log(sub); // SubType { age: 20, name: '小卡车' } console.log(sub.name); // 小卡车 console.log(sub.age); // 20 组合继承 function SuperType(name) { this.name = name; } SuperType.prototype.getName = function() { return this.name; } function SubType(name, age) { SuperType.call(this, name); this.age = age; } SubType.prototype = new SuperType(); SubType.prototype.getAge = function() { return this.age; } var sub = new SubType("小卡车", 20); console.log(sub); // SuperType { name: '小卡车', age: 20 } console.log(sub.getName()); // 小卡车 console.log(sub.getAge()); // 20 原型式继承 function object(o) { function F() {}; F.prototype = o; return new F(); } let person = { name: "小卡车", age: 20, hobby: ["听音乐"], }; var p = object(person); console.log(p.__proto__ === person); // true console.log(p.__proto__); // { name: '小卡车', age: 20, hobby: [ '听音乐' ] } console.log(p.name); // 小卡车 console.log(p.age); // 20 p.hobby.push("打LOL"); console.log(person.hobby); // [ '听音乐', '打LOL' ] p.name = "xkc"; console.log(p.name); // xkc var p1 = object(person); console.log(p1.name); // 小卡车 console.log(p1.__proto__); // { name: '小卡车', age: 20, hobby: [ '听音乐', '打LOL' ] } 寄生式继承 function object(o) { function F() {}; F.prototype = o; return new F(); } function createAnother(origin) { let clone = object(origin); clone.sayHi = function() { console.log("HI"); } clone.getName = function() { return this.name; } return clone; } let msg = { name: "小卡车", age: 20, }; let anotherMsg = createAnother(msg); anotherMsg.sayHi(); // HI let name = anotherMsg.getName(); console.log(name); // 小卡车 寄生式组合继承 function object(o) { function F() {} F.prototype = o; return new F(); } function inheritPrototype(SuperClass, SubClass) { let prototype = object(SuperClass.prototype); prototype.constructor = SubClass; SubClass.prototype = prototype; } function SuperClass(name) { this.name = name; } SuperClass.prototype.getName = function () { return this.name; }; function SubClass(name, age) { SuperClass.call(this, name); this.age = age; } inheritPrototype(SuperClass, SubClass); SubClass.prototype.getAge = function () { return this.age; }; let sub = new SubClass("小卡车", 20); console.log(sub.getName()); // 小卡车 console.log(sub.getAge()); // 20 类继承 class Vehicle { constructor(name) { this.name = name; } } class Bus extends Vehicle { constructor(name) { super(name); console.log(this); } } const bus = new Bus("小卡车"); // Bus { name: '小卡车' } console.log(bus.name); // 小卡车 console.log(bus instanceof Bus); // true console.log(bus instanceof Vehicle); // true console.log(bus.constructor === Bus); // true console.log(bus.__proto__ === Bus.prototype); // true console.log(bus.__proto__.constructor === Bus); // true console.log(Bus.prototype.__proto__ === Vehicle.prototype); // true