함수 위조를 기반으로 한 JavaScript 객체지향 상속 구현

프로토타입 체인을 기반으로 상속을 구현하는 방식의 일부 단점으로 인해 사람들은 함수 위조를 기반으로 상속 구현 상속을 구현하는 다른 방법을 채택했습니다. 이 기술의 아이디어는 자식 클래스의 생성자 내에서 부모 클래스의 생성자를 호출하는 것입니다.

함수 위조에 따른 상속 구현

자바스크립트에서 함수는 특정 환경에서 코드를 실행하는 객체이기 때문에 call()이나 apply() 메소드를 이용하면 된다. 자식 클래스 객체에서 부모 클래스 객체의 생성자를 실행합니다. 다음 예를 살펴보겠습니다.

/* 创建父类 */
function Parent(){
  this.color = ["red","blue"];
}
 
/* 创建子类 */
function Child(){
  // 继承父类的属性
  Parent.call(this);
}

위 코드에서 먼저 부모 클래스 Parent를 만든 다음 하위 클래스 Child를 만들고 하위 클래스 완전 상속 내에서 Parent.call(this)을 사용합니다.

함수 속성 기사에서 call() 및 apply() 메서드를 소개했습니다. 이 두 메서드의 기능은 특정 범위에서 함수를 호출하는 것입니다. 즉, 이 두 메서드는 이름대로 기능합니다. 여기서는 상속을 완료하기 위해 Child 내부에서 Parent.call(this)을 사용합니다. 이 문장은 이때 Child 객체를 참조합니다(Child에서는 this가 실행되는 객체여야 합니다). Child)이므로 Child에 this.color = ["red", "blue"];가 있는 것과 동일하며 이는 위장된 형식인 Child에 this.color 속성이 있는 것과 같습니다.

다음 방법을 통해 확인할 수 있습니다.

var c1 = new Child();     //创建子类对象c1
c1.color.push("Green");   //为c1添加新的颜色
console.info(c1.color);   //控制台输出：red,blue,Green
 
var c2 = new Child();     //创建子类对象c2
console.info(c2.color);   //控制台输出：red,blue

위 코드에서는 하위 클래스 객체 c1을 생성하고 여기에 새로운 색상 "Green"을 추가했습니다. 콘솔: "빨간색, 파란색, 녹색". 그런 다음 c2 객체를 생성했습니다. 새 색상이 추가되지 않았기 때문에 콘솔의 상위 클래스에서 상속된 색상인 "빨간색, 파란색"만 출력합니다.

new Child가 호출될 때마다 객체 속성 설정을 수행하는 것과 같습니다. 이때 각 객체는 공간에 색상 속성을 가지지만 프로토타입에는 존재하지 않으므로 색상이 지정되지 않습니다. 공유. 이는 프로토타입 체인 상속의 참조 유형 변수 문제를 해결합니다.

하위 클래스 생성자

프로토타입 체인 상속의 또 다른 단점은 상위 클래스의 생성자를 하위 클래스에서 호출할 수 없으므로 하위 클래스의 속성을 상위 클래스에 할당할 방법이 없다는 것입니다. . 가운데. 이 문제는 함수 위조를 통해 잘 해결될 수 있다. 다음 예를 살펴보십시오.

// 创建父类
function Parent(name){
  this.name = name;
}
 
//创建子类
function Student(name,age){
  //使用伪造的方式就可以把子类的构造函数参数传递到父类中
  Parent.call(this,name); //调用父类的属性
  this.age = age;
}
 
var s1 = new Student("Leon",22);
var s2 = new Student("Ada",25);
 
console.info(s1.name + "," + s1.age);  // 控制台输出：Leon,22
console.info(s2.name + "," + s2.age);  // 控制台输出：Ada,25

위 코드에서 하위 클래스 Student는 함수 위조를 통해 상위 클래스의 이름 속성을 호출하여 실제로 하위 클래스에 이름 속성을 추가합니다. 여기서 call() 메소드는 Student 클래스의 매개변수 이름을 상위 클래스에 전달하며 완료된 작업은 this.name = name;과 동일합니다. 그리고 이 이름 속성은 상위 클래스의 이름 속성이 아닌 하위 클래스의 이름 속성입니다.

함수 위조에 따른 상속 문제

위 논의에서 하위 클래스가 상위 클래스의 속성을 상속받는 것에 대해서만 이야기했는데, 하위 클래스가 상위 클래스의 메소드를 어떻게 상속받게 됩니까? ? 아까 말했듯이 보통 프로토타입에서 메소드를 설정하는데, 예를 들어 상위 클래스에 say() 메소드가 있는데, 코드는 다음과 같습니다.

// 创建父类
function Parent(name){
  this.name = name;
}
 
// 父类的say()方法
Parent.prototype.say = function(){
  console.info(this.name);
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

함수 위조를 사용하는 메소드 때문입니다. , 하위 클래스 Student는 완료되지 않습니다. 프로토타입은 상위 클래스 Parent를 가리키므로 하위 클래스가 상위 클래스를 상속한 후에는 say() 메서드가 존재하지 않습니다. 이 문제를 해결하는 방법은 Parent에 say() 메소드를 배치하고 this 키워드를 사용하여 생성하는 것입니다.

// 创建父类
function Parent(name){
  this.name = name;
  // 父类的say()方法
  this.say = function(){
    console.info(this.name);
  }
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

이렇게 하면 하위 클래스가 상위 클래스의 say() 메서드를 상속할 수 있지만 또 다른 문제가 발생합니다. 하위 클래스 객체가 생성될 때마다 say() 메서드가 생성됩니다. 메모리 공간을 많이 차지합니다.

함수 위조를 기반으로 한 상속 구현에도 결함이 있기 때문에 이 방법만 사용하여 상속을 완료하는 것이 아니라 조합 기반의 방법을 사용하여 상속을 구현하도록 하겠습니다. 이에 대해서는 다음 글에서 다루겠습니다. 이 상속 방법을 소개합니다.

위 내용은 JavaScript 객체지향-함수 위조 기반 상속 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!