JS 객체 상속 사용 사례에 대한 자세한 설명

이번에는 JS 객체 상속 사용 사례에 대해 자세히 설명하겠습니다. JS 객체 상속 사용 시 주의 사항은 무엇인가요?

자신이 소유하지 않은 개체를 수정하는 것은 특정 문제에 대한 좋은 해결책입니다. "양호한" 상태에서는 일반적으로 발생하지 않습니다. 개발자가 문제를 발견한 후 개체를 수정하여 해결했기 때문에 발생할 수 있습니다. 그럼에도 불구하고 알려진 문제에 대한 해결책은 항상 두 개 이상 있습니다. 컴퓨터 과학 지식의 대부분은 Java와 같은 정적인 유형의 언어 환경에서 어려운 문제를 해결하기 위해 발전했습니다. 이러한 객체를 직접 수정하지 않고 확장하는 소위 디자인 패턴이라는 방법이 있을 수 있습니다.

JS 외부에서 가장 널리 사용되는 객체 확장 형식은 상속입니다. 한 유형의 개체가 이미 원하는 대부분의 기능을 수행하는 경우 해당 개체를 상속한 다음 몇 가지 기능을 추가하세요. JS에는 객체 기반 상속과 유형 기반 상속이라는 두 가지 기본 형식이 있습니다.

JS에서는 상속에 여전히 큰 한계가 있습니다. 첫째, DOM 또는 BOM 객체에서 상속할 수 없습니다. 둘째, 배열 인덱스와 길이 속성 사이의 복잡한 관계로 인해 Array에서 상속하면 제대로 작동하지 않습니다.

객체 기반 상속

객체 기반 상속에서는 프로토타입 상속이라고도 합니다. 한 객체가 생성자를 호출하지 않고 다른 객체를 상속합니다. ES5 Object.create() 메소드는 이러한 종류의 상속을 구현하는 가장 간단한 방법입니다. 예:

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"

이 예에서는 person에서 상속되는 새 개체 myPerson을 만듭니다. 이 상속 방법은 myPerson의 프로토타입이 person으로 설정되는 것과 같습니다. 그때부터 myPerson은 새 개체에서 동일한 이름으로 변수를 다시 정의하지 않고도 person의 속성과 메서드에 액세스할 수 있습니다. 예를 들어 myPerson.sayName()을 재정의하면 person.sayName()에 대한 액세스가 자동으로 차단됩니다.

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"

Object.create() 메서드는 두 번째 매개 변수를 지정할 수 있으며 매개 변수 개체의 속성과 메서드는 다음에 추가됩니다. 객체의 새로운 것. 예:

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"

이 예제에서 생성된 myPerson 객체에는 고유한 name 속성 값이 있으므로 sayName()을 호출하면 "Nicholas" 대신 "Greg"가 표시됩니다.

이런 방식으로 새 개체가 생성되면 새 개체를 완전히 자유롭게 수정할 수 있습니다. 결국, 당신은 객체의 소유자이므로 프로젝트에서 메소드를 추가하거나, 기존 메소드를 덮어쓰거나, 심지어 메소드를 삭제(또는 액세스 방지)할 수도 있습니다.

유형 기반 상속

유형 기반 상속은 객체 기반 상속과 동일한 방식으로 작동합니다. 여기서 상속은 프로토타입에 의존합니다. 따라서 유형 기반 상속은 객체가 아닌 생성자를 통해 구현됩니다. 이는 상속된 개체의 생성자에 액세스해야 함을 의미합니다. JS의 기본 유형과 비교할 때 유형 기반 상속은 개발자가 생성자를 정의할 때 가장 적합합니다. 동시에 유형 기반 상속에는 일반적으로 두 단계가 필요합니다. 첫 번째는 프로토타입 상속이고 그 다음은 생성자 상속입니다. 생성자 상속은 슈퍼 클래스의 생성자를 호출할 때 새로 생성된 객체를 this 값으로 전달하는 것입니다. 예:

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();

이 코드에서 Author 유형은 Person에서 상속됩니다. 속성 이름은 실제로 Person 클래스에 의해 관리되므로 Person.call(this, name)을 사용하면 Person 생성자가 속성을 계속 정의할 수 있습니다. Author 개체를 가리키는 Person 생성자가 실행되므로 최종 이름은 이 Author 개체에 정의됩니다.

객체 기반 상속과 비교하여 유형 기반 상속은 새 객체를 생성할 때 더 유연합니다. 유형을 정의하면 공통 슈퍼클래스에서 상속되는 여러 인스턴스 객체를 생성할 수 있습니다. 새로운 유형은 사용해야 하는 속성과 메서드를 명확하게 정의해야 하며 슈퍼클래스의 유형과 완전히 달라야 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

웹 개발에서 Null 비교를 피하는 방법

웹 개발에서 전역 변수 사용을 피해야 하는 이유

위 내용은 JS 객체 상속 사용 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!