继承

Posted on In

子类的原型对象-类式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 类式继承
// parent
function SuperClass() {
  this.superValue = true
}
SuperClass.prototype.getSuperValue = function () {
  return this.superValue
}

// child
function SubClass() {
  this.subValue = false
}
SubClass.prototype = new SuperClass()
SubClass.prototype.getSubValue = function () {
  return this.subValue
}

let child = new SubClass()
console.log(child.getSuperValue()) // true
console.log(child.getSubValue()) // false

创建即继承-构造函数继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// parent
function SuperClass(id) {
  this.books = ["JavaScript", "html", "css"]
  this.id = id
}
SuperClass.prototype.showBooks = function () {
  console.log(this.books)
}

// child
function SubClass(id) {
  SuperClass.call(this, id)
}

var instance1 = new SubClass(10)
var instance2 = new SubClass(20)

instance1.books.push("test")
instance2.books.shift()

console.log(instance1.books)
console.log(instance2.books)
// instance1.showBooks(); // Type Error

组合继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// parent
function SuperClass(name) {
  this.name = name
  this.books = ["JavaScript", "html", "css"]
}
SuperClass.prototype.getName = function () {
  console.log(this.name)
}

// child
function SubClass(name, time) {
  SuperClass.call(this, name)
  this.time = time
}
SubClass.prototype = new SuperClass()
SubClass.prototype.getTime = function () {
  console.log(this.time)
}

var instance1 = new SubClass("js book", 1998)
var instance2 = new SubClass("css book", 2003)
instance1.getName()

原型式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function inheritObject(o) {
  function F() {}
  F.prototype = o
  return new F()
}

var book = {
  name: "JavaScript",
  alikeBook: ["css book", "html"],
}
var newBook = inheritObject(book)
newBook.name = "ajax"
newBook.alikeBook.push("xml")

var otherBook = inheritObject(book)
otherBook.name = "flash"
otherBook.alikeBook.push("as")

console.log(newBook.name)
console.log(newBook.alikeBook) // 引用类型的属性共享

寄生式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function inheritObject(o) {
  function F() {}
  F.prototype = o
  return new F()
}

// base object
var book = {
  name: "js",
  alikeBook: ["css", "html"],
}
function createBook(obj) {
  var o = inheritObject(obj)

  o.getName = function () {
    console.log(this.name)
  }

  return o
}

let books = createBook(book)
books.getName()

寄生组合式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function inheritObject(o) {
  function F() {}
  F.prototype = o
  return new F()
}

function inheritPrototype(subClass, superClass) {
  var p = inheritObject(superClass.prototype)
  p.constuctor = subClass
  subClass.prototype = p
}

// for test
function SuperClass(name) {
  this.name = name
  this.nums = [1, 2, 3]
}
SuperClass.prototype.getName = function () {
  console.log(this.name)
}
function SubClass(name, time) {
  SuperClass.call(this, name)
  this.time = time
}
inheritPrototype(SubClass, SuperClass)
SubClass.prototype.getTime = function () {
  console.log(this.time)
}

var instance1 = new SubClass("js book", 202)
instance1.nums.push(30)
var instance2 = new SubClass("css book", 222)

console.log(instance1.nums)
console.log(instance2.nums)

多继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Object.prototype.mix = function () {
  let len = arguments.length
  for (let i = 0; i < len; i++) {
    let arg = arguments[i]
    for (let property in arg) {
      this[property] = arg[property]
    }
  }
}

let book1 = {
  name: "JavaScript",
}
let book2 = {
  price: 34,
}
let book3 = {
  foo: "haha",
}
book3.mix(book1, book2)
console.log(book3)