Skip to content

Latest commit

 

History

History
90 lines (77 loc) · 2.13 KB

li-yong-yuan-xing-lian-shi-xian-ji-cheng.md

File metadata and controls

90 lines (77 loc) · 2.13 KB
Raw

利用原型链实现继承

在 ES6 实现class关键字之前，JavaScript 只能通过一些特殊的方式实现继承的概念。

常见的有以下几种实现方式：

  • 临时变量
  • call和apply改变上下文
  • 原型链
  • mixin

尽管前两种能够获得父类的属性和方法，但是childreni_instance instanceof parent_instance的结果为false

使用原型链实现继承：

function Parent() {
  this.sayAge = function () {
    console.log(this.age);
  };
}

function Child(firstname) {
  this.fname = firstname;
  this.age = 40;
  this.saySomeThing = function () {
    console.log(this.fname);
    this.sayAge();
  };
}
Child.prototype = new Parent();
let child = new Child("zhang");
child.saySomeThing(); //  zhang 40
console.log(child instanceof Parent); // true

这种实现方式，中每个Parent实例的sayAge()方法实际上应该是共用的。 可以通过使用call或apply改变上下文的方式改良。改良如下：

function Parent() {}
Parent.prototype.sayAge = function () {
  console.log(this.age);
};
function Child(firstname) {
  Parent.call(this);
  this.fname = firstname;
  this.age = 40;
  this.saySomeThing = function () {
    console.log(this.fname);
    this.sayAge();
  };
}
Child.prototype = new Parent();
let child = new Child("zhang");
child.saySomeThing(); // zhang 40

还有点问题:

  1. 上述实现方式中，Parent实际上共创建了Child实例个数 + 1 个实例。
  2. 原型链上存在额外的属性

进一步结合 mixin 的方式改良：

function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
  return Child;
}
function Parent(lastname) {
  this.lastname = lastname;
}
Parent.prototype.sayAge = function () {
  console.log(this.age);
};
function Child(firstname, lastname) {
  Parent.call(this, lastname); // Mock super
  this.firstname = firstname;
  this.age = 40;
  this.saySomeThing = function () {
    console.log(this.lastname, this.firstname);
    this.sayAge();
  };
}
extend(Child, Parent);
var child = new Child("san", "zhang");
child.saySomeThing(); // zhangsan 40