JavaScript 상속에 대한 자세한 설명 1부_javascript 기술

객체지향과 객체기반
거의 모든 개발자는 객체지향 언어(예: C, C#, Java) 개발 경험이 있습니다. 전통적인 객체 지향 언어에는 클래스와 인스턴스라는 두 가지 매우 중요한 개념이 있습니다. 클래스는 사물 클래스의 공개 동작과 메서드를 정의하며 인스턴스는 클래스의 특정 구현입니다. 또한 객체지향 프로그래밍에는 캡슐화, 상속, 다형성이라는 세 가지 중요한 개념이 있다는 것도 알고 있습니다.

그러나 JavaScript의 세계에서는 이러한 기능이 모두 존재하지 않는 것 같습니다. 왜냐하면 JavaScript 자체는 객체 지향 언어가 아니라 객체 기반 언어이기 때문입니다. 여기에는 몇 가지 흥미로운 기능이 있습니다. 다음 예와 같이 문자열, 배열, 날짜, 숫자, 심지어 함수까지 포함한 JavaScript의 모든 것은 객체입니다.

코드 복사 코드는 다음과 같습니다.

// 함수 정의 - add
function add(a, b) {
add. informTimes;
return a b;
}
// 함수 자체도 객체이므로 여기서는 이 함수가 호출된 횟수를 기록하기 위해 함수 add에 대한 속성을 정의합니다.
add.invokeTimes = 0;
add(1 1);
add(2 3);
console.log(add.invokeTimes) // 2

클래스 시뮬레이션 JavaScript의 상속 객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 만듭니다. 하지만 JavaScript의 모든 것은 개체입니다. 그렇다면 사용자 정의 개체를 만드는 방법은 무엇입니까?
이를 위해서는 프로토타입이라는 또 다른 개념을 도입해야 합니다. 새로 생성된 사용자 정의 개체는 모두 이 템플릿(프로토타입)의 복사본입니다(실제로는 복사본이 아니지만 링크는 보이지 않습니다). 그리고 사본 같은 느낌이 듭니다).
프로토타입을 통해 커스텀 객체를 생성하는 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. :

// 생성자
함수 Person(이름, 성별) {
this.name = 이름
this.sex =
}
/ / Person 프로토타입을 정의합니다. 프로토타입의 속성은 사용자 정의 개체에서 참조할 수 있습니다.
Person.prototype = {
getName: function() {
return this.name>},
getSex; : function() {
return this.sex;
}
}


여기서 Person 함수를 생성자라고 부릅니다. 이는 사용자 정의 개체를 생성하는 함수입니다. JavaScript는 생성자와 프로토타입을 통해 클래스의 기능을 시뮬레이션하는 것을 볼 수 있습니다.

사용자 정의 개체를 생성하는 코드(인스턴스화된 클래스):

코드 복사 코드는 다음과 같습니다.

var zhang = new Person("ZhangSan", "man");

console.log(zhang.getName()) // "ZhangSan"
var chun = new Person("ChunHua ", "woman");
console.log(chun.getName()); // "ChunHua"


코드 var zhang = new Person("ZhangSan", "man ")가 실행되면 실제로 내부적으로 다음과 같은 작업이 수행됩니다.

빈 개체(new Object())를 만듭니다.
Person.prototype의 속성(키-값 쌍)을 이 빈 객체에 복사합니다(앞서 언급했듯이 내부 구현은 복사본이 아니라 숨겨진 링크입니다).
this 키워드를 통해 이 개체를 생성자에 전달하고 생성자를 실행합니다.
이 개체를 zhang 변수에 할당합니다.
프로토타입 템플릿이 인스턴스화된 객체에 복사되지 않고 연결 방식임을 증명하려면 다음 코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.

function Person(name, sex) {

this.name = name; 🎜>}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man")
console.log(zhang.age); // 프로토타입 덮어쓰기
zhang.age = 19;
console.log(zhang.age) // 19
delete zhang.age>// 인스턴스 속성 삭제 후 age, 이 속성은 프로토타입
console.log(zhang.age); // 20


JavaScript 내부에 구현된 이런 숨겨진 프로토타입 링크가 JavaScript가 의지하는 따뜻한 토양입니다. 이는 시뮬레이션 구현 상속의 기초이기도 합니다.
JavaScript에서 단순 상속을 구현하는 방법은 무엇입니까?
다음 예에서는 Person으로부터 프로토타입 프로토타입의 모든 속성을 상속하는 직원 클래스 Employee를 생성합니다.

코드 복사

코드는 다음과 같습니다.

함수 직원(이름, 성별, 직원ID) {
this.name = 이름;
this.sex = 섹스
this.employeeID =
}
// Employee 프로토타입이 Person 인스턴스를 가리키도록 합니다
// Person 인스턴스는 Person 프로토타입의 메서드를 호출할 수 있으므로 Employee 인스턴스는 Person 프로토타입의 모든 속성도 호출할 수 있습니다.
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
}
var zhang = new Employee("ZhangSan" , "man", "1234");
console.log(zhang.getName()); // "ZhangSan

위의 상속 구현은 매우 거칠고 많은 문제가 있습니다.
Employee 생성자와 프로토타입(이하 클래스라고 함)을 생성할 때 Person이 인스턴스화되는데 이는 부적절합니다.
Employee 생성자가 상위 클래스 Person의 생성자를 호출할 수 없어 오류가 반복됩니다. Employee 생성자에 이름 및 성별 속성 할당
Employee의 함수는 Person의 동일한 이름의 함수를 덮어쓰며 오버로딩 메커니즘이 없습니다(이것은 이전 것과 같은 유형 문제입니다). JavaScript 클래스를 만듭니다. 구문이 너무 단편적이고 C#/Java의 구문만큼 우아하지 않습니다.
생성자 속성에 포인팅 오류가 있는데, 이는 두 번째 기사에서 설명하겠습니다. 이 예는 3장에 나와 있습니다. 🎜>

JavaScript 상속 구현

JavaScript 자체에는 클래스와 상속이 완전히 구현되지 않았고 수동 구현에서도 많은 문제가 발생했기 때문에 이미 인터넷에서 이 어려운 작업을 구현한 사례가 많이 있습니다.

더글러스 크록포드 -

자바스크립트의 프로토타입 상속
• 더글러스 크록포드 - JavaScript의 고전적 상속
• John Resig - 간단한 JavaScript 상속
• Dean Edwards - JavaScript 상속을 위한 기본 클래스
• 시제품
• 무툴즈
• Extjs
• 이 시리즈 기사에서는 이러한 구현을 하나씩 심층적으로 분석하고 궁극적으로 JavaScript에서 클래스와 상속이 구현되는 방식을 심층적으로 이해할 것입니다.
다음 장에서는 이, 생성자, 프로토타입 등 클래스 구현에 관련된 지식을 소개하겠습니다.