JS继承 笔记

在JavaScript中，继承是实现面向对象编程的重要概念之一。JS继承可以让我们在保留原有对象特性的同时，扩展和重用其功能，让代码更加高效和灵活。

继承的基本概念

在Javascript中，所有对象都有原型（prototype）属性，该属性指向另一个对象。当我们访问对象的一个属性或方法时，如果当前对象没有这个属性或方法，那么它会去查找这个对象的原型对象，如果还没有找到，就会沿着原型链一直往上查找，直到找到为止。

继承方式

在JavaScript中，JS继承可以通过以下几种方式实现：

1. 原型链继承

原型链继承是JS中最常用的继承方式之一。该方式实现的核心就是利用Object.create()方法来创建一个新对象，让这个新对象的原型指向父亲对象。这样，新对象就能访问到父亲对象上的属性和方法了。

// 父类
function SuperClass() {
  this.name = 'human';
}

// 子类
function SubClass() {
  this.age = 20;
}

// 原型链继承
SubClass.prototype = new SuperClass();

var obj = new SubClass();
console.log(obj.age); // 20
console.log(obj.name); // human

2. 构造函数继承

构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现继承的。由于子类是通过借用父类的构造函数来创建的，因此子类不能继承到父类原型上的方法。

// 父类
function SuperClass(name) {
  this.name = name;
  this.sayHello = function() {
    console.log('Hello ' + this.name);
  }
}

// 子类
function SubClass(name, age) {
  SuperClass.call(this, name);
  this.age = age;
}

var obj = new SubClass('John', 20);
console.log(obj.name); // John
console.log(obj.age); // 20
obj.sayHello(); // TypeError: obj.sayHello is not a function

3. 组合继承

组合继承是使用原型链和构造函数继承的混合继承方式，它的核心思想是通过借用构造函数来继承属性，通过将子类的原型设置为父类的实例来继承方法。这种方式实现了属性和方法的继承，但也存在一些问题：每次创建子类对象时都会调用一次父类的构造函数，导致一些不必要的开销。

// 父类
function SuperClass(name) {
  this.name = name;
}

SuperClass.prototype.sayHello = function() {
  console.log('Hello ' + this.name);
}

// 子类
function SubClass(name, age) {
  SuperClass.call(this, name);
  this.age = age;
}

SubClass.prototype = new SuperClass();
SubClass.prototype.constructor = SubClass;

var obj = new SubClass('John', 20);
console.log(obj.name); // John
console.log(obj.age); // 20
obj.sayHello(); // Hello John

示例介绍

示例1：原型链继承

// 父类
function Animal() {
  this.type = 'animal';
}

Animal.prototype.sayHello = function() {
  console.log('I am a ' + this.type);
}

// 子类
function Dog(name) {
  this.name = name;
}

// 原型链继承
Dog.prototype = new Animal();

var dog = new Dog('旺财');
dog.sayHello(); // I am a animal

在上面的代码中，创建了一个Animal类，其中定义了sayHello()方法；之后创建了Dog类，并将其原型设置为Animal类的实例，实现了在Dog类中继承Animal类中的sayHello()方法。最后，实例化Dog对象之后，就可以通过dog.sayHello()来访问到继承自Animal类中的sayHello()方法。

示例2：组合继承

// 父类
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello ' + this.name);
}

// 子类
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

var stu = new Student('John', 3);
stu.sayHello(); // Hello John

在上面的代码中，创建了一个Person类，并在其中定义了sayHello()方法；之后创建了Student类，并在其构造函数中借用了Person类的构造函数来实现了属性的继承，同时将其原型设置为Person类的实例，实现了方法的继承。最后，实例化Student对象之后，就可以通过stu.sayHello()来访问到继承自Person类中的sayHello()方法。