TIL - 004 [JS]OOP in JavaScript, Prototype Chain

kimjinsub1217ยท2021๋…„ 4์›” 9์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
4/8
post-thumbnail

20201๋…„ 04์›” 09์ผ ๋‚ ์”จ: โ˜€๏ธ(๋ง‘์Œ)

๐Ÿ“Œ๊ฐ์ฒด๋ž€?

๊ฐ์ฒด๋Š” ํ˜„์‹ค์„ธ๊ณ„์—์„œ ์ž์‹ ์˜ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ๋งํ•œ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด ์ž๋™์ฐจ,์‚ฌ๋žŒ,์™€ํ”Œ์ด ์žˆ๋‹ค.
์ž๋™์ฐจ ๊ฐ์ฒด์ธ ๊ฒฝ์šฐ ์†์„ฑ์€ ๋ธŒ๋žœ๋“œ,์ƒ‰์ƒ,์ฐจ์˜ ํฌ๊ธฐ,์†๋„ ๋“ฑ์œผ๋กœ ์ƒ๊ฐํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“ŒObject Oriented Programming

๊ฐ์ฒด ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ ๊ฐ์ฒด์˜ ๊ด€์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด ์™€ํ”Œ์„ ๋งŒ๋“ค ๋•Œ ์™€ํ”Œ์„ ์ƒˆ๋กœ ๋ฐœ๋ช…ํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ์„ค๊ณ„๋„๋งŒ ์žˆ์œผ๋ฉด ์‰ฝ๊ฒŒ ์™€ํ”Œ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.์—ฌ๊ธฐ์„œ ์„ค๊ณ„๋„๋Š” ํด๋ž˜์Šค๊ฐ€ ๋œ๋‹ค.
์ •๋ฆฌํ•˜์ž๋ฉด ํด๋ž˜์Šค๋Š” ๊ฐ์ฒด๋ฅผ ์ฐ์–ด๋‚ด๋Š” ํ‹€์ด๊ณ ,ํ‹€์„ ๊ฐ€์ง€๊ณ  ๊ฐ์ฒด์— ํ•ด๋‹นํ•˜๋Š” ์™€ํ”Œ์„ ์ฐ์–ด๋‚ด๊ธฐ๋งŒ ํ•˜๋ฉด ์‰ฝ๊ฒŒ ์™€ํ”Œ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋žจ์—์„œ๋Š” 4๊ฐ€์ง€ ์†์„ฑ์ด ์žˆ๋‹ค.์บก์Šํ™”, ์ถ”์ƒํ™”, ์ƒ์†, ๋‹คํ˜•์„ฑ์ด ์žˆ๋‹ค.

์บก์Šํ™”:์„œ๋กœ ๊ด€๋ จ๋œ ๋ฐ์ดํ„ฐ์™€ ๊ธฐ๋Šฅ์„ ์บก์Š์— ๋„ฃ์–ด ํ•˜๋‚˜๋กœ ๋ฌถ๋Š”๋‹ค๊ณ  ํ•ด์„œ ์บก์Šํ™”๋ผ๊ณ  ํ•œ๋‹ค.์€๋‹‰์˜ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ(๊ตฌํ˜„์€ ์ˆจ๊ธฐ๊ณ  ๋™์ž‘์€ ๋ณด์—ฌ์ค€๋‹ค.) ์–ธ์ œ๋“ ์ง€ ๊ตฌํ˜„์„ ๊ณ ์น  ์ˆ˜ ์žˆ๋Š” ๋Š์Šจํ•˜๊ฒŒ ๊ฒฐํ•ฉ๋˜์–ด ์žˆ๋‹ค.

์ถ”์ƒํ™”:๋ถˆํ•„์š”ํ•œ ์ •๋ณด๋Š” ์ค„์—ฌ ๊ผญ ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

์ƒ์†:๊ธฐ์กด์— ๋งŒ๋“ค์–ด ๋†“์€ ๊ธฐ๋Šฅ์„ ๊ทธ๋Œ€๋กœ ๋ฌผ๋ ค๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

๋‹คํ˜•์„ฑ:๊ฐ™์€ ์ด๋ฆ„์˜ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ์š”์†Œ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ ๋งŒ๋“œ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.

๐Ÿ“ŒPrototype์€ ๋ฌด์—‡์ด๊ณ  ์™œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€?

