ES5 구조 함수 간의 계승 방법

ES5 상속

원형 체인 계승

function SuperType() {
  this.property = true
}
SuperType.prototype.getSuperValue = function() {
  return this.property
}
function SubType() {
  this.subproperty = false
}
SubType.prototype = new SuperType() //  
SubType.prototype.getSubValue = function() {
  return this.subproperty
}
let instance = new SubType()
console.log(instance.getSuperValue()) // true

단점:

실례는 부류 구조 함수에 전참할 수 없습니다

상속 단일

모든 새로운 실례는 부류 실례의 속성을 공유한다(원형상의 속성 공유, 하나는 당신이 원형 속성을 수정한 것이고, 다른 실례의 원형 속성도 수정된다)

차용 구조 함수 계승

function Person(name) {
  this.name = name
  this.sum = function() {
    alert(this.name)
  }
}
function Con() {
  //  call apply 
  Person.call(this, 'name')
  this.age = 12
}
var con1 = new Con()
console.log(con1.name)    // name
console.log(con1.age) // 12
console.log(con1 instanceof Person) // false

특징:

전삼이 가능합니다

여러 개의 구조 함수 속성을 계승할 수 있다

단점:

부류 구조 함수의 속성만 계승할 수 있다

구조 함수의 복용을 실현할 수 없다

모든 새로운 실례는 부류 구조 함수의 사본이 있다

조합 상속

원형 체인과 도용 구조 함수의 방법을 결합시켜 이들의 장점을 집중시켰다. 기본적인 사고방식은 원형 체인을 사용하여 원형의 속성과 방법을 계승하는 것이다. 도용 구조 함수를 사용하여 실례 속성을 계승하면 방법을 원형에 정의하여 중용을 실현할 수 있을 뿐만 아니라 모든 실례가 자신의 속성을 가지게 할 수 있다.

function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}

function SubType(name, age) {
  //  
  SuperType.call(this, name)  //  SuperType
  this.age = age
}
//  
SubType.prototype = new SuperTuper('Nich', 29) //  SuperType
SubType.prototype.sayAge = function() {
  console.log(this.age)
}

let instance1 = new SubType()
instance1.colors.push('black')
console.log(instance1.colors) // "red, blue, green, black"
instance1.sayName() // 'Nich'
instance1.sayAge() // 29

let instance2 = new SubType('Greg', 27)
console.log(instance2.colors) // "red, blue, green"
instance2.sayName() // 'Greg'
instance2.sayAge()  // 27

조합 계승은 원형 체인과 도용 구조 함수의 부족을 보완하고 JS에서 가장 많이 사용되는 통합 모델 조합 계승도 instanceof 조작부호와 isPrototypeOf()의 합성 대상을 식별하는 능력 조합 계승의 효율 문제를 보존한다. 부류 구조 함수는 시종 두 번 호출되고 한 번은 부류 원형을 만들 때 호출되며 다른 한 번은 부류 구조 함수에서 호출된다.본질적으로 하위 클래스 원형은 최종적으로 초클래스 대상의 모든 실례 속성을 포함해야 한다. 하위 클래스 구조 함수는 실행할 때 자신의 원형을 다시 쓰면 된다.

원형 상속과 Object.create()

//  Object.create() ， 
function object(o) {
  function F(){}
  F.prototype = o
  return new F()
}
let person = {
  name: 'Nich',
  friends: ['Van', 'Court']
}
let anotherPerson = object(person)
//  let anotherPerson = Object.create(person)
console.log(anotherPerson.name) // Nich ( )
anotherPerson.name = 'Greg'
anotherPerson.friends.push('Rob')

let yetAnotherPerson = object(person)
yetAnotherPerson.name = 'Linda'
yetAnotherPerson.friends.push('Barbie')

console.log(person.friends) // Court, Van, Rob, Barbie

Object.create()의 두 번째 매개변수와 Object.defineProperties 두 번째 매개 변수와 같습니다. 새로 추가된 모든 속성은 각자의 설명자를 통해 설명됩니다. 이런 방식으로 추가된 속성은 원형의 동명 속성을 숨깁니다.

let person = {
  name: 'Nich',
  friends: ['Van', 'Court']
}
let anotherPerson = Object.create(person, {
  name: {
    value: 'Greg'
  }
})
console.log(anotherPerson.name) // 'Greg'

원형식 계승은 구조 함수를 단독으로 만들지 않고 대상 간에 정보를 공유해야 하는 장소를 맡기에 매우 적합하지만 속성에 포함된 인용 값은 관련 대상 간에 공유되며 원형 모드식을 사용하는 것과 같다

기생식 계승

기생식 계승 배후의 사고방식은 기생 구조 함수와 공장 모델과 유사하다. 계승을 실현하는 함수를 만들고 어떤 방식으로 대상을 강화한 다음에 이 대상으로 돌아간다.

 ， 
function createAnother(original) {
  let clone = object(original)
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone
}
let person = {
  name: 'Nick',
  friends: ['Bob', 'Van']
}
let anotherPerson = createAnother(person)
anotherPerson.sayHi() // hi

기생식 계승을 통해 대상에 함수를 추가하면 함수를 다시 사용하기 어려워지고 구조 함수 모델과 유사하다

기생식 조합 계승

function inheritPrototype(subType, superType) {
  let prototype = object(superType.prototype)
  prototype.constructor = subType
  subType.prototype = prototype
}
inheritPrototype(SubType, SuperType)
SubType.prototype.sayAge = function() {
  console.log(this.age)
}

기생식 조합 계승은 SuperType 구조 함수를 여러 번 호출하는 것을 피하고 SubType을 피합니다.prototype에서 필요도 없고 사용할 수 없는 속성이기 때문에 효율이 높습니다.그리고 원형 키는 변하지 않고 instanceof와 isPrototypeOf()는 여전히 유효한 기생식 조합 계승은 인용 유형 계승의 가장 좋은 모델이라고 할 수 있다