JavaScript 상속에 대한 자세한 설명 (1)_js 객체지향
객체 지향 및 객체 기반
거의 모든 개발자는 객체지향 언어(예: C, C#, Java) 개발 경험이 있습니다. 전통적인 객체 지향 언어에는 클래스와 인스턴스라는 두 가지 매우 중요한 개념이 있습니다. 클래스는 사물 클래스의 공개 동작과 메서드를 정의하며 인스턴스는 클래스의 특정 구현입니다. 또한 객체지향 프로그래밍에는 캡슐화, 상속, 다형성이라는 세 가지 중요한 개념이 있다는 것도 알고 있습니다.
그러나 JavaScript의 세계에서는 이러한 기능이 모두 존재하지 않는 것 같습니다. 왜냐하면 JavaScript 자체는 객체 지향 언어가 아니라 객체 기반 언어이기 때문입니다. 여기에는 몇 가지 흥미로운 기능이 있습니다. 예를 들어 다음 예와 같이 JavaScript의 모든 것은 문자열, 배열, 날짜, 숫자, 심지어 함수까지 포함하는 객체입니다.
// 定义一个函数 - add<BR> function add(a, b) {<BR> add.invokeTimes++;<BR> return a + b;<BR> }<BR> // 因为函数本身也是对象,这里为函数add定义一个属性,用来记录此函数被调用的次数<BR> add.invokeTimes = 0;<br><br> add(1 + 1);<BR> add(2 + 3);<BR> console.log(add.invokeTimes); // 2<BR>
객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 만듭니다. 하지만 JavaScript의 모든 것은 객체입니다.
그렇다면 사용자 정의 객체를 만드는 방법은 무엇일까요?이를 위해서는 프로토타입이라는 또 다른 개념을 도입해야 합니다. 새로 생성된 사용자 정의 개체는 모두 이 템플릿(프로토타입)의 복사본입니다(실제로는 복사본이 아니지만 링크는 보이지 않습니다). 그리고 사본 같은 느낌이 듭니다).
프로토타입을 통해 사용자 정의 개체를 생성하는 예를 살펴보겠습니다.
여기서 Person 함수를 생성자라고 부릅니다. 이는 사용자 정의 개체를 생성하는 함수입니다. JavaScript는 생성자와 프로토타입을 통해 클래스의 기능을 시뮬레이션하는 것을 볼 수 있습니다.
// 构造函数<BR> function Person(name, sex) {<BR> this.name = name;<BR> this.sex = sex;<BR> }<BR> // 定义Person的原型,原型中的属性可以被自定义对象引用<BR> Person.prototype = {<BR> getName: function() {<BR> return this.name;<BR> },<BR> getSex: function() {<BR> return this.sex;<BR> }<BR> }<BR>
var zhang = new Person("ZhangSan", "man");<BR> console.log(zhang.getName()); // "ZhangSan"<br><br> var chun = new Person("ChunHua", "woman");<BR> console.log(chun.getName()); // "ChunHua"<BR>
빈 개체(new Object())를 만듭니다.
- Person.prototype의 속성(키-값 쌍)을 이 빈 객체에 복사합니다(앞서 언급했듯이 내부 구현은 복사본이 아니라 숨겨진 링크입니다).
- this 키워드를 통해 이 개체를 생성자에 전달하고 생성자를 실행합니다.
- 이 개체를 zhang 변수에 할당합니다.
프로토타입 템플릿이 인스턴스화된 객체에 복사되지 않고 연결 방식임을 증명하려면 다음 코드를 참조하세요.
JavaScript 내에 구현된 이 숨겨진 프로토타입 링크는 JavaScript가 의존하는 따뜻한 토양이자 시뮬레이션 구현 상속의 기반이기도 합니다.
function Person(name, sex) {<BR> this.name = name;<BR> this.sex = sex;<BR> }<BR> Person.prototype.age = 20;<br><br> var zhang = new Person("ZhangSan", "man");<BR> console.log(zhang.age); // 20<BR> // 覆盖prototype中的age属性<BR> zhang.age = 19;<BR> console.log(zhang.age); // 19<BR> delete zhang.age;<BR> // 在删除实例属性age后,此属性值又从prototype中获取<BR> console.log(zhang.age); // 20<BR>
JavaScript에서 단순 상속을 어떻게 구현하나요?
다음 예에서는 Person으로부터 프로토타입 프로토타입의 모든 속성을 상속하는 직원 클래스 Employee를 생성합니다.
function Employee(name, sex, employeeID) {<BR> this.name = name;<BR> this.sex = sex;<BR> this.employeeID = employeeID;<BR> }<BR> // 将Employee的原型指向Person的一个实例<BR> // 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。<BR> Employee.prototype = new Person();<BR> Employee.prototype.getEmployeeID = function() {<BR> return this.employeeID;<BR> };<br><br> var zhang = new Employee("ZhangSan", "man", "1234");<BR> console.log(zhang.getName()); // "ZhangSan<BR>
위의 상속 구현은 매우 거칠고 많은 문제가 있습니다.
Employee 생성자와 프로토타입(이하 클래스라고 함)을 생성할 때 Person이 인스턴스화되는데 이는 부적절합니다.
- Employee의 생성자는 상위 클래스 Person의 생성자를 호출할 수 없으므로 Employee 생성자에 name 및 sex 속성이 반복적으로 할당됩니다.
- Employee의 함수는 Person의 동일한 이름의 함수를 덮어쓰며 오버로딩 메커니즘이 없습니다(이것은 이전 문제와 동일한 유형의 문제입니다).
- JavaScript 클래스를 생성하는 구문은 너무 단편적이고 C#/Java의 구문만큼 우아하지 않습니다.
- 구현시 생성자 속성에 포인팅 오류가 있는데, 이에 대해서는 두 번째 글에서 다루겠습니다.
- 이 예시는 3장에서 개선하겠습니다.
JavaScript 상속 구현
JavaScript 자체에는 클래스와 상속이 완전히 구현되지 않았고 수동 구현에서도 많은 문제가 발생했기 때문에 이미 인터넷에서 이 어려운 작업을 구현한 사례가 많이 있습니다.
더글러스 크록포드 -
- 자바스크립트의 프로토타입 상속 더글러스 크록포드 -
- JavaScript의 고전적 상속 John Resig -
- 간단한 JavaScript 상속 Dean Edwards -
- JavaScript 상속을 위한 기본 클래스
- 시제품
- 무툴즈
- Extjs 이 시리즈 기사에서는 이러한 구현을 하나씩 심층적으로 분석하고 궁극적으로 JavaScript에서 클래스와 상속이 구현되는 방식을 심층적으로 이해할 것입니다.
다음 장에서는 이, 생성자, 프로토타입 등 클래스 구현에 관련된 지식을 소개하겠습니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











