15分钟深入了解JS继承分类、原理与用法

下面是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略。

一、JS继承分类

JS继承可以分为以下几种类型：

1. 原型链继承
2. 借用构造函数继承
3. 组合继承
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承

二、JS继承原理

JS中的继承是基于原型的，每个对象都有__proto__属性，该属性指向对象的原型对象，原型对象又有__proto__属性，依次形成了一个原型链。当我们访问一个对象的属性时，如果该对象本身没有该属性，就会沿着原型链往上查找，直到找到该属性或者到达原型链的末尾为止。

三、JS继承用法

1. 原型链继承

原型链继承就是将父类的实例作为子类的原型，子类可以通过原型链继承到父类的属性和方法。

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

function Child() {}

Child.prototype = new Parent(); 

// test
var child = new Child();
child.sayHello(); // Hello parent

2. 借用构造函数继承

借用构造函数继承就是子类使用父类的构造函数来构造自己的对象，相当于复制父类的属性和方法，实现了对父类属性的继承。但是父类原型中的方法和属性是无法继承的。

function Parent() {
  this.names = ['parent1', 'parent2'];
}

function Child() {
  Parent.call(this);
}

// test
var child1 = new Child();
child1.names.push('child1');
console.log(child1.names); // ["parent1", "parent2", "child1"]

var child2 = new Child();
console.log(child2.names); // ["parent1", "parent2"]

3. 组合继承

组合继承是将原型链继承和借用构造函数继承结合起来。通过原型链来实现对父类原型中方法和属性的继承，通过借用构造函数来实现对父类实例属性的继承。

function Parent() {
  this.name = 'parent';
  this.names = ['parent1', 'parent2'];
}

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

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

Child.prototype = new Parent();
Child.prototype.constructor = Child;

// test
var child = new Child();
child.names.push('child');
console.log(child.names); // ["parent1", "parent2", "child"]

child.sayHello(); // Hello parent

4. 原型式继承

原型式继承是通过原型对象来实现继承，它的本质是对一个对象的封装，返回一个可以继承该对象属性和方法的新对象。

var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello ' + this.name);
  }
};

var child = Object.create(parent);
child.name = 'child';

// test
child.sayHello(); // Hello child

5. 寄生式继承

寄生式继承是在原型式继承的基础上添加一些方法和属性，返回一个继承了原对象的扩展对象。

var parent = {
  name: 'parent',
  sayHello: function() {
    console.log('Hello ' + this.name);
  }
};

function createChild(obj) {
  var child = Object.create(obj);

  child.sayHi = function() {
    console.log('Hi ' + this.name)
  }

  return child;
}

var child = createChild(parent);
child.name = 'child';

// test
child.sayHi();  // Hi child
child.sayHello(); // Hello child

6. 寄生组合式继承

寄生组合继承是将组合继承中的一个缺点——继承原型对象时调用了一次父类构造函数——通过寄生继承方式解决。

function Parent() {
  this.name = 'parent';
}

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

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

function createObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

Child.prototype = createObject(Parent.prototype);
Child.prototype.constructor = Child;

// test
var child = new Child();
console.log(child.name); // parent
console.log(child.age); // 18

child.sayHello(); // Hello parent

以上就是关于“15分钟深入了解JS继承分类、原理与用法”的完整攻略，希望能对你有所帮助。

阅读剩余 73%