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에서 클래스 및 상속 시뮬레이션

객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 만듭니다. 하지만 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") 코드가 실행되면 실제로 내부적으로 다음 작업이 수행됩니다.

    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에서 클래스와 상속이 구현되는 방식을 심층적으로 이해할 것입니다.

다음 장에서는 이, 생성자, 프로토타입 등 클래스 구현에 관련된 지식을 소개하겠습니다.