(슈퍼 클래식) JavaScript의 객체 상속 방법 요약-JS 튜토리얼-php.cn

이 기사는 JavaScript의 (매우 고전적인) 객체 상속 방법에 대한 요약을 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

1. 프로토타입 체인 상속

핵심 사항: 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 합니다. 생성자, 프로토타입 및 인스턴스 간의 관계: 각 생성자에는 프로토타입 개체가 있고, 프로토타입 개체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있습니다.

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};

function SubType(){
  this.subproperty = false;
}
// 继承自SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
  return this.subproperty;
};

var example = new SubType();
alert(example.getSuperValue());//true

로그인 후 복사

프로토타입을 사용하여 객체를 생성하면 여러 인스턴스의 참조 유형에 대한 작업이 변조되는 문제가 발생합니다. 이 문제는 다음과 같이 위에도 존재합니다.

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//即使没有写，也不会影响结果

SubType.prototype = new SuperType();

var example1 = new SubType();
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"

var example2 = new SubType(); 
alert(example.colors); //"red,blue,green,black"

로그인 후 복사

두 인스턴스 객체 example1과 example2의 색상 속성은 다음을 가리킵니다. 동일한 지점에서 다른 인스턴스에 영향을 미치는 하나의 속성을 변경합니다.

단점:
① 프로토타입 체인 상속의 여러 인스턴스의 참조 유형 속성이 동일한 지점을 가리킵니다. 한 인스턴스가 프로토타입 속성을 수정하면 다른 인스턴스의 프로토타입 속성도 수정됩니다.
② 매개변수를 전달할 수 없습니다.
③ 단일 상속.

2. 생성자 상속 차용

핵심 사항: .call() 및 .apply()를 사용하여 부모 클래스 생성자를 자식 클래스 함수에 도입하고 부모 클래스의 생성자를 사용하여 자식 클래스 인스턴스를 향상시킵니다. 이는 상위 클래스를 복사하는 것과 동일합니다. 클래스의 인스턴스는 하위 클래스에 제공됩니다.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
  // 继承自SuperType
  SuperType.call(this, name);  
  this.age = age;
}

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors);//"red,blue,green,black"

var example2 = new SubType();
alert(example2.colors);//"red,blue,green"

alert(example1.name); // "Mike"
alert(example1.age); // 23

로그인 후 복사

생성자 상속의 핵심은 SuperType.call(this, name)이 SuperType 생성자를 호출하는 방식으로 SubType의 각 인스턴스가 SuperType의 속성을 복사한다는 것입니다.

단점:
① 부모 클래스의 인스턴스 속성과 메서드만 상속할 수 있고 프로토타입 속성/메서드는 상속할 수 없습니다.
② 생성자의 재사용이 실현될 수 없으며 각 하위 클래스에는 부모 클래스 인스턴스 함수의 복사본이 있습니다. , 이는 성능과 코드에 영향을 미칩니다.

3. 조합 상속

핵심: 프로토타입 체인 상속과 생성자 상속 두 가지 모드의 장점을 결합하여 상위 클래스 생성자를 호출하여 상위 클래스의 속성을 상속하고 전달된 속성을 유지합니다. 그런 다음 상위 클래스 인스턴스를 하위 클래스의 프로토타입으로 사용하여 함수 재사용을 달성합니다.

그 뒤에 있는 아이디어는 프로토타입 체인을 사용하여 프로토타입 속성과 메서드의 상속을 실현하고 생성자를 빌려 인스턴스 속성의 상속을 실현하는 것입니다. 이러한 방식으로 함수 재사용은 메서드를 정의하여 달성됩니다. 프로토타입. 각 인스턴스에 고유한 속성이 있는지 확인합니다.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

