继承

javascript

// es6 class
class Parent {}
class Children extends Parent {}

// Object.setPrototypeOf();
// class 的 extends 语法相当于以下 方式的继承实现
function Parent() {}
function Children() {}
Object.setPrototypeOf(Children.prototype, Parent.prototype);

// 类式继承
function Parent() {
  this.parentValue = true;
}
Parent.prototype.getParentValue = function() {
  return this.parentValue;
}

function Children() {
  this.childrenValue = true;
}
Children.prototype = new Parent();
Children.prototype.getChildrenValue = function() {
  return this.childrenValue;
}

// 构造函数继承
function Parent(id) {
  this.books = ["html", "javascript"];
  this.id = id;
}
Parent.prototype.showBooks = function() {
  console.log(this.books);
}

function Children(id) {
  Parent.call(this, id);
  /**
   * 以上代码相当于执行以下代码, 所以创建的实例会拥有 books 和 id
   * 但是无法访问 showBooks
   * this.books = ["html", "javascript"];
   * this.id = id;
  */
}
const instance = new Children(1);
instance.books // ["html", "javascript"]
instance.id // 1
instance.showBooks() // showBooks is not a function

// 组合式继承
function Parent(id) {
  this.books = ["html", "javascript"];
  this.id = id;
}
Parent.prototype.showBooks = function() {
  console.log(this.books);
}

function Children(id, name) {
  Parent.call(this, id);
  this.name = name;
}

Children.prototype = new Parent();

const instance1 = new Children(1, "child1");
instance1.books.push("css");
instance.books // ["html", "javascript", "css"]
instance.id // 1
instance.showBooks() // ["html", "javascript", "css"]

const instance2 = new Children(2, "child2");
instance.books // ["html", "javascript"]
instance.id // 2
instance.showBooks() // ["html", "javascript"]

// 原型式继承
function inheritObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

const book = {
  book: ["html", "javascript"]
};

const instance1 = inheritObject(book);
const instance2 = inheritObject(book);

instance1.book.push("css");
// 由于 book 是引用类型，所以会被影响
instance2.book // ["html", "javascript", "css"]

// 寄生式继承
const book = {
  book: ["html", "javascript"]
};

function createBook(obj) {
  const o = new inheritObject(obj);
  return o;
}

// 寄生组合式继承
function inheritObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

function inheritPrototype(sub, super) {
  const p = inheritObject(super.prototype);
  p.constructor = sub;
  sub.prototype = p;
}

// es6 class
class Parent {}
class Children extends Parent {}

// Object.setPrototypeOf();
// class 的 extends 语法相当于以下 方式的继承实现
function Parent() {}
function Children() {}
Object.setPrototypeOf(Children.prototype, Parent.prototype);

// 类式继承
function Parent() {
  this.parentValue = true;
}
Parent.prototype.getParentValue = function() {
  return this.parentValue;
}

function Children() {
  this.childrenValue = true;
}
Children.prototype = new Parent();
Children.prototype.getChildrenValue = function() {
  return this.childrenValue;
}

// 构造函数继承
function Parent(id) {
  this.books = ["html", "javascript"];
  this.id = id;
}
Parent.prototype.showBooks = function() {
  console.log(this.books);
}

function Children(id) {
  Parent.call(this, id);
  /**
   * 以上代码相当于执行以下代码, 所以创建的实例会拥有 books 和 id
   * 但是无法访问 showBooks
   * this.books = ["html", "javascript"];
   * this.id = id;
  */
}
const instance = new Children(1);
instance.books // ["html", "javascript"]
instance.id // 1
instance.showBooks() // showBooks is not a function

// 组合式继承
function Parent(id) {
  this.books = ["html", "javascript"];
  this.id = id;
}
Parent.prototype.showBooks = function() {
  console.log(this.books);
}

function Children(id, name) {
  Parent.call(this, id);
  this.name = name;
}

Children.prototype = new Parent();

const instance1 = new Children(1, "child1");
instance1.books.push("css");
instance.books // ["html", "javascript", "css"]
instance.id // 1
instance.showBooks() // ["html", "javascript", "css"]

const instance2 = new Children(2, "child2");
instance.books // ["html", "javascript"]
instance.id // 2
instance.showBooks() // ["html", "javascript"]

// 原型式继承
function inheritObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

const book = {
  book: ["html", "javascript"]
};

const instance1 = inheritObject(book);
const instance2 = inheritObject(book);

instance1.book.push("css");
// 由于 book 是引用类型，所以会被影响
instance2.book // ["html", "javascript", "css"]

// 寄生式继承
const book = {
  book: ["html", "javascript"]
};

function createBook(obj) {
  const o = new inheritObject(obj);
  return o;
}

// 寄生组合式继承
function inheritObject(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}

function inheritPrototype(sub, super) {
  const p = inheritObject(super.prototype);
  p.constructor = sub;
  sub.prototype = p;
}

继承 ​

继承