[Following Saengko] JavaScript OOP _14: Inheritance through Constructors

JavaScript Object-Oriented Programming

Saengko class Link : https://opentutorials.org/module/4047/24630

 

Inheritance through Constructors - JavaScript Object-Oriented Programming

Class intro: This class is unnecessarily difficult. I recommend watching the much easier class-inheritance class that does the same thing. Of course you can watch this too. haha  Lecture 1, Lecture 2, Code constructor-inheritance.js (changes) function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } Person.prototype.sum

opentutorials.org

 

14. Inheritance through Constructors

1. Starting point,

Looking at the code below, you can see two function objects, Person and PersonPlus. The two function objects are made up of identical code except for the number of arguments. In this case, how can we write code more efficiently?

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second,third){
    //super(name, first, second);
    this.name = name;
    this.first = first;
    this.second = second
    this.third = third;
}
PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
//console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

 

2. Sharing properties inheritance  between objects?, call() example 

You can get a hint by referring to the earlier post 12. Objects and Functions. Of course you can also write it in class form and use extends, but this example is for learning a JavaScript-specific feature. In other words, let's find a solution using the function-based object approach.

As mentioned before, call() lets you pass in the object you need as an argument to set this.    <- tool function object.call(user function object)  

This example uses call() inside a function object. Aha! So,       <- written as tool function object.call(this).

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second, third){
    // Person(name, first, second); // 그냥 평범한 함수
    
    Person.call(this, name, first, second);  // this를 초기 인자로 던진다. + 필요한 인자
    // = super(name,first,second) 역할 수행 
    
    this.third = third;
}
PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
//console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

Output)

Up to this point we could get the average. The PersonPlus function object was able to inherit and use Person's properties (values), but since it cannot yet use Person's sum() method, the total sum is still not being calculated and that line is commented out.

 

3. Printing sum, inheriting one object from another (Method 1. __proto__ )

Since call() is not inheritance, PersonPlus could not access Person's sum(). Now let's connect Person and PersonPlus through inheritance. The example below uses  __proto__ , which is how an object inherits another object in JavaScript.

However, looking closely at the code below, we write PersonPlus.prototype.__proto__=Person.prototype; rather than PersonPlus.__proto__=Person;. Earlier, the PersonPlus function did Person.call() so it could temporarily use Person's properties — so there's no need to inherit everything. We only want to inherit the sum method that was created on Person.prototype into PersonPlus.prototype. In short, take only what you need.

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second, third){
    // Person(name, first, second); // 그냥 평범한 함수, 앞에 new 도 없다 
    Person.call(this, name, first, second);  // = super(name,first,second) 역할 수행 
    this.third = third;
}
PersonPlus.prototype.__proto__=Person.prototype; // link, 단 비 표준이다. 
PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

Output)

 

4. Printing sum, inheriting one object from another (Method 2. refining __proto__ to its 'standard form')

Let's use the standard-recommended Object.create(). The example below is written as the inheriting object.prototype = Object.create(the inherited object.prototype). 

 

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second, third){
    Person.call(this, name, first, second);  
    this.third = third;
}
//PersonPlus.prototype.__proto__=Person.prototype; 
PersonPlus.prototype = Object.create(Person.prototype); //새로운 객체를 생성해서 연결 

PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

Output) The result is the same as __proto__, but there's one issue. 

 

5. However 

Object.create() is a constructor that creates a new object. In other words, that code creates a new object from Person.prototype, and it overwrites it onto PersonPlus.prototype. So PersonPlus.prototype.arg() must be written below Object.create(). (By contrast, __proto__ inherits only the specified attributes.)

And if you print PersonPlus's constructor as in the code below, you'll see that Person is printed instead of PersonPlus.

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second, third){
    Person.call(this, name, first, second);  
    this.third = third;
}

PersonPlus.prototype = Object.create(Person.prototype); //새로운 객체를 생성해서 연결 

PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

//그런데.. 만약, 
console.log("kim constructor : ", kim.constructor);

Output)

This is because during the PersonPlus.prototype = Object.create(Person.prototype) step, Person.prototype was overwritten onto PersonPlus.prototype as-is.

 

6. Alternative

