Renewal·서른의 생활코딩

[Following Life Coding] JavaScript Object-Oriented Programming _11. Inheritance Between Objects

April 30, 2019·3 min read

cover image

JavaScript Object-Oriented Programming

Life Coding class link: https://opentutorials.org/module/4047/24626

Inheritance between objects - JavaScript Object-Oriented Programming

Class intro: In JavaScript, you can freely set up inheritance relationships between objects (instances). This lesson covers how to inherit via objects rather than classes. Lecture 1 introduces how JavaScript inheritance differs from class-based languages. Lecture 2 shows how to implement inheritance using __proto__. Code prototype-inheritance.js (changes) var superObj = {superVal:'super'} va

opentutorials.org

11. Inheritance between objects

1. Not all object-oriented is the same object-oriented.

Each language has its own ways of interpreting and implementing it. I tried to sketch out a comparison between Java and JavaScript as I understood it.. not sure it's exactly right.

2. Let's implement the example

2-1) Example setup

prototypeObject.js)

var superObject = { superVal:'super' }
var subObject = { subVal:'sub'}

console.log("superObject.superVal : ", superObject.superVal);
console.log("subObject.subVal : ", subObject.subVal);

Output:

2-2) step 01

prototypeObject.js)

var superObject = { superVal:'super' }
var subObject = { subVal:'sub'}

//# step 01
subObject.__proto__= superObject; 
// .__proto__ 프로퍼티(속성)을 통해 prototype link 제공 = superObject 지정 

console.log("subObject.subVal : ", subObject.subVal);

console.log("subObject.superVal : ", subObject.superVal); 
// prototype link 를 통해 superObject의 속성을 사용할 수 있다.

Output:

2-3) step 02

prototypeObject.js)

//prototypeObject

var superObject = { superVal:'super' }
var subObject = { subVal:'sub'}

//# step 01
subObject.__proto__= superObject; 
// .__proto__ 프로퍼티(속성)을 통해 prototype link 제공 = superObject 지정 

console.log("subObject.subVal : ", subObject.subVal);

console.log("subObject.superVal : ", subObject.superVal); 
// prototype link 를 통해 superObject의 속성을 사용할 수 있다.


//# step 02
subObject.superVal='sub';
console.log("superObject.superVal 2 : ", superObject.superVal); 
// 원래 값엔 변화가 없음 
//* prototype link로 제공받은 subObject.superVal의 값만 바꿨을 뿐 원본(superObject.superVal)을 바꾸지는 않았다.. 

console.log("subObject.superVal 2 : ", subObject.superVal);

Output:

* Note: __proto__ is not a standard. But it works in every browser.

2-4) The replacement for __proto__, Object.create(superObjectName)

prototypeObject.js)

var superObject = { superVal:'super' }

// as-is)
// var subObject = { subVal:'sub'}
// subObject.__proto__= superObject; 

// to-be)
var subObject = Object.create(superObject);
console.log("subObject : ", subObject);
subObject.subVal="sub";


// 동일한 코드 
console.log("subObject.subVal : ", subObject.subVal);
console.log("subObject.superVal : ", subObject.superVal); 

subObject.superVal='sub';
console.log("superObject.superVal 2 : ", superObject.superVal); 
console.log("subObject.superVal 2 : ", subObject.superVal);

Output:

3. Using the JavaScript debugger to check what's going on under the hood

prototypeObject.js)

var superObject = { superVal:'super' }

var subObject = Object.create(superObject);
console.log("subObject : ", subObject);

subObject.subVal="sub";

debugger;   // <- 브라우저가 이 명령어를 발견하면, 이 자리부터 '디버그 모드'로 변경된다. 

console.log("subObject.subVal : ", subObject.subVal);
console.log("subObject.superVal : ", subObject.superVal); 

subObject.superVal='sub';
console.log("superObject.superVal 2 : ", superObject.superVal); 
console.log("subObject.superVal 2 : ", subObject.superVal);

hello.html) - a new file; reference the JS file above and then run this one (double-click).

<html>
    <body>
        <script src="prototypeObject.js"></script>
    </body>
</html>

Run result - 1) Switching to debug mode: go to developer mode, then refresh.

Run result - 2) Using the watch panel on the right, you can track how the specified property values change.

Run result - 3) You can also compare values directly in the console below.

4. Implementing example 2

4-1) Object-to-object inheritance example: create two objects and inherit a specific value

(1) Using __proto__

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

var lee={
    name:'lee',
    first:10,
    second:20
}

lee.__proto__=kim;
console.log("lee : ",lee.sum());

(2) Using Object.create()

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

var lee = Object.create(kim);
lee.name='lee';
lee.first=10;
lee.second=20;

console.log("lee.sum() : ",lee.sum());

(3) Adding a function on the inherited object

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

var lee = Object.create(kim);
lee.name='lee';
lee.first=10;
lee.second=10;

lee.arg = function(){      // lee 고유의 메서드 추가하기 
    return lee.sum()/2;
}

console.log("lee.sum() : ",lee.sum());
console.log("lee.arg() : ",lee.arg());