-
자바스크립트의 상속 (inheritance)프론트엔드/JavaScript 2020. 9. 14. 14:35
상속이란?
자바에서 상속은 클래스 단위로 이루어졌다.
자손 클래스는 'extend'를 통해 부모 클래스의 속성값을 물려 받았다.
자바 스크립트에서도 상속은 비슷한 의미로 쓰인다.
하지만 그 대상이 다르다. 자바 스크립트에서 상속은 클래스가 아닌 객체를 기준으로 이뤄진다.
왜 객체?
자바 스크립트는 과거 클래스가 없을 때부터 객체를 중심으로 프로그램을 짰다.
그래서 클래스 대신 객체를 상속하는 것으로 클래스를 대신했다.
그리고 이 중심에는 'prototype'이라는 속성이 있다.
프로토타입(proto type)
프로토타입(proto type)이란 자바 스크립트에 존재하는 모든 객체가 가지는 속성값을 말한다.
이 속성은 객체로서 상속 과정에 필요한 다양한 정보를 담고 있고 사용자가 추가, 수정할 수 있다.
그리고 모든 상속은 이 프로토타입을 기준으로 이뤄진다.
프로토타입의 상속
<body> <script> function Person(name){ // Person 객체 생성 this.name = name; } Person.prototype.introduce = function(){ // Person.prototype.introduce에 함수를 저장 return "나는 "+this.name+"입니다."; } var p1 = new Person("영수"); // Person 객체 생성 console.log(p1.introduce()); // Person 객체 p1으로 introduce에 저장된 함수 호출 function Student(name){ // student 객체 생성 this.name = name; } Student.prototype = new Person(); // Student.prototype 속성에 new와 함께 Person 객체 생성을 하도록 저장 var s1 = new Student("철수"); // Student 객체 생성 console.log(s1.introduce()); // Student으로 Person에서 만들었던 함수 introduce 호출 </script> </body>다음은 프로토타입 상속의 예시다.
'Person'이라는 객체를 만들어주고 객체에 'introduce'라는 함수를 추가해줬다.
'Student'라는 객체를 만들어주고, 해당 객체의 프로토타입에 'new Person'이라는 'Person' 객체의 객체 생성자를 저장했다.
그 결과는 'Student' 객체를 만들 때 프로토타입이 속성이 생성되는데 이 프로토타입에 'Person' 객체의 생성자가 저장되있어서 'Student'를 통해 'Person'의 프로퍼티와 함수를 사용할 수 있게 된 것이다.
프로토타입 상속 과정
<body> <script> function First(){} First.prototype.test = "상속"; // first 객체의 프로토타입에 프로퍼티 test 저장 function Second(){} Second.prototype = new First(); //Second의 프로토타입에 first 객체 생성자 추가 function Third(){} Third.prototype = new Second(); //Third의 프로토타입에 Second 객체 생성자 추가 var test = new Third(); // third의 객체 생성 console.log(test.test); // third의 객체로 Fisrt 프로토 타입에 저장한 프로퍼티 test출력 </script> </body>직접적인 상속 과정이 복잡하다면 위 코드를 보면 더 쉽게 이해가 가능하다.
기본적으로 자바 스크립트의 모든 객체는 프로토타입이라는 객체 형태의 속성 값을 생성과 동시에 부여 받게 된다.
그리고 이 프로토타입이란 속성에 상속받을 생성자를 부여함으로써 객체를 새로 생성할 때마다 상속 받은 생성자를 같이 생성하기 때문에 상속을 통해 받은 프로퍼티와 메소드를 사용할 수 있는 것이다.
위의 코드를 해석하자면 다음과 같다.
'Third' 객체의 프로토 타입은 Second의 생성자를 저장했다.
'Second' 객체의 프로토 타입은 First의 생성자를 저장했다.
즉 'Third' 객체를 새로 생성하게 될 때 마다 프토로타입에 저장된 생성자를 통해 'Second'와 'First'의 객체까지 생성해서 사용할 수 있게 만드는 것이다.
이렇게 상속을 통해 이뤄지는 프로토타입의 연쇄 작용을 프로토타입 체인이라 한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트의 클로저(Closure) (0) 2020.09.15 자바스크립트 Object 객체 (0) 2020.09.14 자바스크립트 this의 정의 (0) 2020.09.14 자바스크립트의 전역 객체(Global object) (0) 2020.09.14 자바 스크립트의 객체(Object) (0) 2020.09.11