function SubType(name, age){
  //继承属性
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"
example1.sayName(); //"Mike";
example1.sayAge(); //23

var example2 = new SubType("Jack", 22);
alert(example2.colors); //"red,blue,green"
example2.sayName(); //"Jack";
example2.sayAge(); //22

로그인 후 복사

결함:

부모 클래스의 인스턴스 속성과 메서드는 하위 클래스의 인스턴스와 하위 클래스의 프로토타입에 모두 존재하지만 메모리만 차지합니다. 따라서 하위 클래스를 사용하여 인스턴스 객체를 생성할 때 프로토타입에는
동일한 속성/메서드의 두 복사본이 있습니다. -------이 방법은 JavaScript에서 가장 일반적으로 사용되는 상속 패턴입니다.

4. 프로토타입 상속

핵심: 객체를 함수로 래핑한 다음 이 함수의 호출을 반환합니다. 이 함수는 마음대로 속성을 추가할 수 있는 인스턴스 또는 객체가 됩니다. 이것이 생성자의 프로토타입에 객체를 직접 할당하는 object.create()의 원리입니다.

function object(obj){
  function O(){}
  O.prototype = obj;
  return new O();
}

로그인 후 복사

object()는 전달된 객체의 얕은 복사본을 수행하여 O의 프로토타입이 전달된 객체를 직접 가리킵니다.

var person = {
  name: "Mike",
  friends: ["Jack", "Tom", "Joes"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Peter");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("BoBo");

alert(person.friends);   //"Jack,Tom,Joes,Peter,BoBo"

로그인 후 복사

ECMAScript5는 두 개의 매개변수(새 객체의 프로토타입으로 사용되는 객체와 추가 속성을 정의하기 위한 새 객체로 사용되는 객체)를 받는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다.

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

로그인 후 복사

단점:

① 프로토타입 체인에서 상속된 여러 인스턴스의 참조 유형 속성이 동일한 지점을 가리키며(모든 인스턴스가 프로토타입의 속성을 상속함) 변조 가능성이 있습니다.
② 매개변수를 전달할 수 없습니다. 재사용이 불가능합니다. (새 인스턴스 속성은 나중에 추가됩니다.)

5. 기생 상속

핵심: 내부적으로 객체를 향상시키는 상속 프로세스만 캡슐화하고 최종적으로 생성자를 반환하는 함수를 만듭니다. (프로토타입 상속 주위에 셸을 배치한 다음 반환하는 것과 같습니다.)

function createAnother(original){ 
  varclone=object(original); // 过调用函数创建一个新对象
  clone.sayHi = function(){ // 以某种方式增强这个对象
    alert("hi");
  };
  return clone; // 返回对象
}

로그인 후 복사

함수의 주요 기능은 생성자에 속성과 메서드를 추가하여 함수를 향상시키는 것입니다.

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

로그인 후 복사

단점:

① 프로토타입 체인이 상속한 여러 인스턴스의 참조 유형 속성이 동일한 지점을 가리키며 변조 가능성이 있습니다.
② 매개변수를 전달할 수 없고 프로토타입을 사용할 수 없으며 재사용할 수 없습니다. .

6. 기생 결합 상속

핵심 사항: 생성자를 빌려 매개변수 및 기생 모드를 전달하여 속성을 상속하고, 프로토타입 체인의 혼합 형식을 통해 메서드를 상속하고, 적용 또는 호출을 사용하여 함수에 다른 생성자를 도입할 수 있습니다. 양도됩니다.

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //Object.create创建对象
  prototype.constructor = subType;                    // 增强对象
  subType.prototype = prototype;                      // 指定对象
}

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型属性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var example1 = new SubType("abc", 21);
var example2 = new SubType("def", 22);

example1.colors.push("pink"); // ["red", "blue", "green", "pink"]
example1.colors.push("black"); // ["red", "blue", "green", "black"]

로그인 후 복사

기생 조합 상속은 이전 상속 방법의 장점을 결합하고 위 상속 방법의 단점을 거의 모두 방지하며 가장 높은 실행 효율성과 가장 넓은 적용 범위를 갖습니다.

단점:

구현 과정이 상대적으로 번거롭습니다.

직접 상속할 수 있는데 왜 이런 상속 방법을 배워야 합니까? 주요 목적은 그들의 아이디어를 배우고 더 나은 기반을 마련하는 것입니다. 이는 향후 프레임워크의 소스 코드를 읽거나 구성 요소 또는 프레임워크를 직접 캡슐화하는 데 큰 도움이 될 것입니다.

바빠서 ES6 확장을 추가하지 않았습니다.