Hexo
0%

面向对象

Posted on Edited on In

面向对象类包含

  • 类和实例
  • 类和继承

类的声明

1
2
3
4
5
6
7
8
9
10
// 类的声明
function Animal () {
  this.name = 'name';
}
// ES6中的class声明
class Animal2 () {
  constructor () {
    this.name = name;
  }
}

通过类实例化对象

1
2
//打印上方实例化后的两个对象
console.log(new Animal(), new Animal2())

类的继承

1
2
3
4
5
6
7
8
9
//借构造函数继承
function Parent1(){
  this.name='parent1';
}

function Child1(){
  Parent1.call(this);// apply,相当于在这里执行了Parent1构造函数的内容
  this.type='child1';
}

构造函数的继承不会继承父类原型对象上的方法，存在一定的缺陷。

1
2
3
4
5
6
7
8
// 借助原型链实现继承
function Parent2(){
  this.name = 'parent2';
}
function Child2(){
  this.type='child2';
}
Child2.prototype = new Parent2();

Child2的实例都共享一个原型对象就是Parent2的这个实例，是这种继承的缺点

1
2
3
4
5
6
7
8
9
// 组合方式
function Parent3 () {
  this.name = 'parent3';
}
function Child3(){
  Parent3.call(this);
  this.type = 'child3';
}
Child3.prototype = new Parent3();

构造函数执行两次，没必要。

1
2
3
4
5
6
7
8
9
// 组合方式优化1
function Parent4(){
  this.name = 'parent4';
}
function Child4(){
  Parent3.call(this);
  this.type = 'child4';
}
Child4.prototype = Parent4.prototype;

无法判断实例直接继承于谁，实例的constructor属性指向存在问题

1
2
3
4
5
6
7
8
9
10
// 组合方式优化2
function Parent5(){
  this.name = 'parent5';
}
function Child5(){
  Parent3.call(this);
  this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;

2018 年 1月 8日