In short, when we copied so we could use sum() that was recorded on Person's prototype object, the constructor inside Person's prototype object came along for the ride. 

So we needed to overwrite the constructor in PersonPlus's prototype once more with the original PersonPlus function object. This somewhat makeshift-looking approach can be understood through the previously posted 13. prototype and __proto__. 

To summarize again, 

When you create a function object A, its A's prototype object is automatically generated, and they reference each other through the property_prototype and constructor. In other words, the created function object has a property_prototype, and the prototype object that was automatically generated paired with this function object in the beginning has a constructor.

In our example, function object A recorded only properties like name and numbers, while A's prototype object used property_prototype to record methods like sum() or arg().

In this situation, function object A is using function object B via call().

And to use sum() on function object B's prototype, function object A copied function object B's prototype and overwrote its own prototype with it. Now, as noted before, the auto-generated prototype object has a constructor — that's why the issue above arose.

function Person(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second
}
Person.prototype.sum=function(){
    return this.first+this.second;
}

function PersonPlus(name, first, second, third){
    Person.call(this, name, first, second);  
    this.third = third;
}

PersonPlus.prototype = Object.create(Person.prototype); 
PersonPlus.prototype.constructor = PersonPlus;

PersonPlus.prototype.arg=function(){
    return (this.first+this.second+this.third)/3;
}

var kim = new PersonPlus('kim',10,20,30);
console.log("kim 합계 : ", kim.sum());
console.log("kim 평균 : ", kim.arg());

// 정상 출력 
console.log("kim constructor : ", kim.constructor);

Output)

 

 

7. Before wrapping up 

When writing code, you sometimes write everything from scratch, but there are also many cases where multiple people collaborate or new features are added to existing code. In those situations, egoing shows a way to find out a specific object's constructor using the browser's developer tools. 

Code entered in the console)

var d = new Date();
Date.prototype.constructor === Date 
Date === d.constructor 

 

Applying this, when you use an ABC object that someone else created, you can find out which factory (function object or class) it was made in, and what equipment that factory has available. 

The end~

 

8. Wrapping up 

As the examples showed, when using prototype-oriented JavaScript function objects, you can run into various complicated? issues. That's why when using objects, using class can help both with collaboration and with your own maintenance. Still, egoing says that to grow from beginner to intermediate you need to have the concept and understanding of JavaScript's core operating principle — prototype orientation. 

Personally, while studying the content of 13. prototype and __proto__, which explains the prototype orientation that is JavaScript's core operating principle, I found it overlapped with the JVM structure I learned back when I was studying beginner JAVA in the past. Drawing the JVM structure helps you understand how objects get created, called, referenced, and executed; the content of 13. prototype and __proto__ felt like it was doing a similar thing — explaining JavaScript's basic structure.

Of course, what I studied about prototype and __proto__ is only a very basic taste — in the spirit of Saengko, summarized and summarized again. By no means do I think I've understood it all. But thanks to this taster, I've started to get curious about the deep, foundational places of JavaScript. With a fluttering heart and the hope of sailing those deep waters someday, I'll wrap up this Saengko session here.

Really, the end~

 

 

 

Reference Link_ JVM and Memory Structure http://www.libqa.com/wiki/76

 

Social Q&A LibQA

libqa is a social-based Q&A knowledge-sharing Wiki platform built by the Glider open-source team.

www.libqa.com

Reference Link_ Java the Definitive Guide, Chapter 6 Object-Oriented Concepts https://slidesplayer.org/slide/15925263/

 

Java the Definitive Guide Chapter 6, Object-Oriented Concepts I-2 Java Definitive Guide lecture by Namkoong Seong - ppt download

Object-Oriented Concepts I-1 OO Concepts I-2 OO Concepts I-3 Java 1. What is an object-oriented language? 2. Classes and objects Definitive Guide Chapter 6. OO Concepts I 1. What is OO language? OO Concepts I-1 2. Classes and objects 3. Variables and methods OO Concepts I-2 4. Method overloading This is the second lecture of Chapter 6 OO Concepts 1. I'll cover variables, methods, and method overloading. 5. Constructors OO Concepts I-3 6. Initializing variables

slidesplayer.org