Prototype์ด๋ž€?์‚ฌ์ „์  ์˜๋ฏธ๋กœ๋Š” ์ƒ์‚ฐ์„ ํ•˜๊ธฐ ์ „ ๋ฏธ๋ฆฌ ์ œ์ž‘ํ•ด๋ณด๋Š” ์›ํ˜• ๋˜๋Š” ์‹œ์ œํ’ˆ์ด๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๊ณผ ๋‹ฌ๋ฆฌ ๋ชจ๋“  ํ•จ์ˆ˜๋Š” Prototype ์†์„ฑ์œผ๋กœ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง„๋‹ค.
๋ชจ๋“  ๊ฐ์ฒด๋Š” proto ์†์„ฑ์„ ๊ฐ€์ง€๋Š”๋ฐ ์ด ์†์„ฑ์€ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ ํ•จ์ˆ˜์˜ prototype ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.๊ทธ๋ž˜์„œ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ํƒ€์ž…์„ ์ •์˜ํ•œ๋‹ค. ๊ฒฐ๊ตญ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์„ ์ด์šฉํ•œ ์ƒ์†์ด ์ด๋ฃจ์›Œ์ง„๋‹ค.


๊ฐ์ฒด์— ์ž์‹ ์ด proto๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ .hasOwnProperty ํ†ตํ•ด์„œ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

ํ”„๋กœํ† ํƒ€์ž…์˜ ์žฅ์ 

1.๋ฉ”๋ชจ๋ฆฌ ๋ถ€๋ถ„์—์„œ ์ด์ ์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ๋ฉ”์†Œ๋“œ๋ฅผ ๊ณต์œ ํ•ด์„œ 1๋ฒˆ๋งŒ ๋ฉ”์†Œ๋“œ๋ฅผ ์ฐจ์ง€ํ•œ๋‹ค.

2.ํด๋ž˜์Šค ๋ฐฉ์‹๋ณด๋‹ค ๊ฐ„๊ฒฐํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋™์ž‘์›๋ฆฌ

๋นผ๋นผ๋กœ, ๋ฐฅ, ํ”ผํด ์•ˆ์— ๊ณตํ†ต์ ์œผ๋กœ eat()์ด ๋“ค์–ด๊ฐ€ ์žˆ๋Š”๋ฐ ๋จน์„ ์ˆ˜ ์žˆ๋Š”๊ฒŒ ๋Š˜์–ด๋‚˜๋ฉด ๊ณ„์† eat์„ ํ•ด์ค˜์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ proto ์ด์šฉํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐ”๊ฟ”์ค„ ์ˆ˜ ์žˆ๋‹ค.

์ƒ์†์ด๋ผ๋Š” ๊ฐœ๋…์œผ๋กœ proto ํ†ตํ•ด์„œ ๋ถˆ ํ•„์š”ํ•œ ์ฝ”๋“œ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”ผํด์ด๋ผ๋Š” ๊ฐ์ฒด์— ์ƒ‰๊น” ๊ทธ๋ฆฐ์„ ๋ณด์—ฌ์ฃผ๊ณ  proto ํƒ€์ž… ์—ฐ๊ฒฐ์„ ์•ˆํ–ˆ์„ ๋•Œ Pickle.box ํ–ˆ์„๋•Œ ์—ฐ๊ฒฐ์ด ์•ˆ๋˜์–ด์žˆ์–ด undefind ๊ฒฐ๊ณผ๊ฐ’์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. ๋ฐ‘ ์ค„์—

Pickle.__proto__ = Pepero;

์ฝ”๋“œ๋ฅผ ์ ์–ด ๋‹ค์‹œ Pickle.box ํ–ˆ์„ ๋•Œ box:1 ๊ฒฐ๊ณผ ๊ฐ’์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.

