객체 간의 상속

수업소개

JavaScript는 객체(인스턴스)와 객체 간의 상속 관계를 자유롭게 설정할 수 있습니다. 이 수업에서는 클래스가 아닌 객체를 통해서 상속하는 방법을 알아봅니다. 

 

 

 

강의1

자바스크립트의 상속이 클래스 기반 언어와 어떻게 다른지 소개해드립니다. 

 

 

 

강의2

__proto__를 이용해서 상속을 구현하는 방법을 소개합니다. 

 

 

 

코드

prototype-inheritance.js (변경사항) 

var superObj = {superVal:'super'}
var subObj = {subVal:'sub'}
subObj.__proto__ = superObj;
console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal =>', superObj.superVal);

 

 

 

강의3

Object.create를 이용해서 __proto__를 대체하는 방법을 소개합니다. 

 

 

 

코드

prototype-inheritance.js (변경사항)

var superObj = {superVal:'super'}
// var subObj = {subVal:'sub'}
// subObj.__proto__ = superObj;
var subObj = Object.create(superObj);
subObj.subVal = 'sub';
debugger;
console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal =>', superObj.superVal);

 

 

 

강의4

기존의 예제를 상속으로 구현하는 방법을 소개합니다. 

 

 

 

 

코드

prototype-inheritance.js (변경사항)

 

var superObj = {superVal:'super'}
// var subObj = {subVal:'sub'}
// subObj.__proto__ = superObj;
var subObj = Object.create(superObj);
subObj.subVal = 'sub';
debugger;
console.log('subObj.subVal =>', subObj.subVal);
console.log('subObj.superVal =>', subObj.superVal);
subObj.superVal = 'sub';
console.log('superObj.superVal =>', superObj.superVal);

var kim = {
    name:'kim',
    first:10, second:20,
    sum:function(){return this.first+this.second}
}

// var lee = {
//     name:'lee',
//     first:10, second:10, 
//     avg:function(){
//         return (this.first+this.second)/2;
//     }
// }
// lee.__proto__ = kim;

var lee = Object.create(kim);
lee.name = 'lee';
lee.first = 10;
lee.second = 10;
lee.avg = function(){
    return (this.first+this.second)/2;
}
console.log('lee.sum() : ', lee.sum());
console.log('lee.avg() : ', lee.avg());