함수 상속에서는 "기본 클래스 포인터" 및 "파생 클래스 포인터"를 사용하여 상속 메커니즘을 이해합니다. 기본 클래스 포인터가 파생 클래스 개체를 가리키는 경우 상향 변환이 수행되고 기본 클래스 멤버에만 액세스됩니다. 파생 클래스 포인터가 기본 클래스 개체를 가리키는 경우 하향 캐스팅이 수행되므로(안전하지 않음) 주의해서 사용해야 합니다.

상속과 다형성은 클래스 결합에 영향을 줍니다. 상속은 파생 클래스가 기본 클래스에 종속되기 때문에 결합을 증가시킵니다. 다형성은 객체가 가상 함수와 기본 클래스 포인터를 통해 일관된 방식으로 메시지에 응답할 수 있기 때문에 결합을 줄입니다. 모범 사례에는 상속을 적게 사용하고, 공용 인터페이스를 정의하고, 기본 클래스에 데이터 멤버를 추가하지 않고, 종속성 주입을 통해 클래스를 분리하는 것이 포함됩니다. 다형성과 종속성 주입을 사용하여 은행 계좌 애플리케이션에서 결합을 줄이는 방법을 보여주는 실제 예입니다.

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

상속 오류 디버깅 팁: 올바른 상속 관계를 확인하세요. 디버거를 사용하여 코드를 단계별로 실행하고 변수 값을 검사합니다. 가상 수정자를 올바르게 사용했는지 확인하세요. 숨겨진 상속으로 인해 발생하는 상속 다이아몬드 문제를 살펴봅니다. 추상 클래스에서 구현되지 않은 순수 가상 함수를 확인하세요.

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

다음 상황에서는 C++ 함수 상속을 사용하면 안 됩니다. 파생 클래스에 다른 구현이 필요한 경우 다른 구현을 사용하는 새 함수를 만들어야 합니다. 파생 클래스에 함수가 필요하지 않은 경우 빈 클래스로 선언하거나 구현되지 않은 전용 기본 클래스 멤버 함수를 사용하여 함수 상속을 비활성화해야 합니다. 함수에 상속이 필요하지 않은 경우 코드 재사용을 위해 다른 메커니즘(예: 템플릿)을 사용해야 합니다.

C++ 함수 상속에 대한 자세한 설명: "is-a"와 "has-a" 사이의 관계를 마스터하세요. 함수 상속이란 무엇인가요? 함수 상속은 파생 클래스에 정의된 메서드를 기본 클래스에 정의된 메서드와 연결하는 C++의 기술입니다. 파생 클래스가 기본 클래스의 메서드에 액세스하고 재정의할 수 있도록 하여 기본 클래스의 기능을 확장합니다. "is-a" 및 "has-a" 관계 함수 상속에서 "is-a" 관계는 파생 클래스가 기본 클래스의 하위 유형, 즉 파생 클래스가 기본 클래스의 특성과 동작을 "상속"함을 의미합니다. 기본 클래스. "has-a" 관계는 파생 클래스에 기본 클래스 개체에 대한 참조 또는 포인터가 포함되어 있음을 의미합니다. 즉, 파생 클래스가 기본 클래스 개체를 "소유"합니다. 구문다음은 함수 상속을 구현하는 방법에 대한 구문입니다. classDerivedClass:pu

객체 지향 프로그래밍이란 무엇입니까? 객체 지향 프로그래밍(OOP)은 실제 엔터티를 클래스로 추상화하고 객체를 사용하여 이러한 엔터티를 나타내는 프로그래밍 패러다임입니다. 클래스는 객체의 속성과 동작을 정의하고, 객체는 클래스를 인스턴스화합니다. OOP의 가장 큰 장점은 코드를 더 쉽게 이해하고 유지 관리하며 재사용할 수 있다는 것입니다. OOP의 기본 개념 OOP의 주요 개념에는 클래스, 개체, 속성 및 메서드가 포함됩니다. 클래스는 객체의 속성과 동작을 정의하는 객체의 청사진입니다. 객체는 클래스의 인스턴스이며 클래스의 모든 속성과 동작을 갖습니다. 속성은 데이터를 저장할 수 있는 개체의 특성입니다. 메소드는 객체의 데이터에 대해 작동할 수 있는 객체의 함수입니다. OOP의 장점 OOP의 주요 장점은 다음과 같습니다. 재사용성: OOP는 코드를 더 많이 만들 수 있습니다.
