JavaScript原型链及常见的继承方法

什么是原型链

在JavaScript中，每个对象都有一个原型对象，原型对象又有自己的原型对象，形成了一条链，我们称之为原型链。在这条链上，如果查找某个属性或方法（即某个属性或方法不存在于当前对象上），则会一直向上查找直到找到该属性或方法或查找到原型链的顶层，如果还没有找到，则返回undefined。

常见的继承方法

在JavaScript中，有很多种实现继承的方法，下面就来介绍几种常见的继承方法。

1. 原型链继承

原型链继承是最基本的继承方式之一，它的实现思路是将子类的原型对象指向父类的实例对象。

function Parent() {
  this.name = 'parent';
}
Parent.prototype.sayHello = function () {
  console.log('hello');
};

function Child() {
  this.age = 18;
}
Child.prototype = new Parent();

var child = new Child();
console.log(child.name); // parent
child.sayHello(); // hello

上面的代码中，我们创建了一个父类Parent和一个子类Child。在子类的构造函数中，我们没有初始化父类的属性和方法，而是将子类的原型对象指向了父类的实例（Child.prototype = new Parent()）。这样子类就可以获得父类的属性和方法了。

缺点：

• 原型对象会被所有子类实例共享，一个实例修改原型对象，会影响到所有实例
• 无法向父类构造函数传递参数

2. 构造函数继承

构造函数继承是通过在子类的构造函数中调用父类的构造函数来实现的。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function () {
  console.log('hello');
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

var child = new Child('child', 18);
console.log(child.name); // child
child.sayHello(); // TypeError: child.sayHello is not a function

上面的代码中，我们创建了一个父类Parent和一个子类Child。在子类的构造函数中，我们调用了父类的构造函数，并传递子类的属性。由于我们只是调用了父类构造函数，没有使用父类原型对象，所以子类无法像原型链继承时一样访问父类的原型方法。

缺点：

• 父类原型中的属性和方法无法被子类继承
• 父类的构造函数会被多次调用

3. 组合继承（原型链继承 + 构造函数继承）

组合继承是在原型链继承和构造函数继承的基础上，将二者结合起来。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayHello = function () {
  console.log('hello');
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child('child', 18);
console.log(child.name); // child
child.sayHello(); // hello

上面的代码中，我们创建了一个父类Parent和一个子类Child。在子类的构造函数中，我们调用了父类的构造函数，并传递子类的属性。在子类的原型对象上，我们使用了父类的实例，这样子类就能够获得父类的所有属性和方法了。

缺点：

• 父类的构造函数会被多次调用

示例说明

1. 深度克隆对象

function deepClone(obj) {
  var result = Array.isArray(obj) ? [] : {};
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var value = obj[key];
      if (typeof value === 'object' && value !== null) {
        result[key] = deepClone(value);
      } else {
        result[key] = value;
      }
    }
  }
  return result;
}

var obj1 = {a:1,b:{c:2}};
var obj2 = deepClone(obj1);
console.log(obj1 === obj2); // false
console.log(obj1.b === obj2.b); // false

上面的代码中，我们使用递归的方式深度克隆了一个对象。

2. 实现继承

function inheritObject(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

var person = {
  name: 'person',
  sayHello: function () {
    console.log('hello');
  }
};

var student = inheritObject(person);
console.log(student.name); // person
student.sayHello(); // hello

上面的代码中，我们定义了一个inheritObject函数，用于实现对象的继承。在函数中，我们创建了一个空函数，并将其原型对象指向父对象，最后实例化该空函数，返回一个新的对象，这个对象就是一个继承了父对象属性和方法的新对象。