js의 상속 방법은 무엇입니까? js에서 상속을 구현하는 여러 가지 방법 소개

이 기사에서 알 수 있는 것은 js의 상속 방법이 무엇인지입니다. js에서 상속을 구현하는 여러 가지 방법에 대한 소개는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. js가 상속을 구현하는 방식: 프로토타입 체인

구현 방법: A 프로토타입의 인스턴스는 다음의 속성입니다. B 프로토타입

프로토타입 체인에 객체가 기본적으로 존재한다는 사실을 잊지 마세요

서브클래스에 메서드를 추가하거나 슈퍼클래스 메서드를 재정의하는 것은 프로토타입 문을 교체한 후에 배치해야 합니다#🎜🎜 #

Pass 프로토타입 체인이 상속을 구현한 후에는 프로토타입 체인이 다시 작성되므로 객체 리터럴을 사용하여 메서드와 속성을 만들 수 없습니다. js에서 상속 구현: 생성자 차용

Implementation 메서드: 하위 클래스 Function의 생성자 내에서 슈퍼클래스 생성자를 호출합니다. 즉, call() 또는 Apply()를 사용하여 범위를 변경합니다. 슈퍼클래스 생성자

생성자에 매개변수를 전달할 수는 있지만 함수를 재사용할 수는 없습니다

function SuperType() {
  this.property = true;
  this.arr=[1,2,3]
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.sub = false;
}
SubType.prototype = new SuperType();
//继承SuperType，即以superType的实例为中介，使subType。prototype指向superType的原型
SubType.prototype.getSubValue = function() { //添加新方法
  return this.sub;
}
SubType.prototype.getSuperValue = function() { // 重写超类中的方法
  return this.sub;
}
var instance1 = new SubType();
instance1.arr.push(4);
console.log(instance1.arr); //1,2,3,4
var instance2 = new SubType();
console.log(instance2.arr); //1,2,3,4

3. js에서: 결합 상속

구현 방법: 프로토타입 체인을 사용하여 프로토타입 속성 및 메소드의 상속을 실현하고 생성자를 빌려 인스턴스 속성 상속을 구현합니다

#🎜 🎜#숨겨진 위험: 상위 클래스 생성자를 두 번 호출(1call() 메소드, 2new SuperType())

function SuperType(name,age){
  this.name = name;
  this.age = age;
}
function SubType() {
  SuperType.call(this,'i','21')//继承SuperType，并传递参数
  this.job = 'actor'
}

4. js가 상속을 구현하는 방식: 프로토타입 상속 # 🎜🎜#

객체를 기반으로 새 객체를 생성한 다음 새 객체를 수정합니다.

슈퍼 클래스 참조 유형 속성은 계속 공유됩니다

#🎜🎜 #

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)//继承SuperType，并传递参数
  this.job = 'actor'
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log('hello')
}

var h = new SubType('hua', 18);
h.sayName()//haha
h.f.push(5)
console.log(h.f)//1,2,3,4,5
var n = new SubType();
console.log(n.f)//1,2,3,4

5. js가 상속을 구현하는 방식: 기생 상속

상속 프로세스를 구현하는 데 사용되는 함수를 만들고, 함수 내부에서 객체를 확장합니다. 그런 다음 객체를 반환합니다

이때 상위 클래스의 참조 유형 속성은 여전히 ​​모든 인스턴스에서 공유됩니다

var person = {
  name:'lily',
  age:'21',
  friends:[1,2,3]
}
var people = Object.create(person);
people.friends.push(4);
var human = Object.create(person);
console.log(human.friends)//1,2,3,4

6. js가 상속을 구현하는 방식: 기생 결합 상속

생성자를 빌려 속성을 상속하고 프로토타입 체인 혼합을 통해 메서드를 상속합니다#🎜🎜 #

부모 클래스 생성자의 실행은 다음과 같습니다. 한 번 축소되고 상위 클래스 참조 유형의 속성은 공유되지 않습니다

function anotherFunction(original) {
  var clone  = Object(original);
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone;
}
var person = {
  name:'lili',
  age:'21',
  f: [1,2,3]
}
var people1 = anotherFunction(person);
people1.f.push(4)
console.log(people1.f);// 1,2,3,4
var people2 = anotherFunction(person);
console.log(people2.f);// 1,2,3,4

관련 권장 사항:

JS 상속 --프로토타입 체인 상속 및 클래스 상속_기본 지식

JS의 상속 메서드에 대한 자세한 예

#🎜🎜 #

여러 가지 방법 JS에서 상속 구현

위 내용은 js의 상속 방법은 무엇입니까? js에서 상속을 구현하는 여러 가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!