๊ฒฐ๊ณผ์ ์œผ๋กœ ๋จผ์ € Pickle์— ๋ฐ•์Šค๊ฐ€ ์žˆ๋‚˜ ์ฐพ์•„๋ณด๊ณ  ์—†์œผ๋ฉด ____proto____ํ†ตํ•ด ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š” Pepero์— ๋“ค์–ด๊ฐ€ box๋ฅผ ์ฐพ์•„ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.
์ด ๊ณผ์ •์„ ํ†ตํ•ด Prototype Chain์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ______proto______, constructor, prototype ์ด ๊ฐ๊ฐ ์–ด๋–ค ๊ด€๊ณ„

  • prototype : ํ•จ์ˆ˜์— ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ
  • __proto__ : ์ธ์Šคํ„ด์Šค์— ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ
  • constructor : ์ธ์Šคํ„ด์Šค๊ฐ€ ์ดˆ๊ธฐํ™”๋  ๋•Œ ์‹คํ–‰ํ•˜๋Š” ํ•จ์ˆ˜
  • ์‹คํ–‰๊ณผ์ • 1

    function Car(brand, name, color) { //Car === class
      this.brand = brand; //this ๊ฐ์ฒด: avante === this
      this.name = name;
      this.color = color;
    } // constructor(์ƒ์„ฑ์ž) ํ•จ์ˆ˜
    
    Car.prototype.dirve = function() {//prototype ๊ฐ์ฒด:์†์„ฑ,๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Œ
      console.log(this.name + '๊ฐ€ ์šด์ „์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค');
    }
    let avante = new Car('hyundai', 'avante', 'black'); avante instnce์— ์†์„ฑ ๋„ฃ๊ธฐ
    avante.color; // black
    avante.dirve(); // avante๊ฐ€ ์šด์ „์„ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

    ์‹คํ–‰๊ณผ์ • 2

    var Human = function(name){
    this.name =name;
    }
    
    Human.prototype.sleep = function(){};
    
    var steve = new Human('steve');

    ๊ทธ๋ฆผ์—์„œ steve.sleep ๊ณผ Human.prototype.sleep์˜ ๊ด€๊ณ„๋Š” prototype chain ์ž…๋‹ˆ๋‹ค.

    ์‹คํ–‰๊ณผ์ • 3

    var Array = function(location){
    	[native code]
      }
    Array.prototype.push = function(){};
    Array.prototype.slice = function(){};
    
    var arr = new Array();
     

    Array๋ฅผ ํ†ตํ•ด์„œ๋„ prototype์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

    ์‹คํ–‰๊ณผ์ • 4

    var Human = function(name){
    	this.name = name;
    }
    
    Human.prototype.sleep = function(){};
    
    var steve = new Human('steve');
    steve.toString();//[object Object]

    steve.toString();์—์„œ toString() ๋ฉ”์†Œ๋“œ๋ฅผ ๋งŒ๋“ ์  ์—†๋Š”๋ฐ ์ž‘๋™์ด ๋œ๋‹ค. ๊ทธ ์ด์œ ๋Š” ๊ทธ๋ฆผ์—์„œ ์ฒ˜๋Ÿผ prototype chain์ด ๋˜์„œ .proto ์ด์šฉํ•ด ์œ„๋กœ ํƒ์ƒ‰์„ ํ•˜๋‹ค๋ณด๋ฉด toString()๊ฐ€ ์ •์˜๊ฐ€ ๋˜์–ด ์žˆ๋‹ค.

    ์ฝ”๋“œ๋ฅผ ์ณ๋ณด๋ฉด ๊ทธ๋ฆผ์ฒ˜๋Ÿผ ๋‚˜ํƒ€๋‚œ๋‹ค.

    ์‹คํ–‰๊ณผ์ • 5

    var Human = function(name){//๋ถ€๋ชจ๊ฐ์ฒด
    	this.name = name;
    }
    Human.prototype.sleep = function(){};
    
    var steve = new Human('steve');
    
    var Student = function(name){//์ž์‹๊ฐ์ฒด
    }
    student.prototype.learn = function(){};
    
    var john = new Student('John');
    john.learn();
    john.sleep();


    ์œ„์— ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ human ๋ถ€๋ชจ ๊ฐ์ฒด๋ฅผ ์–ด๋–ป๊ฒŒ Student ์ž์‹๊ฐ์ฒด์— ์ƒ์†์„ ๊ตฌํ˜„ํ• ๊นŒ?

    consturctor๋ฅผ ์ด์šฉํ•ด ์ƒ์†์„ ์ •ํ™•ํžˆ ๋งŒ๋“ค์–ด ์ฃผ๋ฉด ๋œ๋‹ค.

    ๊ทธ๋ฆผ์„ ๋ฐ”ํƒ•์œผ๋กœ ๋‹ค์‹œ ์ฝ”๋“œ๋ฅผ ์งœ๋ชจ๋ฉด

    var Human = function(name){//๋ถ€๋ชจ๊ฐ์ฒด
    	this.name = name;
    }
    Human.prototype.sleep = function(){
    	console.log(this.name + 'is sleeping...')
    };
    
    var steve = new Human('steve');
    
    var Student = function(name){//์ž์‹๊ฐ์ฒด
    }
    
    Student.prototype = Object.create(Human.prototype);
    Student.prototype.consturctor = Student;
    Student.prototype.learn = function(){};
    
    var john = new Student('John');
    john.learn();
    john.sleep();

    ์ด๋ ‡๊ฒŒ ๋œ๋‹ค. ํ•˜์ง€๋งŒ new ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•ด consturctor ํ• ๋•Œ consturctor๊ฐ€ Human๊นŒ์ง€ ์ „๋‹ฌ์ด ์•ˆ๋œ๋‹ค. ๊ทธ๋‹ˆ๊น Human์•ˆ์— ์žˆ๋Š” this๊ฐ€ Undefined๊ฐ€ ๋œ๋‹ค. ๊ทธ ํ•ด๊ฒฐ๋ฒ•์œผ๋กœ .call์„ ์ด์šฉํ•ด Student์—์„œ Human์œผ๋กœ ์—ฐ๊ฒฐํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

    var Human = function(name){//๋ถ€๋ชจ๊ฐ์ฒด
    	this.name = name;
    }
    Human.prototype.sleep = function(){
    	console.log(this.name + 'is sleeping...')
    };
    
    var steve = new Human('steve');
    
    var Student = function(name){//์ž์‹๊ฐ์ฒด
    	Human.call(this, name);
    }
    
    Student.prototype = Object.create(Human.prototype);
    Student.prototype.consturctor = Student;
    Student.prototype.learn = function(){};
    
    var john = new Student('John');
    john.learn();
    john.sleep();

    ๊ฒฐ๊ณผ


    ๊ฒฐ๊ณผ๊ฐ’์„ ๋ณด๋ฉด consturctor๊ฐ€ ์ž˜ ๋“ค์–ด๊ฐ€ ์žˆ๋Š”๊ฒŒ ๋ณด์—ฌ์ง„๋‹ค.

    ์‹คํ–‰๊ณผ์ • 6

    ์‹คํ–‰๊ณผ์ • 5๋ฒˆ์— ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ class ํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•˜๋ฉด ๊น”๋”ํ•˜๊ฒŒ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

    class Human{
    	constructor(name){
        	this.name = name;
        }
        sleep(){
        }
    }
    
    
    var steve = new Human('steve');
    
    class Student extends Human{
    	constructor(name){
        	super(name);
        }
        learn(){
        }
    var john = new Student('John');
    john.learn();
    john.sleep();    
        
    }
    

    ์ด๋ ‡๊ฒŒ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์‹คํ–‰์ฝ”๋“œ 5๋ฒˆ์—์„œ๋Š” this๋ฅผ super๋กœ ๋Œ€์ฒด๋ฅผ ํ•˜๊ณ  prototype์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ณผ์ •์€ extendsํ‚ค์›Œ๋“œ๋กœ ํ•ด๊ฒฐ์„ ํ•˜์˜€๋‹ค.

    ๐Ÿ“ŒToday Review

    ์˜ค๋Š˜ OOP์— ๋Œ€ํ•ด ํ•™์Šตํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด๋ผ๋Š” ์‚ฌ์‹ค์„ ์ฒ˜์Œ ์•Œ์•˜๊ณ  ํฌ๋กœํ† ํƒ€์ž… ๊ฐœ๋…์„ ๊ณ„์† ๊ณต๋ถ€ํ• ์ˆ˜๋ก ์–ด๋ ค์› ์ง€๋งŒ ์—ญ์‹œ ์ฝ”๋“œ๋ฅผ ์ณ๋ณด๋ฉด์„œ ์ดํ•ดํ•˜๋‹ˆ๊น ์ดํ•ด๊ฐ€ ์•ฝ๊ฐ„์€ ๋˜์—ˆ๋‹ค.
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‹ค๋ฅธ ์–ธ์–ด์™€๋Š” ๋‹ค๋ฅธ ๋งค๋ ฅ์ด ์žˆ๋Š”๊ฑฐ ๊ฐ™๋‹ค. ๋ญ”๊ฐ€ ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„œ ๊ตฌํ˜„ํ•˜๊ธฐ ์‰ฝ๋„๋ก ํ•ด์ค€๋‹ค? ๊ณต๋ถ€ํ•˜๋ฉด ํ• ์ˆ˜๋ก ๋งค๋ ฅ์ ์ธ ์–ธ์–ด๊ฐ™๋‹ค.

    profile
    ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์–ด์š”ย โŒ’ย โ€ฟย โŒ’ย 

    ๊ด€์‹ฌ ์žˆ์„ ๋งŒํ•œ ํฌ์ŠคํŠธ

    0๊ฐœ์˜ ๋Œ“๊ธ€